I recently used Claude Code to build this static blog from scratch, focusing on technical implementation rather than using an off-the-shelf solution. Here's my journey from initial hesitation to a fully functioning blog deployed on Cloudflare Pages.

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: It swiftly set up the directory structure and base scripts, saving me significant time and headaches.
  • Customization Potential: The generated code serves as a solid foundation that I can easily modify.
  • 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:

  1. Markdown processing: Full support for frontmatter, syntax highlighting, and tag management
  2. Templating system: Nunjucks templates with SCSS styling
  3. Build pipeline: Scripts for development, building, and deployment
  4. Cloudflare integration: Direct deployment to Cloudflare Pages

Let's dive into the technical details of each component.

Core Components and Implementation

Configuration System

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

const someTheme = {
  primaryColor: '#6b47ed',   // some purple
  secondaryColor: '#f5f2ff', // light purple background
  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 the following packages:

{
  "dependencies": {
    "cheerio": "^1.0.0",
    "commander": "^13.1.0",
    "dotenv": "^16.4.7",
    "front-matter": "^4.0.2",
    "fs-extra": "^11.3.0",
    "gray-matter": "^4.0.3",
    "highlight.js": "^11.11.1",
    "marked": "^15.0.7",
    "marked-highlight": "^2.2.1",
    "node-fetch": "^3.3.2",
    "nunjucks": "^3.2.4",
    "sanitize-html": "^2.14.0",
    "sass": "^1.85.1"
  }
}

While some packages like cheerio and node-fetch seemed superfluous, the overall setup was well-planned.

Markdown Processing Pipeline

The parser.ts module handles all content processing:

  1. File reading: Uses fs-extra for file operations
  2. Frontmatter extraction: Processes YAML frontmatter with gray-matter
  3. Markdown transformation: Converts markdown to HTML with marked
  4. Syntax highlighting: Uses highlight.js with language-specific imports for memory efficiency
  5. HTML sanitization: Prevents XSS attacks while preserving syntax highlighting elements
// 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 implemented automatic external link handling and excerpt generation from the content.

Static Site Generation

The generator.ts module orchestrates the site building process:

  1. Content loading: Reads markdown files from the content directory
  2. Tag processing: Generates tag pages and relationships between posts and tags
  3. Template rendering: Uses Nunjucks to create HTML files
  4. Asset generation: Compiles SCSS to CSS with theme variables
  5. Feed generation: Creates RSS feeds and sitemaps
async generate(): Promise<void> {
  console.log('Generating static site...');
  
  // Process content
  const posts = await this.loadContent();
  
  // Generate pages
  await this.generatePages(posts);
  
  // Copy static assets
  await this.copyStaticAssets();
  
  console.log('Site generation complete!');
}

Templating System

Claude implemented a Nunjucks-based templating system with:

  1. Base template: Defines the HTML structure and common elements
  2. Custom templates: Specific templates for index pages, post pages, and tag pages
  3. Date formatting: Custom filters for handling dates in the Pacific timezone
  4. CSS generation: SCSS with theme variables from configuration
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ site.title }}{% endblock %}</title>
    <meta name="description" content="{{ site.description }}">
    <link rel="stylesheet" href="/css/style.css?v=2">
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }} RSS Feed" href="/feed.xml">
    {% block head %}{% endblock %}
</head>
<body>
    <div class="container">
        <header>
            <h1><a href="/">{{ site.title }}</a></h1>
            <p>{{ site.description }}</p>
            <nav>
                <a href="/">Home</a>
                <a href="/tags/">Tags</a>
                <a href="/feed.xml" title="RSS Feed">RSS</a>
            </nav>
        </header>
        
        <main>
            {% block content %}{% endblock %}
        </main>
        
        <footer>
            <p>&copy; 2025 {{ site.title }}. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

Challenges and Solutions

The software engineering process wasn't without hurdles:

  1. Syntax highlighting: The main challenge arose with syntax highlighting, where Claude initially struggled. After some back-and-forth, we properly configured highlight.js with specific language imports for optimal performance.

  2. External links: Claude implemented an elegant solution for automatically adding target="_blank" and security attributes to external links.

  3. Timezone handling: Ensuring consistent date formatting in Pacific timezone required custom Nunjucks filters.

  4. SEO optimization: Generating sitemaps and implementing proper metadata took some fine-tuning.

Build and Deployment Workflow

Claude set up a comprehensive workflow for development and deployment:

  1. Development server: Live reload for local testing
  2. Build process: Generates static files for the site
  3. Cloudflare deployment: Direct deployment to Cloudflare Pages

The build commands were defined 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`

To complete the project, I used Claude to research Cloudflare Pages deployment. After signing up, I successfully deployed the blog using wrangler.

What I Learned

Working with Claude Code on this project taught me:

  1. AI-assisted development: How Claude can architecturally think through a full-stack project
  2. Static site generation: The internals of a custom static site generator
  3. TypeScript architecture: How to structure a modular TypeScript project
  4. Deployment automation: Setting up Cloudflare Pages deployment workflows

Pro Tip

Using /init in Claude Code may help reduce costs by saving on input tokens. It's worth exploring for potentially more economical interactions. (Thanks U-Zyn!)

Conclusion

This blog was built entirely with Claude Code's assistance, demonstrating that AI can not only help with individual coding tasks but can architect and implement a complete system from scratch.

The blog features a modern stack (TypeScript, Nunjucks, SCSS) and implements best practices (SEO, accessibility, security) - all generated through conversation with Claude.

For about $10, Claude Code generated me a fully functional, high-performance blog with deployment to Cloudflare Pages. While not perfect, it proved to be a valuable tool for rapidly prototyping and deploying a custom blog. It bridged the gap between my ideas and implementation, allowing me to focus on content creation rather than getting bogged down in initial setup details.

What you're reading now is the direct result of that collaboration: a fast, lightweight static blog with syntax highlighting and tag support deployed on Cloudflare Pages. Claude also wrote this blog post.