How Claude Code Built This Blog - Part 1

I paid about $10 to see whether Claude Code could build the static-site generator behind this blog. It got the architecture mostly right, added two packages I never needed, and left me with code I could still read.

This first part covers the initial architecture. Part 2 covers implementation and deployment.

Entering My Credit Card Was the Hard Part

Curiosity won over cost anxiety. I wanted Cloudflare Pages with custom Node.js scripts to process markdown — not Hexo, not Jekyll, not any framework that would own my static site generation workflow. Just scripts I could read and modify, with solid syntax highlighting.

Field tip For about $10, Claude Code scaffolded the directory structure, picked packages, and generated readable base scripts.

The code it produced was readable enough to modify on my own.

The Architecture

Claude created a TypeScript-based static site generator with four pieces:

Markdown processing: Frontmatter, syntax highlighting, tag management.

Templating: Nunjucks templates with SCSS styling.

Build pipeline: Scripts for dev, build, and deployment.

Cloudflare integration: Direct deployment to Cloudflare Pages.

Packages: Mostly Right

Claude set up a clean config.ts:

const someTheme = {
  primaryColor: "#6b47ed",
  secondaryColor: "#f5f2ff",
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
};

export const config: SiteConfig = {
  title: "KahWee",
  description: "Thoughts on web development, programming, and technology",
  baseUrl: "https://kahwee.com",
  theme: { ...someTheme },
};

It pulled in marked, marked-highlight, gray-matter, and front-matter for Markdown, plus highlight.js for syntax highlighting, nunjucks for templates, and sass for styling. It also added cheerio and node-fetch; I never used either one. The rest earned their place.

├── app/
│   ├── components/         # Reusable UI components
│   ├── routes/            # Route handlers and pages
│   ├── models/            # Data access layer
│   └── utils/            # Helper functions
├── public/               # Static assets
└── templates/           # Nunjucks templates

Continue to Part 2 for implementation details and deployment.

For the current workflow map, not just the build diary: Claude Code: what I actually use.