Building this site with Astro, Keystatic, and Cloudflare
A short tour of the stack behind this site — Markdoc content collections, Git-based editing with Keystatic, and static-first hosting on Cloudflare Workers.
By Abdul Rafay Shaikh · · updated
- Astro
- Keystatic
- Cloudflare
Every personal site eventually turns into a tour of its own stack. This one is no exception, so here is what runs underneath.
The stack
The site is built with Astro and deploys to Cloudflare Workers. Content lives in the repository and is edited through Keystatic, so every change is a Git commit — no database, no CMS server to maintain.
- Astro for routing, content collections, and image optimization
- Markdoc for long-form content
- Keystatic for the editing UI
- Cloudflare Workers for hosting and the admin API
How content flows
A post is a single .mdoc file with YAML frontmatter and a Markdoc body:
--- title: Building this site pubDate: 2026-09-15 updatedDate: 2026-10-05 --- The body goes here.
Keystatic reads and writes those files through the GitHub API. When a change lands on main, Cloudflare's Workers Builds pipeline rebuilds and redeploys the site.
Static by default, dynamic only where it matters.
Keeping the interface lightweight
The reading pages render as HTML with small scripts for theme switching and the contact form. The homepage loads its Three.js landscape separately from the page content, so navigation, text, and project links are available while the scene initializes. A CSS fallback remains visible if WebGL cannot run.
Contact and editing
The contact form submits to Formspree, with an email link as an alternative. Keystatic uses GitHub storage in development and production, so content edits made through the CMS create repository commits. During development, I edit content files directly.
Why this setup
The result is a small publishing workflow: write in the repository, validate the content, build the site, and serve prerendered pages from Cloudflare. Interactive features stay specific to the pages that need them.