Building this site with Claude, GitHub, and Cloudflare Pages

How this blog got built and shipped — an Eleventy static site, a PR-based publishing workflow, and a deploy pipeline with no servers to manage.

This site used to be a one-page marketing site: a hero, an about section, a services grid, a contact form. It's now a plain, minimal blog. Here's how it got there and how the pieces fit together.

Starting point: a static HTML page

The original site was hand-written HTML, CSS, and a small amount of JavaScript for the contact form — no build step, no dependencies. That's a fine way to run a single page, but it has no way to add new content without editing markup directly. There was no blog, no way to publish an update without touching index.html.

Restructuring with Eleventy

The first real change was moving to Eleventy, a static site generator. Eleventy takes templates and Markdown files in src/ and compiles them to plain HTML in _site/ — no client-side framework, no runtime dependency, nothing to keep patched. The whole build is:

npm run build

Individual posts are Markdown files with frontmatter:

---
title: My Post Title
date: 2026-08-01
description: One sentence shown on the post index.
---

A shared posts.json data file applies the same layout and URL pattern to every file in src/posts/, so adding a post never means touching template code — just drop a Markdown file in the folder.

Code blocks get syntax highlighting at build time via @11ty/eleventy-plugin-syntaxhighlight, which means no client-side JavaScript ships to render them. In fact, after the redesign, the site ships no JavaScript at all — the Content-Security-Policy header locks that down explicitly with script-src 'none'.

Publishing through GitHub

The publishing workflow is deliberately boring: write a Markdown file, open a pull request, merge it. No CMS, no admin login, no separate publishing tool. Every change to the site — including this post — goes through the same review path as any other code change.

That also means every post is versioned. The full history of the site, including every past design, is sitting in git log.

Deploying with Cloudflare Pages

Cloudflare Pages watches the repository and rebuilds on every push. The dashboard has a built-in "Eleventy" framework preset that fills in the build configuration for you:

  • Framework preset: Eleventy
  • Build command: npx @11ty/eleventy
  • Build output directory: _site

That output directory matches the dir.output setting in .eleventy.js, so the two stay in sync without any extra wiring. Even before that preset was picked explicitly, Cloudflare had already auto-detected the project and deployed it correctly — the preset just makes the settings explicit instead of implicit.

Every pull request also gets its own preview URL, so a change can be reviewed as a live site before it ever reaches main. Merge to main, and the same build ships to production automatically.

Where Claude fit in

The whole migration — from static HTML, to an Eleventy build, to this minimal blog layout — was done with Claude Code working directly in this repository: scaffolding the Eleventy config, porting the old page into templates, writing the post layouts and styling, and then, when the marketing page turned out to be the wrong call, tearing it back out in favor of just a post index. Each step went through the same GitHub pull request flow as any other contributor's change — reviewed, previewed on Cloudflare, and merged like everything else here.

Part 3 of 3 in Building this blog

  1. Welcome to the Madden Systems blog
  2. How to publish a post
  3. Building this site with Claude, GitHub, and Cloudflare Pages