How Claude Code Built This Blog - Part 2 | KahWee - Web Development, AI Tools & Tech Trends

This is Part 2: implementation and deployment. Part 1 covers getting started and architecture.

Markdown Processing

parser.ts reads files with fs-extra, extracts frontmatter with gray-matter, converts markdown to HTML with marked, and sanitizes the output against XSS while preserving syntax highlighting.

The key decision is to register only the languages you need, which keeps memory low.

// Register only the languages needed
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("typescript", typescript);
hljs.registerLanguage("markdown", markdown);
hljs.registerLanguage("python", python);
hljs.registerLanguage("json", json);

// Configure marked with syntax highlighting
const marked = new Marked(
  markedHighlight({
    emptyLangClass: "hljs",
    langPrefix: "hljs language-",
    highlight(code, lang, info) {
      const language = hljs.getLanguage(lang) ? lang : "json";
      return hljs.highlight(code, { language }).value;
    },
  }),
);

Claude also added automatic external link handling and excerpt generation.

Static Site Generation

generator.ts orchestrates the build: reads markdown from the content directory, generates tag pages, renders Nunjucks templates to HTML, compiles SCSS to CSS with theme variables, and creates RSS feeds and sitemaps.

Templating

The Nunjucks setup includes a base template for shared HTML structure, separate templates for index, post, and tag pages, custom date filters for Pacific timezone formatting, and SCSS compilation with theme variables from config.

Where Claude Struggled

Software engineering with an AI assistant is not frictionless.

Syntax highlighting took several rounds. Claude's first attempt at configuring highlight.js didn't work. After back-and-forth, we landed on language-specific imports that performed well.

External links went smoothly. Claude added target="_blank" and security attributes to external links automatically.

Timezone handling needed custom Nunjucks filters for consistent Pacific timezone dates.

Build and Deploy

The build commands in CLAUDE.md:

- Build: `npm run build`
- Development: `npm run dev`
- Generate static site: `npm run generate`
- Serve site: `npm run serve`
- Deploy to Cloudflare: `npm run deploy`

I used Claude to research Cloudflare Pages deployment, then deployed with wrangler.

What Stuck With Me

Claude thinks through full-stack projects architecturally. Watching it plan the generator taught me more about static site internals than building one from tutorials would have. Structuring a modular TypeScript project and wiring up Cloudflare Pages deployment — I now understand both well enough to modify them without AI help.

Pro tip: Using /init in Claude Code may reduce costs by saving on input tokens.

The Result

The total cost was $10 for a working blog built with TypeScript, Nunjucks, and SCSS. SEO, accessibility, and security were all generated through conversation. The result was not perfect, but it was a real starting point I could own and modify.

What you're reading now runs on that code: a static blog with syntax highlighting and tag support on Cloudflare Pages.

Related posts: