I Built This Blog in 10 Minutes.
"How I went from zero to a deployed, accessible blog using Claude Code, Google Stitch, and Cloudflare Workers, and why I chose each piece of the stack."
This blog didn’t exist 10 minutes before it went live. Three tools, one conversation. Here’s what happened.
The build
I opened Google Stitch, described what I wanted (dark, editorial-style technical blog, archive page, article view), and got two mockups back in about two minutes. Not wireframes. Just two images that looked right. Good enough.
I dropped those screenshots into Claude Code and triggered the /frontend-design skill:
“Use /frontend-design and make the front end for my personal blog. I just want the articles list page and the article show page. Make it look like these screenshots.”
Six minutes later I had everything: Astro config, Tailwind 4 theme tokens, content collections, MDX, layouts, components, three demo articles with real code, RSS feed, sitemap, 404 page. The skill picked the typography and built out the full color system.
Then I iterated in the same conversation. “Fix the contrast.” “Remove the tags.” “Change the nav.” Each change took seconds.
Deployment was two commands:
npx wrangler login
npm run deployLive on my custom domain within seconds.
The contrast rabbit hole
This part surprised me. I asked Claude Code if the heading was hard to read, and it went deep. It wrote a Node script to calculate exact contrast values for every color pairing against two different standards: WCAG 2.1 AA and APCA.
Most developers know WCAG. It’s the accessibility standard that says “your contrast ratio needs to be at least 4.5:1 for body text.” Simple formula, been around forever. But it has a known weakness: it treats light-on-dark and dark-on-light as equivalent. They’re not.
APCA is the replacement algorithm in the WCAG 3.0 draft, and it understands something WCAG 2.1 doesn’t: dark themes are harder to get right. The reason is a phenomenon called halation. On a dark background, light text bleeds outward. Your eye’s pupil dilates in low-light conditions, and thin bright strokes literally smear at the edges. A color pairing that looks perfectly readable as dark-on-light can feel harsh and fuzzy when you flip it.
APCA accounts for this asymmetry. It also uses perceptual lightness instead of raw luminance, which better matches how your eyes actually process contrast. The threshold for comfortable body text reading is Lc 75. Four of my colors didn’t hit it. Claude Code bumped them and re-verified.
It even caught that the serif font had thin strokes that made halation worse and switched article titles to sans-serif. I wouldn’t have caught that myself. Not in ten minutes, probably not in an hour.
Why this stack
Astro 6
Ships zero JavaScript by default. For a content blog, that’s the right call. Every page is static HTML + CSS, sub-100ms loads.
Tailwind 4
Dropped the config file. Design tokens live in CSS now via @theme instead of a JavaScript object. Cleaner.
MDX
Plain Markdown would have worked for launch. But MDX lets me embed interactive components in articles when I eventually want them: live code playgrounds, charts, collapsible sections. Costs nothing at build time, and I’ll probably use it.
Cloudflare Workers
Cloudflare deprecated Pages in April 2025 and merged everything into Workers. For a static site, Workers with static assets is the best free hosting I’ve found. Unlimited static asset requests, global edge network, zero cold starts. wrangler deploy uploads your dist/ folder and you’re done.
Claude Code + /frontend-design
This is what made the speed possible. The skill takes design references, extracts colors and typography and spacing, then generates code that actually looks like the mockups instead of a default template. It picks fonts, commits to an aesthetic, checks accessibility.
The entire loop from mockup to deployed site happened in one conversation. Design feedback, font swaps, contrast fixes, deployment, DNS routing. I didn’t switch tools once.
I still made every design decision. Claude Code just made them happen faster.
What I’d change
Not much. The stack is minimal, deployment is simple, and the content workflow is “write an .mdx file and run npm run deploy.”
If the blog grows, I’ll add view transitions (Astro supports this natively), search via a static JSON index, and image optimization with Astro’s <Image> component. But right now this is exactly what I need. The hardest part should be writing, not infrastructure.