Skip to main content

Overview

JetShip's blog system is powered by Keystatic, a modern Git-based Content Management System that seamlessly integrates with Next.js. Keystatic combines the power of version control with an intuitive content management interface, making it perfect for developers and content creators alike.

🤔 Why Keystatic?​

Keystatic offers a developer-first approach to content management by storing content directly in your Git repository. It leverages built-in version control, which is ideal for collaboration. As a TypeScript-first CMS, Keystatic integrates effortlessly with Next.js, making it perfect for modern developer workflows.

Key Benefits:​

  • Git-Based: Content lives in your repository with built-in version control
  • TypeScript Integration: Full type safety with auto-generated types for your content schema
  • Zero Database: Simple JSON and MDX file storage
  • Modern Editor: Rich text editing with live preview
  • Structured Content: Well-organized with custom fields and validations
  • Flexible Deployment: Local, GitHub, or cloud hosting options

✨ Features​

The blog system comes with everything you need to create and manage content:

Content Features​

  • Posts & Categories: Write, organize, and manage blog content
  • Media Support: Handle images and other media assets
  • Draft System: Save and preview before publishing
  • SEO Ready: Built-in meta tags and optimization

Developer Features​

  • MDX Support: Markdown with React components
  • Type Safety: Auto-generated TypeScript types for content validation and IDE support
  • Asset Optimization: Automatic image processing with configurable quality and sizes
  • Custom Fields: Flexible content structure

🚀 Getting Started​

Enabling the Blog Feature​

Before creating content, you'll need to enable the blog functionality in your JetShip installation:

  1. Navigate to your admin dashboard
  2. Open the General Settings section
  3. Go to the Pages & Components tab
  4. Find and enable the Blog feature

Blog Settings

Once enabled, your blog will be accessible at the /blog route on your website.

Setting Up Social Sharing​

To allow visitors to share your blog posts across social media:

  1. Access the General Settings
  2. Navigate to the Share This (Blog) tab
  3. Enable the Share feature

Share Settings

You can extend the sharing capabilities using next-share. Here's an example of adding WhatsApp sharing:

apps/web/src/app/(front)/(pages)/blog/[slug]/ShareLinks.tsx
import { WhatsappShareButton, WhatsappIcon } from 'next-share'

const ShareLinks = () => {
  return (
    <WhatsappShareButton url={url} title={title}>
      <WhatsappIcon size={32} round />
    </WhatsappShareButton>
  )
}

Installing Keystatic Admin​

To set up the admin interface for your blog:

  1. Open your terminal
  2. Navigate to your project root
  3. Run the following command:
turbo gen keystatic

This command will:

  • Create the necessary admin routes
  • Set up the Keystatic interface at /keystatic
  • Configure initial content storage settings

For detailed configuration options and customization, refer to the Configuration Guide.

📚 Resources​