Getting Started with Astro and Keystatic

Why I Chose Astro

When I set out to build my personal portfolio and blog, I had a few key requirements: zero JavaScript by default, excellent developer experience, and a content management system that doesn't lock me into a vendor.

Astro checked all the boxes. It ships zero JS to the client unless you explicitly opt in, supports Markdown and MDX out of the box, and has a thriving ecosystem of integrations.

The Stack

Here's what powers this site:

• Astro — Static site generator with island architecture
• Keystatic — Git-based CMS that stores content as Markdown files
• Supabase Storage — Free image hosting with CDN
• Tailwind CSS — Utility-first styling
• Vercel — Automatic deployments on every push

Setting Up Keystatic

Keystatic is a fantastic CMS for developers. It stores your content directly in your Git repository as .md files, which means:

1. Your content is version-controlled
2. You can edit content locally or through a web UI
3. There's no database to manage
4. It's completely free

// keystatic.config.ts
import { config, collection, fields } from '@keystatic/core';

export default config({
  storage: { kind: 'local' },
  collections: {
    blog: collection({
      label: 'Blog Posts',
      slugField: 'title',
      path: 'src/content/blog/*',
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        // ... more fields
      },
    }),
  },
});

What's Next

In the next post, I'll dive deeper into how I set up Supabase Storage for hosting blog images at zero cost. Stay tuned!