MCP + Claude Code

Vibe Coding 101: Ship a Site With Claude Code

Nathaniel Stich/Jul 17, 2026

Result:

A live, deployed Astro site you drove entirely through Claude Code — in an afternoon, whichever track you start from.

Problem

“Vibe coding” — describing what you want in plain language and letting the model build it — only pays off if you can get from idea to deployed URL without stalling on setup. The blockers are never the code; they’re the plumbing: which framework, where it’s hosted, how the domain points at it, and how each change ships. This recipe removes those blockers so Claude Code does the building and you do the directing.

New to the vocabulary? See the glossary for terms like agent, context window, and MCP.

Two tracks

Pick the track that matches where you’re starting. The middle — Claude Code driving an Astro project on GitHub — is identical for both. Only the endpoints differ: what you connect at the start, and how the domain gets attached at the end.

Track A — You already have a website

You own a domain and it already resolves somewhere (Squarespace, WordPress, a landing page). You’re adding a fast, structured section you can grow — without touching the existing site until you’re ready to cut over.

  1. Install Node.js and Claude Code, then open Claude Code in an empty folder.
  2. Prompt it to scaffold an Astro + MDX project and push it to a new GitHub repo.
  3. Connect that repo to Cloudflare Workers (its “Import a Git repository” flow) for a free preview URL — nothing on your live domain changes yet.
  4. Build content by talking to Claude Code; every change is a commit with its own preview.
  5. When you’re happy, point a subdomain (e.g. writing.yoursite.com) at Pages, or migrate the apex when you’re ready. Your old host keeps serving until you flip DNS.

Track B — From the ground up

No domain, no host, nothing. You’ll register the domain and stand up the whole stack in one sitting.

  1. Register the domain at Cloudflare Registrar (at-cost, ~$10/yr) — this keeps domain, DNS, and hosting in one dashboard.
  2. Install Node.js and Claude Code; scaffold the Astro + MDX project the same way.
  3. Push to GitHub, connect Cloudflare Workers, and — because the domain lives in the same account — attach the custom domain with one click. HTTPS is automatic.
  4. Drive all content and layout through Claude Code from the first commit.
Track B, step by step — screenshots included, for anyone doing this for the first time

The four steps above are the whole shape of it. Here’s what each one actually looked like, end to end, registering exitvelocities.com and standing up this very site.

1. Register the domain

Cloudflare Registrar sells at cost — no markup — so a .com runs close to wholesale (~$10.46/yr here, auto-renewal on by default).

Cloudflare's domain registration screen for exitvelocities.com, showing the $10.46/yr price and a registrant email field
Account email redacted — nothing else on this screen is sensitive.

Registration clears in under a minute:

Cloudflare confirming the domain is registered and ready, with next-step options for managing, deploying, and protecting it
“Your domain is on its way” — Cloudflare’s confirmation screen once registration clears.

2. Connect the GitHub repo

In Workers & Pages → Import a Git repository, pick the repo and set the build command. One gotcha worth flagging: Cloudflare’s import flow now provisions a Worker with static assets by default, not a classic Pages project — which means it needs a wrangler.jsonc in the repo root ({ "assets": { "directory": "./dist" } }) or the deploy step fails with no entry point found. Claude Code added that file as part of this exact build, in its own PR, before retrying the deploy.

Cloudflare's Worker setup screen with build command npm run build and deploy command npx wrangler deploy, pointed at the nls-scope3/exit-velocities repo
Build command npm run build, deploy command npx wrangler deploy — Astro’s static output lands in dist/, which wrangler.jsonc points at.

3. Confirm the build succeeded

Every push re-runs this pipeline: clone → install → build → deploy. All green means the site is live at its workers.dev URL, before the custom domain is even attached.

A completed Cloudflare build log showing all five pipeline stages green in just over a minute
Build #9845dff6 — five stages, all green, 1m11s.

4. Attach the custom domain

Two places to check, both in the Cloudflare dashboard. First, the domain itself shows Active under account-level Domains → Overview — that only confirms DNS is live, not that anything is connected to it yet:

Cloudflare's account-level Domains list showing exitvelocities.com with an Active status
Zone-level confirmation the domain is active — a separate thing from attaching it to the Worker.

The step that actually matters happens on the Worker’s own Domains tab: Add Domain, type the domain, done. HTTPS is automatic because the domain and the Worker live in the same account.

The Worker's Domains tab showing exitvelocities.com listed under Custom Domains and Routes, bound to the Production environment
exitvelocities.com listed under Custom Domains and Routes, bound to Production — the domain is live.

From here it’s the same loop as Track A: push to main, Cloudflare rebuilds and redeploys automatically, and the live domain reflects it within a couple of minutes.

Real result

This very site is Track B, run end-to-end through Claude Code: domain registered at Cloudflare, Astro + MDX scaffolded, content collection schema written, deployed on Cloudflare Workers — for about $10/year all-in. The Tools used panel above this recipe is the exact bill of materials, each linked to where you sign up.

The same tools can also produce the opposite of this. /vibe-check is a field guide to what “vibe coding” looks like without direction — a landing page built entirely from AI-slop tells, with a toggle that names each one.

Variations

  • Swap Cloudflare Workers for Vercel or Netlify (both free tiers) — the Astro output is identical, so only the “connect the repo” step changes.
  • On Track A, if your existing site is also on GitHub, skip the new repo and have Claude Code add the Astro project as a subdirectory or subdomain instead.
  • Already on a Claude Pro plan? Claude Code is included — the only new spend on Track B is the domain.

Nathaniel Stich writes Exit Velocities — recipes drawn from AI/growth systems actually shipped in production, not opinion pieces.

About the author