Diwaker Gupta
·1 min read·

Rebuilding diwaker.io with Astro & Keystatic

Moving from a self-hosted Ghost instance behind a Cloudflare Tunnel to an edge-cached static site with local visual editing and full typographic control.

For the past few years, diwaker.io ran on a self-hosted Ghost instance tucked behind a Cloudflare Tunnel on a home server. While Ghost’s editor is pleasant, two things kept nagging at me:

  1. Global Latency: Any uncached hit from Europe or Asia had to traverse the tunnel back to my home server, occasionally pushing p95 latency past 10 seconds.
  2. Design Constraints: Even with a paid custom Ghost theme, customizing the layout, typography, and interactive elements always felt like fighting Handlebars templates and theme packaging.

The New Architecture

This site now runs on Astro paired with Keystatic in local mode:

  • Visual Editing When You Want It: Running npm run dev mounts the Keystatic CMS UI at /keystatic for managing posts, tags, and images with a distraction-free rich-text/MDX editor.
  • Plain Files in Git: There is no SQLite binary or external database to sync. Keystatic reads and writes clean .mdx files directly into src/content/posts/.
  • Instant Live Preview: Editing in Keystatic or directly in your code editor triggers Astro’s Vite HMR immediately.
  • Edge-First Static Delivery: Running npm run build strips out the CMS admin routes and outputs pure static HTML, CSS, and optimized assets ready for Cloudflare Pages—bringing global latency under 50ms.

Simplicity is about subtracting the obvious and adding the meaningful. — John Maeda

// Everything is validated at build time via Astro Content Collections
const posts = await getCollection('posts', ({ data }) => !data.draft);