SvelteKit + Keystatic CMS

A modern content management system built with SvelteKit and Keystatic CMS, deployed on Cloudflare Pages.

Features

• SvelteKit - Fast, modern web framework
• Keystatic CMS - Git-based content management with a beautiful editor
• Markdoc - Powerful content authoring with Svelte components
• Cloudflare Pages - Edge deployment with automatic CI/CD
• TypeScript - Type-safe development experience

Project Structure

svelte-keystatic/
├── src/
│   ├── lib/
│   │   └── keystatic/       # Keystatic integration
│   ├── routes/              # SvelteKit routes
│   └── hooks.server.ts      # Server-side hooks
├── content/                 # Keystatic content (git-tracked)
│   └── posts/              # Blog posts
├── keystatic.config.ts     # CMS configuration
└── .github/
    └── workflows/
        └── deploy.yml      # CI/CD workflow

Getting Started

Prerequisites

• Node.js 20+
• npm

Installation

1. Clone the repository

2. Install dependencies:

   npm install --legacy-peer-deps
   

3. Start development server:

   npm run dev
   

4. Access the CMS at http://localhost:5173/keystatic

Development

Running the Dev Server

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

The application will be available at http://localhost:5173

The Keystatic CMS will be available at http://localhost:5173/keystatic

Building for Production

npm run build

Preview Production Build

npm run preview

Keystatic CMS

Accessing the CMS

In development:

• Navigate to /keystatic in your browser
• The CMS uses local file storage

Content Structure

Content is stored in the /content directory:

• /content/posts - Blog posts in Markdoc format

Configuration

The CMS is configured in keystatic.config.ts. You can:

• Add new collections
• Modify schemas
• Add custom fields
• Configure storage (local, GitHub, Keystatic Cloud)

Deployment

Cloudflare Pages

This project is configured for automatic deployment to Cloudflare Pages via GitHub Actions.

Required Secrets

Add these secrets to your GitHub repository (Settings → Secrets and variables → Actions):

• CLOUDFLARE_API_TOKEN - Your Cloudflare API token
• CLOUDFLARE_ACCOUNT_ID - Your Cloudflare account ID

Deployment Workflow

Deployments happen automatically:

• Production: Push to main branch
• Preview: Create a pull request

The workflow will:

1. Install dependencies
2. Build the SvelteKit app
3. Deploy to Cloudflare Pages

Manual Deployment

You can also deploy manually using Wrangler:

npm run build
npx wrangler pages deploy .svelte-kit/cloudflare

Tech Stack

• Framework: SvelteKit 2.x
• CMS: Keystatic
• Content Format: Markdoc
• Deployment: Cloudflare Pages
• CI/CD: GitHub Actions

Resources

• SvelteKit Documentation
• Keystatic Documentation
• Cloudflare Pages

License

MIT