• john garrish

From Hard Fork - How to ...free website w/ Claude Code and GitHub Pages

I got the idea for this approach from the Hard Fork podcast episode where Kevin Roose and Casey Newton discuss building websites with Claude Code. Both of their sites were created this way:

And yes, this very site (bellemonti.com) was built the same way. Site design took me about 90 minutes. Getting the custom URL took longer, but only because it took awhile to resolve all the DNS servers. But it was dead simple.

Tooling-wise - I built it using Claude Code; and Claude Code used Jekyll to make it presentable (what you see here); and it’s all stored in GitHub; which is then rendered via Github Pages. Github Pages is free to use, if you keep the repo public. I do have to pay for my custom URL, but you can use it just “vanilla” from Github if you want. No charge.

I set it up so that all my content (like this post), is managed through markdown files. Which makes it very easy to edit. I can edit any page or post by simply opening the markdown file and making changes, including any rudimentary formatting which is really all I need. Any fancy formatting for the site? I ask my friendly robots for help, and they oblige.

This captured my attention for a couple of reasons. Markdown is particularly well-suited for product managers because it focuses on content, not … either … hyper-marketing-formatting AI slop (like what most AI engines produce natively today) … or … barely-readable-dev-formatting (like XML, JSON, etc). Editing is possible everywhere, and by everywhere I mean in Cursor or OneDrive or Sublime (https://www.sublimetext.com) or Typora (https://typora.io) or any one of many tools. Unlike MSFT Word or Confluence which is only editable in one place.

The best, though - markdown is the native language of AI coding assistants. Word, or even HTML pages, have some much junk formatting embedded in it that the engines choke a little bit.

Right now, it’s just a site. Boring, really. But I think there is a virtuous loop here for consulting - whereby the consultant (me) can build a repo of verifiable information for a client, and coach along the way. And, using this kind of web framework, it would make it very easy to show the deliverable as it’s built (rather than, say, viewing in Cursor which is very hard for civilians). Because its built on markdown, it would allow me to combine a few presentation pages (“here is where we are”) but with, also, access to the work. Lastly, it becomes a ready-made leave behind. Standby for where this goes. :)

See the code, use the code » GitHub

Background

Here are the steps I followed, as described by Kevin Roose and Casey Newton on their podcast.

Steps

Set Up Claude Code

  • Install Claude Code on your computer - Download and installation instructions
  • Claude Code is an autonomous coding agent that puts the Claude chatbot inside your terminal window
  • It can take instructions in plain English and execute tasks autonomously

Provide Your Requirements

Kevin’s approach:

  • Give Claude Code your old website as a reference
  • Tell it to make it look like other sites you like
  • Provide specific instructions about what you want

Example prompt structure:

  • “I have an old website at [URL]. Can you recreate it but make it look like [reference sites]?”
  • Or: “Build me a personal website with [features]”

Let Claude Code Build It

  • Claude Code will handle the orchestration and execution
  • No need for copying and pasting code
  • It will check in with you but can work autonomously
  • Kevin’s website took about 20 minutes to build

Host on GitHub Pages

  • Once built, host the website on GitHub (free)
  • This replaces paid hosting services like Squarespace
  • GitHub Pages can host static websites for free

Key features you can add

Based on Casey’s experience building cnewton.org:

  • Responsive design - Works on mobile and desktop automatically
  • Dynamic widgets - Pull in recent content (articles, podcast episodes, social media posts)
  • Email subscription forms - Add signup functionality
  • Social media feeds - Display recent posts from Bluesky, Twitter, etc.
  • Animations and effects - Mouse-over effects, interactive elements
  • Easter eggs - Fun hidden features (like Kevin’s GeoCities mode button)

Tips and considerations

What works well

  • Building static websites
  • Creating personal websites and portfolios
  • Adding features incrementally (just ask Claude Code to add them)

Potential challenges

  • Claude Code may overengineer things - you might need to walk it back from complexity
  • Some websites may be hostile to AI agents (like The New York Times)
  • Browser automation can be slow - Claude has to take screenshots and analyze them
  • Learn what tasks are “AI-shaped” vs. what you should do manually

Best practices

  • Start simple and add features incrementally
  • Be specific about what you want
  • Don’t be afraid to ask for changes or refinements
  • Test the website thoroughly before canceling your old hosting