Branch, Preview, Merge, Deploy

Why this matters

Every website you own (a sales page, an opt-in form, a client dashboard, anything we've built together) sits on three layers: your code in GitHub, your computer where you edit it, and the live version your audience sees.

You will, at some point, want to change something. Maybe you want to update the copy on a thank-you page, swap a video, change a price, or test a new headline. The question is: how do you do that without accidentally taking your live site down or pushing something broken to your audience?

The answer is a workflow. Five small steps, in order. It looks intimidating the first time and then becomes second nature.

This guide teaches you that workflow once. From here on, every change you make follows the same shape.

Estimated time to read: about 8 minutes. Estimated time to actually use: about 10 minutes the first time, then a few minutes per change.

Three concepts in plain English

Before the steps, three words to understand. Spend a minute here. The rest of the guide assumes you have these in your head.

Branch. A branch is a sandbox copy of your project. You can add things, delete things, break things, hate them, redo them. None of it touches your live site. Think of it as a parallel universe of your project where mistakes are free.

Merge. When you finish experimenting on a branch and you love what you made, you "merge" the branch into your main copy. Merging means "take everything I did over here on the branch and pull it into the official version."

Deploy. Your main copy still isn't on your live website until you "deploy" it. Deploying is the step that pushes your main code up to the place that actually hosts your site (usually Cloudflare). Until you deploy, the world sees the old version.

The combination is what makes the workflow safe. Branches let you experiment. Merging is a deliberate decision. Deploying is the final, separate, intentional step that puts changes in front of real people.

Good to know. Some people use git for years without ever using branches. They edit straight on main and deploy nervously. The branch workflow takes 30 extra seconds and removes all of the nerves.

The five-step loop

This is the rhythm for every change you'll ever make on a site we've set up together.

1. Open a branch for the work you're about to do
2. Edit and preview on the branch, as many times as you want, until you love it
3. Merge the branch into main when you're happy
4. Deploy main to make the change live
5. Delete the branch (the work is now safely in main)

The steps below walk through each one. All commands are written as paste-ready prompts for Claude Code.

Step 1, Open a branch

Open your project in Claude Code. Then paste this, replacing WHAT_YOU_ARE_DOING with a short, descriptive name for the change:

Create a new branch in this project called WHAT_YOU_ARE_DOING (use kebab-case, no spaces). Switch to it.

Examples of good branch names: update-thank-you-page, new-pricing-headline, add-testimonials-section.

After this, you're on the branch. Your main copy is untouched. You're free to make a mess.

Step 2, Edit and preview

Make whatever changes you want. Use Claude Code in plain language:

Open public/thanks.html and change the headline from "You're in" to "Welcome to the family"

Then preview locally so you can see the result before anyone else does. Paste this:

Start a local preview server for this project so I can see my changes in my browser.

Claude Code will give you a link like http://localhost:8787. That's running on your computer only. Nobody else can see it.

Iterate as many times as you want. Try things. Hate them. Redo them. You're on a branch. Nothing you do here can hurt your live site.

When you finally love it, save your work to git before moving on:

Commit my changes to git on the current branch. Use a short commit message describing what I changed. Push the commit to GitHub.

Step 3, Merge to main

You're happy. Now you want this to become part of your official codebase. That's a merge.

A merge takes everything on your branch and copies it into main. After this step, your main branch has the new version.

Paste this:

I'm done with my current branch and want to merge it into main. Switch to main, merge the branch in, and push main to GitHub.

After this, your main branch on GitHub has your new version. But it's still NOT on your live website yet. That's the next step.

Step 4, Deploy

Cloudflare doesn't watch GitHub. It only updates when you tell it to. This step finally puts the new version in front of your audience.

Paste this:

Deploy this project to my Cloudflare account using wrangler. The project is already configured with my account ID. After deploying, fetch the live URL and confirm my changes are showing.

Claude Code will deploy and verify. The moment it confirms, the live version is updated.

Step 5, Delete the branch

The branch did its job. The work is safely in main. You don't need the branch anymore. Paste this:

Delete the branch I was working on (from both my local copy and GitHub). The work is merged into main.

Clean. Done. Next time you want to change something, you start the loop over with a new branch name.

If you get stuck

Three errors come up more than any others, and each has an exact fix.

"Authentication error" when you deploy. Your local machine doesn't know your Cloudflare token. Paste this:

Set my Cloudflare API token as an environment variable for this project. The token is in the .dev.vars file in the project folder, on the line starting with CLOUDFLARE_API_TOKEN.

Then re-run the deploy.

"GitHub auth popup" appears when you push. Sign in as the GitHub account that owns the repo. If you have multiple GitHub accounts on your machine, make sure you pick the right one. Your project's GitHub username is in the upper right of your repo page on github.com.

Something else. Paste your full error into Claude Code with this framing:

I'm in PROJECT_NAME and I just got this error when I tried to PASTE_WHAT_YOU_WERE_DOING. Here is the full error:

PASTE_ERROR_HERE

Read the README in this folder for context, then fix the problem and tell me what you changed.

Claude Code has the context it needs to dig you out. Trust it.

Bigger principle. Anytime you're about to do something on a live site and you feel nervous, that's a sign you skipped the branch step. Go back, make a branch, do the work safely, then merge and deploy. The nerves go away.

That's the whole loop. Five steps. Use it forever.