Skip to main content

Configuration

The Keystatic admin interface in JetShip can be configured to match your project's needs. The configuration is managed through the keystaticConfig.tsx file, located in the packages/keystatic/src directory. This guide will walk you through the available configuration options and how to implement them effectively. For comprehensive details, you can refer to the Keystatic Documentation.

📂 Storage Options​

Keystatic provides three flexible storage options to accommodate different development workflows and deployment scenarios. Each option offers unique benefits for managing your blog content:

1. Local Storage​

Perfect for development and testing, local storage keeps your content files directly in your project's file system. This option provides the fastest setup and is ideal for getting started with Keystatic. Learn More

export const localConfig = createConfig({
  storage: { type: 'local' }
})

2. GitHub Storage​

Ideal for team collaboration, GitHub storage integrates directly with your repository. This enables version control for content changes and seamless deployment workflows through your GitHub repository. Learn More

export const githubConfig = createConfig({
  storage: {
    type: 'github',
    repo: {
      owner: REPO_OWNER,
      name: REPO_NAME
    }
  }
})

3. Cloud Storage​

Best for production environments, Keystatic Cloud provides advanced features like authentication and optimized image hosting. This option offers the most robust solution for managing content in a production environment. Learn More

export const cloudConfig = createConfig({
  storage: {
    type: 'cloud'
  },
  cloud: {
    project: '[TEAM_NAME]/[PROJECT_NAME]'
  }
})

👀 Real-time Previews​

Real-time preview functionality allows content editors to see their changes instantly while editing blog posts, significantly improving the content creation experience. While this feature isn't included in the default setup, you can enhance your blog with real-time previews by following the official Keystatic guide: Real-Time Previews Guide.

The guide provides detailed instructions for integrating Next.js' draft mode with Keystatic, enabling your content team to preview changes before publishing. This feature is particularly valuable for maintaining content quality and ensuring proper formatting.

🚀 Enable Admin Routes in Production​

Important

When using local storage, admin routes are automatically disabled in production environments for security reasons. If you're using GitHub or Cloud storage and need to enable admin access in production, follow the steps below carefully.

Steps to Enable Admin Routes in Production:​

  1. Remove the Code in apps/web/src/app/keystatic/layout.tsx:

    Locate and remove the following production check from your layout file:

    apps/web/src/app/keystatic/layout.tsx
    if (process.env.NODE_ENV === 'production') {
      return <NotFound />
    }

  2. Remove the Code in packages/keystatic/src/keystaticRouteHandler.ts:

    Find and remove the production environment check from your route handler:

    packages/keystatic/src/keystaticRouteHandler.ts
    if (process.env.NODE_ENV === 'production') {
      return () => new Response(null, { status: 404 })
    }

After removing these code blocks, your admin routes will be accessible in production. This enables your content team to manage blog posts and categories directly on your production environment. Remember to implement appropriate authentication and access controls to maintain security. 🎉