Astro + Keystatic Starter

A minimal starter template combining Astro's performance with Keystatic's git-based CMS. Perfect for content-heavy sites that need both speed and easy editing.

Stack: Astro, Keystatic, Tailwind CSS, TypeScript
View code

Astro + Keystatic Starter

A starter template I built for quickly spinning up content-driven sites with a visual editor. This powers several client projects and my own portfolio.

Why This Stack

After trying various CMS options, I settled on Keystatic because:

  • Git-based: No database, content lives in the repo
  • Visual editing: Clients can edit without touching code
  • Local-first: Works offline, syncs when ready
  • Type-safe: Full TypeScript support with content schemas

Features

Content Collections

Pre-configured collections for common content types:

  • Blog posts with MDX support
  • Project/portfolio pages
  • Simple pages (about, contact)

Tailwind Integration

  • Dark mode support out of the box
  • Custom design tokens
  • Responsive utilities

Developer Experience

  • Hot reload in development
  • Type-safe content queries
  • ESLint + Prettier configured

Quick Start

# Clone the repo
git clone https://github.com/jaimesolis/astro-keystatic-starter

# Install dependencies
npm install

# Start development
npm run dev

The Keystatic admin panel is available at /keystatic.

Project Structure

├── src/
│   ├── content/
│   │   ├── blog/
│   │   └── pages/
│   ├── components/
│   ├── layouts/
│   └── pages/
├── keystatic.config.ts
└── astro.config.mjs

Customization

Adding a New Collection

  1. Define the schema in keystatic.config.ts
  2. Create the content folder in src/content/
  3. Add the page route in src/pages/

Styling

The template uses Tailwind with custom colors:

// tailwind.config.js
colors: {
  brand: {
    green: '#14F195',
    purple: '#9945FF',
  }
}

Deployment

Works with any static hosting:

  • Vercel (recommended)
  • Netlify
  • Cloudflare Pages

For Keystatic’s cloud sync features, you’ll need to configure GitHub OAuth.

Use Cases

I’ve used this starter for:

  • Portfolio sites (like this one)
  • Small business websites
  • Documentation sites
  • Personal blogs

Created: October 2025 License: MIT Status: Actively maintained