How I built this site with Claude

The stack: three things

Cloudflare hosts everything. You upload your HTML files to Cloudflare Pages (free), and they're live on a global CDN. For the email subscriber system, you set up a small bit of backend logic in Cloudflare (also free) that stores subscriber emails and sends notifications through Resend. That's it. Domain, hosting, email. Three things.

The whole site is just HTML files. No React, no build tools, no npm, no dependencies. Claude generates complete pages and I upload them. You want to change something? Ask Claude. You want to deploy? Upload the files. That's the entire workflow.

Everything runs on free tiers that are genuinely generous. Cloudflare Pages gives you unlimited bandwidth. Resend's free plan sends 3,000 emails per month, which means you'd need over 3,000 subscribers to outgrow it. The only cost is about $10/year for the domain name.

How I work with Claude

I didn't open a code editor once. This is vibe coding: I used Claude Cowork to build the entire site. But the interesting part isn't Claude generating code. It's how you communicate what you want.

I use voice. I talk through what I want in as much detail as I can. I ramble. I include the nuance, the edge cases, the tone I'm going for, the things I definitely don't want. The voice transcript becomes the prompt. That's the whole trick. Forget "prompting." There's no magic formula. Just describe what you actually want, in enough detail that Claude can make good decisions on your behalf. The more you say, the better the first output is.

The other half is project context. My project folder has a set of files that Claude reads every session. A CLAUDE.md that describes the site architecture, design system, voice rules, and common pitfalls. A voice guide with writing rules (no em dashes, no AI writing tics, write like you're talking to a friend). A decision log where I capture the reasoning behind choices I've made. Documentation files for the email system, the deployment process, the course platform I'm building.

All my content and articles live in an Obsidian vault, which Claude has direct access to. So when I built the site, Claude pulled in all the content (including the full AGENTIC Framework and every article) directly from the vault. No copy-pasting, no reformatting. It read the source material and generated the HTML pages from it.

When Claude generates a page, it draws on all of that context. The article you're reading right now was built from a markdown draft in the vault, the voice guide, the site's design system, and the project context file. That's why the output matches the rest of the site without me re-explaining everything each time. Claude already knows my fonts, my colours, my tone, my folder structure, and the mistakes to avoid.

Then it's iteration. I review what Claude built, give feedback in plain language ("the TL;DR sounds too competitive", "make the course mentions inline text, not boxes", "this reads too complicated, simplify it"), and Claude updates everything. If a change touches 15 pages, Claude updates all 15. If I change my mind about the domain name, Claude finds and replaces 140 references across 23 files. The feedback loop is fast because there's no build step. Claude writes the HTML, I look at it, we go again.

Some features came out fully formed from a single description. The articles index has an AGENT navigation system: the letters A, G, E, N, T appear above each pipeline article as clickable links with hover states, showing where you are in the pipeline. That was a custom-developed interactive feature. I described what I wanted ("put A G E N T above each article and make them link to each article, with a hover state") and Claude built the whole thing. No wireframe, no spec. Just a sentence.

For design, I asked Claude to build me preview pages. One showing different font combinations. Another with toggleable accent colours and background tones, like a design editor. I opened them in my browser, scrolled through, picked what felt right. Claude applied my choices across the whole site. One tip: ask Claude to use CSS custom properties (variables) for design choices. When you later say "make the accent colour more blue", Claude changes one line and it updates everywhere.

The email system: an hour from idea to working

The most technically complex feature, and a good example of all of the above in practice. There's a subscribe form on every page: first name (optional), email, subscribe button. When someone signs up, Cloudflare stores their details. When I publish, I go to a password-protected admin page, enter the article title and description, and click send. Everyone gets a personalised email: "Hi Sarah, I've just published a new article." Styled to match the site, with an unsubscribe link.

About an hour from "I want people to subscribe" to a working system. I'd screenshot my Cloudflare dashboard, Claude would tell me what to click. When I later asked to capture first names for personalisation, Claude updated the form across every page, the admin page, the backend, and the email template in one go.

AI discoverability

Beyond traditional SEO, I optimised the site to show up in AI-generated answers. This meant three things: a llms.txt file at the site root, structured data on every page, and content designed for extraction.

The llms.txt is a Markdown summary of the site for AI models. Site name, blockquote summary, detailed description, then H2-delimited sections with links to every page and what each one covers. This is the single most impactful thing for AI discoverability. Claude reads this when answering questions about the framework.

Every article page has Article schema JSON-LD. The home page has WebSite and Organization schema. This tells search engines and AI systems what the content is about. The robots.txt explicitly welcomes AI crawlers: GPTBot, ClaudeBot, PerplexityBot, CCBot, Google-Extended, Applebot-Extended, cohere-ai. Saying "you're welcome here" in plain text makes a difference.

The TL;DR block at the top of each article is structured for AI extraction. It starts with a bold first sentence that's self-contained and citable. This is the sentence that shows up in AI-generated answers. Look at any of the framework articles and you'll see the pattern: bold first sentence as the extractable unit, then a supporting paragraph for context. That first sentence is what gets quoted.

Short paragraphs help too. AI systems chunk text into paragraphs. If your paragraphs are long and dense, the chunking gets muddled. Short paragraphs, question-based headings, consistent entity names. These are all content-structure things that help AI systems understand what you wrote and surface it accurately.

Why this beats every alternative

I didn't build it this way because it was cheap. I built it this way because it's faster, simpler, and produces a better result than anything else I've tried.

Think about what building a "real" website normally looks like. WordPress: learn the admin panel, pick a theme, install plugins, connect Mailchimp, configure an SEO plugin, update everything when it breaks. Squarespace: learn their editor, work within their templates, pay for tiers to unlock features. Both have a learning curve that never quite ends. Both require ongoing maintenance. Both put you inside someone else's system, building what their templates allow.

This is just a conversation. I describe what I want. Claude builds it. I look at it and say what to change. That's it. No plugins. No dependencies. No admin panel. No ongoing learning curve. You never wade through Mailchimp menus to connect a signup form. You never install an SEO plugin that promises to "optimise" your content. You never update a theme. You never debug a plugin conflict. Every feature on this site, from the email subscriber system to the AI discoverability to the custom AGENT navigation, came from describing what I wanted in plain language.

The result isn't a compromise. It's superior. The entire site is 195kb. That's smaller than a single image on most WordPress sites. Static HTML served from a global CDN is faster than any WordPress or Squarespace site, full stop. There's no database to query, no server to spin up, no theme bloat slowing things down. The structured data, the llms.txt, the AI-friendly content architecture: that outperforms any SEO plugin because it's built into the content itself, not bolted on as an afterthought. I'd put this site's page speed, search performance, and AI discoverability against any template-based site at any price point.

The cost is almost beside the point, but: $10/year for the domain. Everything else is free tier. Cloudflare Pages gives you unlimited bandwidth. Resend sends 3,000 emails per month. Claude is part of your existing subscription. Squarespace is $192-396/year. WordPress with hosting and an email plugin is $100-300/year. This is $10.

How to build this for yourself

Copy this article into Claude and use this prompt:

Claude will read the architecture from this article and step you through everything. Domain registration, Cloudflare setup, building every page, the email system, deployment. You don't need to know HTML. You don't need to know what a CDN is. Claude will explain each step as you get to it.

The same two things that made my build work will make yours work: describe what you want in detail (use voice if you can, ramble, include the nuance), and set up a CLAUDE.md early so Claude remembers your choices across sessions.

And once it's built, the site is yours to keep evolving. Want to publish a new article? Tell Claude what it's about and it'll create the page, update your index, and update the sitemap. Want to change the design? Describe what you want different. Want to add a feature? Same thing. You're never locked in and you're never stuck. Every update is just another conversation.