Building This Blog with Claude Code: Why I Skipped WordPress

How I went from "I should probably use WordPress" to shipping a custom static blog in a few hours

Claude Code Static Sites Design

About Me: I'm a business and product executive with zero coding experience. I've spent my career building products by working with engineering teams at Amazon, Wondery, Fox, Rovi, and TV Guide, but never wrote production code myself. Until recently.

Frustrated with the pace of traditional development and inspired by the AI coding revolution, I decided to build my own projects using AI assistants (primarily Claude Code, Codex, and Cursor). This blog post is part of that journey—documenting what I've learned building real production systems as a complete beginner.

TL;DR

The Decision: Skip WordPress/Ghost/Medium and build a custom static blog from scratch with Claude Code in one afternoon.

Why It Worked:

Tech Stack: HTML + CSS + GitHub Pages. That's it.

The Initial Dilemma: WordPress vs. Build It Myself

I wanted to start writing about my journey building production systems with AI coding assistants. The conventional wisdom was clear: use WordPress, Ghost, or Medium. Don't reinvent the wheel.

Why I Almost Chose WordPress

The arguments for WordPress were compelling:

Why I Hesitated

But then I thought about what WordPress would actually mean:

Most importantly: I'm learning to build things with AI coding assistants. Why would I use a tool that abstracts away the building process?

The Alternative: Build It From Scratch

I opened Claude Code and said: "I want to build a simple blog. Just HTML and CSS. No frameworks. Can we do this?"

The answer: Absolutely.

What We Built (Initial Version)

In about 15-20 minutes, Claude Code and I created:

Total lines of code: ~600 (HTML + CSS). No JavaScript frameworks. No build tools. No dependencies.

The Design Evolution: Three Complete Redesigns

Here's where things got interesting. Because I owned the entire codebase and was working with an AI assistant, iterating on design became trivial.

Version 1: Contemporary Editorial

First attempt was a sophisticated, magazine-style design:

This looked professional. But it didn't feel right.

Version 2: "I Don't Love This Design"

After seeing the contemporary design live, I said: "I don't love the design. Can you propose another look and feel? Something inspired by TV Guide magazine from the early 2000s."

This wasn't random—I used to work at TV Guide, so that aesthetic was deeply familiar to me. The bold colors, thick borders, and information-dense layout felt right for a blog about building in public.

Claude Code responded by completely transforming the aesthetic.

Version 3: TV Guide Bold (Current Design)

The final design embraced early 2000s media maximalism:

Time to redesign: Literally one message. I said what I wanted, Claude Code executed it. Maybe 60 seconds of my time.

The SEO Deep Dive: GEO for 2025

One of my requests was: "Research GEO (Generative Engine Optimization) and tech SEO best practices and update all pages."

Claude Code came back with a comprehensive SEO strategy optimized for both traditional search engines and AI-powered search (ChatGPT, Perplexity, Gemini).

What Got Added to Every Page

1. Primary Meta Tags

<title>[Optimized title under 60 chars]</title>
<meta name="description" content="[150-160 char description]">
<meta name="keywords" content="[GEO-optimized keywords]">
<link rel="canonical" href="[absolute URL]">

2. Open Graph Tags (Facebook, LinkedIn, WhatsApp, Discord, Slack)

<meta property="og:type" content="article">
<meta property="og:image" content="[1200x630px image]">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

3. Twitter Card Tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[Twitter-optimized title]">

4. JSON-LD Structured Data

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "[Post title]",
  "author": {
    "@type": "Person",
    "name": "Neel Ketkar"
  }
}
</script>

The SEO Validation Checklist

Claude Code also created a comprehensive validation checklist document with testing tools:

This level of SEO optimization would have required multiple WordPress plugins (Yoast, All in One SEO, etc.) and still might not have covered AI search optimization.

The Details: Favicon, Bio Updates, Post Ordering

Favicon Evolution

Initially, no favicon. Then I asked Claude Code to create one:

First version: Bird-themed (sparrow silhouette) in terracotta
Final version: Bold "B" in white on red background with yellow border—matching the TV Guide aesthetic

Both were SVG, both created in seconds through conversation.

Bio Hyperlinks

I asked: "Can you also add Wondery (Amazon/Wondery) to my bio? And make those company names hyperlinkable."

Claude Code updated the bio across all pages (homepage, both blog posts, and the template) to include hyperlinked company names. This consistency would have been tedious to maintain manually in WordPress.

Reverse Chronological Ordering

Me: "Can you also sort the posts in reverse chron order?"

Done instantly. In WordPress, this would be automatic but inflexible. Here, I can control the exact order if I ever want featured posts or custom sorting.

What I Learned About AI-Assisted Development

1. Iteration Speed Is Everything

With Claude Code, I could say "I don't love this design" and get a complete redesign in one message—literally 60 seconds of my time. No theme shopping, no CSS overrides fighting with a framework, no plugins to configure.

2. Conversation > Configuration

Instead of learning WordPress admin panels, theme customizers, and plugin settings, I just described what I wanted:

Each request was executed in minutes.

3. You Learn the Stack

Because Claude Code shows you the code and explains decisions, I now understand:

WordPress would have kept all of this hidden behind abstractions.

4. Zero Ongoing Maintenance

No plugins to update. No security patches. No database to back up. Just static HTML and CSS hosted for free on GitHub Pages.

If I want to add a post, I copy the template, write in HTML, and push to GitHub. Done.

What This Approach Isn't Good For

To be fair, this wouldn't work for everyone:

Not Ideal If You...

Perfect If You...

The Numbers

Development Time: ~1 hour total (15-20 min initial build + redesigns + SEO)
Lines of Code: ~1,200 (HTML + CSS across all files)
Cost: $0/month (GitHub Pages free tier)
Dependencies: 0
Build Tools: None
Maintenance: Write posts, git push, done

WordPress Comparison:
Setup time: Probably longer (theme shopping, plugin configuration)
Monthly cost: $5-20 for hosting
Ongoing maintenance: Plugin updates, security patches, backups
Design flexibility: Limited by theme
Learning: Minimal (admin panel clicks)

The Tech Stack (Yes, It's This Simple)

Frontend

HTML5 (semantic tags: <article>, <main>, <header>, <footer>)
CSS3 (custom properties, media queries, no frameworks)
System fonts (Arial Black, Arial—no font loading)

Hosting & Deployment

GitHub Pages (free static site hosting)
GitHub Actions (automatic deployment on push to main)
Custom domain support (if needed)

Analytics

GoatCounter (privacy-friendly, lightweight, free tier)

Tools Used

Claude Code (AI coding assistant)
Git (version control)
VS Code / any text editor

That's the entire stack. No Node.js, no React, no webpack, no Tailwind, no databases.

The Design Philosophy: Constraints as Features

By limiting myself to static HTML and CSS, I gained:

1. Speed

Pages load instantly. No JavaScript bundle. No database queries. Just HTML and CSS served from a CDN.

2. Reliability

Nothing can break. No plugins to conflict. No database to corrupt. Static files are bulletproof.

3. Portability

Want to move hosting? Copy the public/ folder anywhere. No export/import, no database migration.

4. Version Control

Every change is tracked in Git. Want to see the design evolution? Check the commit history.

How to Replicate This Approach

If you want to build your own static blog with Claude Code:

Step 1: Open Claude Code and Describe Your Vision

"I want to build a simple blog. Just HTML and CSS.
Clean design, responsive, with a homepage that lists posts
and individual post pages. Can you create the initial structure?"

Step 2: Iterate on Design

"The design feels too minimal. Can you make it more
editorial? Think magazine-style with serif fonts and
elegant spacing."

Step 3: Add SEO

"Research GEO and technical SEO best practices for 2025
and update all pages with comprehensive meta tags, Open Graph,
Twitter Cards, and JSON-LD structured data."

Step 4: Deploy to GitHub Pages

"Can you help me set up GitHub Pages deployment?
I want automatic builds when I push to main."

Step 5: Keep Iterating

"I don't love the design. Can you make it look like
TV Guide magazine from the early 2000s?"

Each of these is a conversation, not a tutorial. You're not following documentation—you're describing what you want and the AI assistant builds it.

The Meta-Lesson: Building Is Learning

Here's what I realized: Using WordPress would have taught me nothing about web development.

By building from scratch with an AI assistant, I learned:

WordPress would have given me a blog. Claude Code gave me a blog and an education.

Future Improvements

Things I might add later:

But honestly? The blog works great as-is. I can write, publish, and iterate on design faster than I ever could with WordPress.

The About Page: From Timeline to Bento Grid

After publishing the initial blog, I wanted to add an About page to showcase my professional background and accomplishments. This turned into its own mini design journey.

Attempt 1: Vertical Timeline

My first instinct was a vertical timeline with nodes and cards extending from a line. It looked... hideous. The cards were monotonous, the layout was boring, and the generic stock photos felt disconnected from the content.

Attempt 2: Magazine Grid

I tried a magazine-style grid next, similar to what I'd seen on other portfolio sites. Better, but still not right. Every card looked the same, there was no visual hierarchy, and it just felt like a wall of content.

Attempt 3: Bento Grid (The Winner)

After researching 2025 design trends, I discovered bento grids—layouts inspired by Japanese bento boxes with intentional, asymmetric structure. Think Apple's homepage.

What makes bento grids different:

I pulled in actual OG images from press coverage where available (like the Dolby Atmos image from 9to5Mac) and curated thematic images for others. The result: a visually rich page that actually looks good.

Time to build all three attempts: About 3 hours total, with most of that spent fetching images and iterating on the bento grid layout.

Final Thoughts: The Joy of Full Control

There's something deeply satisfying about saying "I don't love this design" and watching an AI assistant completely transform your blog's aesthetic in 45 minutes.

WordPress gives you options. Claude Code gives you control.

WordPress hides complexity. Claude Code explains it.

WordPress has plugins for everything. Claude Code teaches you to build everything.

For me, as someone learning to build production systems with AI coding assistants, the choice was obvious: Skip the abstractions. Build from scratch. Learn by doing.

This blog is now exactly what I want it to be. And when I decide I want something different? I'll just ask Claude Code to change it.

Try It Yourself

The source code for this blog: github.com/sparrowfm/sparrow

Feel free to fork it, modify it, make it yours. That's the beauty of static sites—they're just files. Copy them, change them, deploy them.

And if you're on the fence about whether to use WordPress or build your own: open Claude Code and just ask. You might be surprised how quickly you can ship something custom.

Questions? Thoughts? Find me on LinkedIn or check out the code on GitHub.