How Claude Code Built This Blog - Part 2
This is Part 2 covering implementation details and deployment. Part 1 covered getting started and architecture.
Markdown Processing Pipeline
The parser.ts module handles all content processing: file reading with fs-extra, frontmatter extraction with gray-matter, markdown transformation to HTML with marked, syntax highlighting with highlight.js (language-specific imports for memory efficiency), and HTML sanitization to prevent 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: content loading (reads markdown files from the content directory), tag processing (generates tag pages and relationships between posts and tags), template rendering (uses Nunjucks to create HTML files), asset generation (compiles SCSS to CSS with theme variables), and feed generation (creates RSS feeds and sitemaps).
Templating System
Claude implemented a Nunjucks-based templating system with a base template defining the HTML structure and common elements, custom templates for index pages, post pages, and tag pages, date formatting with custom filters for handling dates in the Pacific timezone, and CSS generation using SCSS with theme variables from configuration.
Challenges and Solutions
The software engineering process wasn't without hurdles:
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.
External links: Claude implemented an elegant solution for automatically adding target="_blank" and security attributes to external links.
Timezone handling: Ensuring consistent date formatting in Pacific timezone required custom Nunjucks filters.
Build and Deployment Workflow
Claude set up the workflow for development and deployment: development server with live reload for local testing, build process generating static files for the site, and Cloudflare deployment with 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: how Claude can architecturally think through a full-stack project, the internals of a custom static site generator, how to structure a modular TypeScript project, and 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.
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.
Related posts: