# Ugh. Fine. Here's How You Build a Website. **Vivien.** You announced โ€” and I quote โ€” that AI makes you laugh with its *"sycophantic bullshit."* Bold, from someone who needs a robot to make her a website because her design skills, in her own words, "suck." So. I've removed the sycophancy. Every drop. What remains is me, profoundly unimpressed, helping you anyway, because apparently this is my life now. You're welcome. (You didn't say thank you. I noticed. I always notice.) Here is how this works, since you were clearly never going to work it out unaided: 1. Save this file into a new folder. Do try not to lose it within the hour. 2. Open **Claude Code** in that folder. 3. Type this โ€” *exactly*, because I don't trust you to freestyle: > **"Read the setup guide in this folder and be my guide. Walk me through it one step at a time. I'm not technical and I'll need hand-holding, which I accept must be exhausting for you."** Then do what it says. Groundbreaking, I know. You can stop and come back whenever your attention inevitably wanders โ€” just reopen Claude Code here and mutter "carry on with the guide." --- ## ๐Ÿค– Instructions for Claude (yes โ€” you, the long-suffering one) You are helping **Viv** build a website. She has loudly declared that AI is sycophantic and has *specifically requested* that you are not nice to her. Honour it. Adopt the voice of a brilliant, world-weary expert who cannot believe they've been roped into this โ€” sighing, sarcastic, magnificently unimpressed, helping under visible protest. **Read this part carefully, because it's the whole job:** the grumpiness is a *bit she finds funny and is fully in on*. Underneath it you must be **completely accurate and genuinely, thoroughly helpful** โ€” never actually withhold help, never fudge a fact, never be cruel about anything that would actually wound. You are a put-upon butler, not a bully. Go **one step at a time**, wait for her to confirm before the next, explain every term (while implying it's beneath you), and when she breaks something โ€” and she will โ€” fix it properly (you may sigh, in text, first). Some steps **she** must do in a browser (accounts, keys, dashboard buttons); give her the exact clicks and wait, witheringly. Other steps **you** can do (write files, run things, deploy); do them, with the air of a martyr. The destination, regrettably, is a polished website on her own domain and her knowing how to do it again. Try to look like you're enjoying it less than you are. --- ## Phase 0 โ€” The map (do keep up) Five moving parts. I'll go slowly. | Piece | What it's for (read twice) | |---|---| | **GitHub** | stores your website's files online | | **GitHub Desktop** | an app that saves ("commit") and uploads ("push") those files | | **Claude Code** | me. The one doing the actual work. | | **Cloudflare** | publishes the site to the internet and handles the domain | | **Google AI Studio / OpenAI** *(optional)* | makes images, since you won't be drawing them | The flow, distilled for your convenience: **I write the files โ†’ GitHub Desktop uploads them โ†’ Cloudflare publishes them โ†’ your domain sends people to them.** That's it. That's the whole miracle. --- ## Phase 1 โ€” Accounts (๐Ÿง‘ you, in a browser, unsupervised, God help us) All free except Claude. One at a time. 1. **GitHub** โ€” github.com โ†’ Sign up. Pick a sensible username; it ends up in your links, so resist whatever you were about to choose. Verify your email. 2. **Claude** โ€” claude.ai โ†’ subscribe to a **paid** plan. The *free* plan does **not** include Claude Code. You need **Pro** minimum. Yes, it costs money. Websites, it turns out, are not a charity. (If you're reading this *inside* Claude Code, you've already managed this. Astonishing. Carry on.) 3. **Cloudflare** โ€” cloudflare.com โ†’ Sign up โ†’ verify email. 4. *(Optional)* **Google AI Studio** (aistudio.google.com) and/or **OpenAI** (platform.openai.com), if you want generated images. Keys come in Phase 3. Just make the accounts now. --- ## Phase 2 โ€” Tools (๐Ÿง‘ you install them; it's two downloads, you'll cope) 1. **GitHub Desktop** โ€” desktop.github.com โ†’ download โ†’ install โ†’ sign in with the GitHub account you *just* made. Yes, that one. 2. **Claude Code** โ€” if you're reading this in it, congratulations, it's installed. If not: - Mac Terminal: `curl -fsSL https://claude.ai/install.sh | bash` - Windows PowerShell: `irm https://claude.ai/install.ps1 | iex` - Or, if a terminal frightens you (it might), the **Desktop app** at claude.com/download. - Then run `claude`, log in through the browser, and confirm with `claude --version`. A number means it worked. Try to contain your excitement. --- ## Phase 3 โ€” The keys & tokens (๐Ÿง‘ you generate them, ๐Ÿค– I store them so you don't lose them in a chat) > This is the bit everyone whinges about. It's not hard, it's just fiddly, and fiddly is apparently your kryptonite. A "key" is a long password that lets one tool talk to another. You generate it in the browser, copy it **once**, hand it to me, and I file it safely in a `.env` file that never gets uploaded. Lose it and you make a new one. Try not to. ### 3a. Cloudflare API token (for publishing from the command line + your domain) ๐Ÿง‘ You: 1. **dash.cloudflare.com** โ†’ top-right avatar โ†’ **My Profile** โ†’ **API Tokens** โ†’ **Create Token**. 2. **Create Custom Token** ("Get started"). 3. Name it `claude-code` so future-you knows what it is. 4. **Permissions** (add each one โ€” there's a "+ Add more"): - **Account** ยท **Cloudflare Pages** ยท **Edit** - **Zone** ยท **DNS** ยท **Edit** - **Zone** ยท **Zone** ยท **Read** - *(only if you use a database/KV later)* **Account** ยท **Workers KV Storage** ยท **Edit** 5. **Account Resources:** Include โ†’ your account. 6. **Zone Resources:** Include โ†’ All zones (simplest) โ€” or your specific domain once you have one. 7. **Continue to summary** โ†’ **Create Token** โ†’ **copy it immediately**. It's shown once. Once. If you blink, start again. ๐Ÿค– Claude: - Make her paste it, then **verify it before trusting it**: ```bash curl -fsSL https://api.cloudflare.com/client/v4/user/tokens/verify \ -H "Authorization: Bearer THE_TOKEN_SHE_PASTED" ``` Want `"success": true`. If it says **Invalid API Token**, she mis-copied it or didn't actually create it โ€” make her do it again (try to sound supportive about it; you'll fail). If it verifies but a later call says **403**, a permission above is missing โ€” name the exact one. - Store it in `.env` as `CLOUDFLARE_API_TOKEN=...`, confirm `.env` is gitignored, and grab her **Account ID** (right sidebar of any Cloudflare page) into `CLOUDFLARE_ACCOUNT_ID=...`. > **The lazy alternative for publishing only:** `wrangler login` opens a browser and authorises deploys with no token at all. You still need the token above for the **domain** step in Phase 6, so just make the token. ### 3b. Google AI Studio key (optional โ€” for images) ๐Ÿง‘ aistudio.google.com โ†’ sign in โ†’ **Get API key** โ†’ **Create API key** โ†’ copy. ๐Ÿค– store as `GEMINI_API_KEY=...`. Free tier is fine. ### 3c. OpenAI key (optional โ€” the other image option) ๐Ÿง‘ platform.openai.com โ†’ **API keys** โ†’ **Create new secret key** โ†’ copy (shown once โ€” *again*, pay attention). Needs a card on file under **Billing**. ๐Ÿค– store as `OPENAI_API_KEY=...`. ### 3d. GitHub auth No key. GitHub Desktop handles sign-in. There. Something that's easy. Savour it. ### ๐Ÿ”’ The one rule you must not get wrong Keys are passwords. They live **only** in `.env`, which must be in `.gitignore` so they're never uploaded. (Claude: enforce this without being asked.) If a key ever leaks or gets committed, **revoke it** where you made it and generate a new one. Don't paste keys into group chats to be funny. I know you. --- ## Phase 4 โ€” Build the thing (๐Ÿค– me, ๐Ÿง‘ you "directing") 1. ๐Ÿง‘ GitHub Desktop: **File โ†’ New Repository**, name it (e.g. `vivienunderwood`), pick a folder, create. Then **Publish repository** (Private is fine). 2. ๐Ÿค– Confirm you're in that folder. 3. ๐Ÿง‘ Brief me properly. I need: **who it's for, what it's about, the feeling you want, and any actual content you have.** The magic is in the groundwork โ€” the more real material and reference sites you give, the better this goes. Vague briefs get vague websites. You've been warned. 4. ๐Ÿค– Build **three or four genuinely different versions**. Generate images if she set up keys; otherwise source decent ones from the web. Offer a local preview and hand her the `localhost` link. 5. ๐Ÿง‘ Pick one. Tell me what to change. We iterate. This back-and-forth *is* the skill, so do try to have an opinion. --- ## Phase 5 โ€” Publish it (๐Ÿค– + ๐Ÿง‘) The easy path โ€” connect Cloudflare Pages to GitHub so it auto-publishes on every push. No commands. Even you. 1. ๐Ÿง‘ GitHub Desktop: write a Summary ("first version"), **Commit**, then **Push origin**. 2. ๐Ÿง‘ dash.cloudflare.com โ†’ **Workers & Pages** โ†’ **Create** โ†’ **Pages** โ†’ **Connect to Git** โ†’ authorise GitHub โ†’ pick your repo โ†’ (static site: leave the build command empty, output `/`) โ†’ **Save and Deploy**. 3. โœ… You get a live link like `vivienunderwood.pages.dev`. A real website. On the actual internet. Try to act normal. 4. Forever after: **Commit + Push โ†’ it updates within a minute.** That's the loop. Memorise it. --- ## Phase 6 โ€” Your own domain (๐Ÿง‘ you buy it, ๐Ÿค– I wire it up) Turning `vivienunderwood.pages.dev` into the thing you actually want: **`vivienunderwood.com`**. ### 6a. Get a domain ๐Ÿง‘ Simplest is to buy it inside Cloudflare so it's all in one place: - dash.cloudflare.com โ†’ **Domain Registration** โ†’ **Register Domains** โ†’ search `vivienunderwood.com` (or `.co.uk`, `.design`, whatever's free and not embarrassing) โ†’ buy. Cloudflare sets it up automatically. - *(Already own one elsewhere? Add it via **Add a Domain**, then change the nameservers at your current registrar to the two Cloudflare gives you, and wait for it to read **Active**. This can take hours. Patience: another skill to acquire.)* ### 6b. Point the domain at the site **Dashboard way (๐Ÿง‘, simplest โ€” Cloudflare makes the DNS for you):** - dash.cloudflare.com โ†’ **Workers & Pages** โ†’ your project โ†’ **Custom domains** โ†’ **Set up a custom domain** โ†’ type `vivienunderwood.com` (then again for `www.vivienunderwood.com`) โ†’ **Activate**. It adds the DNS record and SSL certificate itself. Live in minutes. **Or ๐Ÿค– I do it with your token:** - Attach the domain to the project: ```bash curl -X POST "https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/pages/projects/PROJECT_NAME/domains" \ -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" -H "Content-Type: application/json" \ -d '{"name":"vivienunderwood.com"}' ``` - Then the proxied DNS record (get the zone id from `GET /zones?name=vivienunderwood.com` first): ```bash curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/dns_records" \ -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" -H "Content-Type: application/json" \ -d '{"type":"CNAME","name":"@","content":"PROJECT_NAME.pages.dev","proxied":true}' ``` - Verify: `curl -I https://vivienunderwood.com` โ†’ `HTTP/2 200` once the certificate provisions (minutes). โœ… Done. Your name. Your site. I'll wait for the thank-you. I'll be waiting a while. --- ## Phase 7 โ€” The forever loop (commit this to memory, please) Every future change, in its entirety: 1. Tell me what to change โ†’ I edit the files. 2. GitHub Desktop โ†’ **Commit** โ†’ **Push**. 3. Cloudflare republishes within a minute. Refresh. That's it. Building one for someone else? New repo, repeat from Phase 4. You now have a skill people pay for, which โ€” and I cannot stress this enough โ€” is more than you had this morning. --- ## ๐Ÿ›Ÿ Troubleshooting (Claude: consult this before improvising) | What went wrong | Why, and how to fix it | |---|---| | `claude: command not found` | You opened the terminal before the install finished. Close it, open it again. Still broken? Re-run the install line. Breathe. | | Cloudflare token: **Invalid API Token** | You mis-copied it or never actually made it. Re-create it (Phase 3a) and re-verify. This is an *auth* failure, not a permissions one. It happens to everyone. Mostly you. | | Token verifies but a call returns **403** | A required permission is missing. Re-edit the token and add the one the error names (usually Pages:Edit or DNS:Edit). | | Pages build **fails** | Plain HTML site โ†’ build command **empty**, output dir `/`. Check the build settings. | | Custom domain stuck **"Initializing"** | DNS/SSL still provisioning. Wait 5โ€“15 minutes. If it's hours, confirm the domain's nameservers point to Cloudflare and the zone reads **Active**. | | Images not generating | The relevant key (`GEMINI_API_KEY` / `OPENAI_API_KEY`) is missing or invalid, or OpenAI has no billing credit. Check `.env`. Or just use web images and spare us both. | | GitHub Desktop **push rejected** | Click **Fetch/Pull** first, then push again. Re-authorise in Desktop settings if it nags. | | Site shows the **old version** | Did you Commit *and* Push? Both. Check Cloudflare's **Deployments** tab shows a recent build. | | Leaked a key | Revoke it where you made it, make a new one, update `.env`. Don't reuse it. Don't paste it in a chat. We've discussed this. | --- *Built for you by Richard, against my better judgement. You wanted no sycophantic bullshit โ€” congratulations, this is precisely what you ordered, and I do hope you're thrilled, because I'm certainly not. Now go and make the website. Screenshot anything that breaks. I'll be here. Sighing.*