I used Claude Code to build this static blog from scratch. This is Part 1: getting started and 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.

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. highlight.js for syntax highlighting. nunjucks for templates. sass for styling. cheerio and node-fetch seemed unnecessary — I never used them. 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.