Walking Skeleton: First Deploy to Cloudflare

Sprint 1's goal is a walking skeleton — the thinnest vertical slice that proves the whole pipeline works end to end. For The Dev Playbook, that means: code compiles, pages render, MDX works, and it's live on a real domain.

What's a Walking Skeleton?

The term comes from Alistair Cockburn. A walking skeleton is:

A tiny implementation of the system that performs a small end-to-end function. It need not use the final architecture, but it should link together the main architectural components.

For a static site, the skeleton is:

1. Build system — Vite compiles, React Router pre-renders
2. Routing — all pages resolve (even if they're stubs)
3. Content pipeline — MDX compiles to React components with syntax highlighting
4. Deployment — git push triggers build and deploy to Cloudflare Pages
5. Domain — thedevplaybook.com resolves and serves the site

The Tech Stack in Action

// vite.config.ts — the MDX pipeline
export default defineConfig({
  plugins: [
    tailwindcss(),
    mdx({
      remarkPlugins: [remarkGfm, remarkFrontmatter, remarkMdxFrontmatter],
      rehypePlugins: [[rehypePrettyCode, { theme: "github-dark" }]],
    }),
    reactRouter(),
  ],
});

The key insight: MDX files are compiled to React components at build time by @mdx-js/rollup. Frontmatter is extracted by remark-mdx-frontmatter and exported as a named export. Syntax highlighting happens at build time via Shiki — zero client-side JS for code blocks.

Cloudflare Pages Setup

Cloudflare Pages gives us:

• Git-push deploys — push to main, site rebuilds automatically
• Global CDN — static files served from 300+ edge locations
• Free tier — unlimited bandwidth, 500 builds/month
• Custom domain — thedevplaybook.com with automatic SSL

Configuration is minimal:

What's Next

With the skeleton walking, Sprint 2 shifts to the content model: frontmatter schemas, build-time content indexing, and the journal listing page. The hard infrastructure work is done — now we build on top of it.