I recently used Claude Code to build this static blog from scratch, focusing on technical implementation rather than using an off-the-shelf solution. This is Part 1 covering getting started and architecture decisions. Part 2 covers implementation and deployment.

Getting Started with Claude Code

I'll admit, I was nervous when inputting my credit card details. The uncertainty of potential costs loomed large, but curiosity won out. My goal was clear: I wanted to use Cloudflare Pages, something I'd been eyeing for a while, coupled with Node.js for markdown-to-HTML conversion.

Rather than becoming an expert in Node.js static site generation or getting locked into higher-level frameworks like Hexo or Jekyll, I wanted a set of custom Node.js scripts to process markdown files with particular emphasis on syntax highlighting.

Claude Code quickly proved its worth: rapid prototyping (swiftly set up the directory structure and base scripts, saving significant time), customization potential (the generated code serves as a solid foundation that I can easily modify), and cost-effective (at around $10, the time saved justified the expense).

The Architecture

Claude created a TypeScript-based static site generator with these key components:

Markdown processing: Full support for frontmatter, syntax highlighting, and tag management

Templating system: Nunjucks templates with SCSS styling

Build pipeline: Scripts for development, building, and deployment

Cloudflare integration: Direct deployment to Cloudflare Pages

Configuration and Package Selection

Claude created a clean configuration system in config.ts that defines site settings:

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 },
};

Package selection: Claude Code included dependencies for markdown processing (marked, marked-highlight, gray-matter, front-matter), syntax highlighting (highlight.js), HTML manipulation (cheerio, sanitize-html), templating (nunjucks), styling (sass), and utilities (fs-extra, dotenv, commander).

While some packages like cheerio and node-fetch seemed superfluous, the overall setup was well-planned. The application structure follows a modern architecture with clear separation of concerns:

├── 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 the implementation details, challenges faced, and deployment workflow.