The Website Playbook
From idea to professional, on purpose.
Websites are the natural first territory for a non-coder in Claude Code: the result is visible, your taste is the quality bar, and the finish line is public. This is the full arc — including the polish pass most first-timers never learn exists.
The arc, named
Every site I've shipped has walked the same six stages. Naming them keeps you oriented mid-project:
-
Brief
Purpose, audience, pages, tone, taste references. Use the brief template. For a multi-page site, list the pages you think you need and let Claude push back — it's good at spotting the page you forgot and the two that should be one.
-
Skeleton
Have Claude build the structure first: every page exists, navigation works, placeholder text where content will go. Approving a skeleton is cheap; redesigning a finished site is not.
One session -
Content
Pour in the real words, page by page. Write them yourself, or have Claude draft and then edit like an editor — cut, sharpen, make it sound like you. Real content always changes the design; that's normal, not failure.
-
Design passes
Now iterate on look and feel — one concern at a time. Spacing, then type, then color. Check every page on a phone; ask Claude to fix anything that only breaks when narrow.
The fun part -
Publish
GitHub Pages for free and simple; Netlify and similar hosts when you want extras like redirects and instant deploys. Either way, the ask is one sentence and Claude does the wiring.
-
Polish
The professional layer: SEO tags, social cards, favicon, sitemap. Details below — this is the stage that separates "my little page" from "a site people take seriously."
One more session
The polish pass, demystified
These words sound technical. Each is one plain sentence, and Claude does all of them for you on request:
- Title & description tags — the headline and blurb Google shows for your page. Written for humans, tuned for search.
- Social cards (Open Graph) — the image-and-title preview that appears when your link is pasted into a text, a post, or a group chat. Without it, your link looks like spam; with it, it looks like a publication.
- Favicon — the tiny icon in the browser tab. Small detail, outsized "this is a real site" energy.
- Sitemap & robots.txt — two small files that tell search engines what's here and that they're welcome. Set and forget.
Do a full SEO and sharing pass on this site: - a unique title and meta description for every page - Open Graph and Twitter card tags with a social share image - a favicon that fits the design - sitemap.xml and robots.txt Then list each page's title and description so I can review the wording — that part is my call.
Review the wording yourself. Search snippets are copywriting, and copywriting is judgment — your half of the deal.
A custom domain, briefly
yourname.github.io/my-site is fine for starting out. When you want yourname.com, you buy the domain from a registrar (roughly the cost of a pizza, yearly), and then tell Claude: "I bought [domain] at [registrar] — walk me through connecting it." It will explain the two or three settings to change and what each does. Expect a short wait before the internet catches up, and don't panic when the site is briefly odd during it.
Maintenance is just more conversation
A site is never really done — and that stops being scary the first time you update one. Open a session on the repo and say the change: "add the new testimonial," "update my rates page," "the photo on About is outdated." Small asks, quick sessions, commit, done. The repo's history means every previous version of your site still exists — you can always ask Claude to show you what changed, or to put something back.
My sites now link to each other — a shared "family" section on every one, so a reader can move between guides. That took one brief: "add a section linking my other sites, same design on all of them, mark the one you're on." Cross-linking, consistent branding, done in an afternoon. When you own several small sites, they stop being pages and start being a shelf.