From Zero to Live Website: A Step-by-Step Guide

OK — this is a short guide to setting up Claude Code for making apps and webpages, and then setting up a website to host them online. It seems dense but it should be complete. Most important, your first step is to sign up for an AI agent like Claude, have it open beside you, and ask it any questions you want. When things go wrong, copy the errors into Claude and ask it for advice. This guide is just a record of the steps I took — but you will quickly see that interacting with the AI directly is easier to guide you step by step. The rest of this is from the AI. —jme3

The Big Picture: You’re going to install a few tools, create a project folder, build a simple website, put it on the internet with your own domain name, and set things up so that every time you make a change locally, your live site updates automatically. Claude will be your copilot the entire time.

First Things First: Opening Your Command Line

You’ll be using the command line (also called a “terminal”) throughout this guide. Here’s how to find it on your computer.

On Mac

Press Cmd + Space to open Spotlight, type Terminal, and press Enter
Or go to Applications → Utilities → Terminal
You’ll see a window with a blinking cursor — that’s where you type commands

On Windows

Press the Windows key, type PowerShell, and click Windows PowerShell
Or right-click the Start button and select Terminal or Windows PowerShell
You’ll see a blue window with a blinking cursor — that’s your command line

💡 Don’t worry if this feels unfamiliar. You’ll get comfortable with it quickly, and Claude Code will be right there in the same window to help you.

Install Your Tools

Install these in order.

Step 1 — Install VS Code

This is your text editor — where you’ll actually write and view your code files.

Go to code.visualstudio.com
Download the installer for your OS (Mac, Windows, or Linux)
Run the installer and follow the prompts
Open VS Code once to make sure it launches

💡 Tip: On Mac, after installing, open VS Code, press Cmd + Shift + P, type “shell command”, and select “Install ‘code’ command in PATH”. This lets you open VS Code from your terminal by typing code . in any folder.

Step 2 — Install Git

Git tracks every change you make to your files, like a save-history system. It also lets you push your code to the cloud (GitHub).

On Mac

Open Terminal
Type git --version and press Enter
If Git isn’t installed, your Mac will prompt you to install the Xcode Command Line Tools — say yes

On Windows

Go to git-scm.com/downloads
Download the Windows installer and run it
During installation, accept the defaults
When it asks about your default editor, pick VS Code

Verify: git --version → should show git version 2.x.x

Step 3 — Install Node.js

Claude Code runs on Node.js, so you need this installed first. Think of it as the engine that powers Claude Code.

Go to nodejs.org
Download the LTS version
Run the installer

Verify: node --version → should show v20.x.x or higher

Step 4 — Install Claude Code

This is the AI assistant that lives in your terminal. You talk to it in plain English and it can write code, create files, run commands, and debug problems — all right inside your project.

Open your terminal
Run: npm install -g @anthropic-ai/claude-code
Type claude to launch it for the first time
It will walk you through signing in (you’ll need an Anthropic account — sign up at claude.ai)

Verify: claude --version

💡 From this point forward, you can (and should) have Claude Code running alongside whatever you’re doing. Ask it questions, have it explain errors, or let it write code for you.

Create Your Project

Step 5 — Create a Project Folder

Make a home for your website files on your computer.

mkdir -p ~/Projects
cd ~/Projects
mkdir my-website
cd my-website

Step 6 — Initialize Git

Tell Git to start tracking changes in this folder.

git init

Step 7 — Open in VS Code

Open this folder in your editor.

code .

(Or open VS Code manually → File → Open Folder → navigate to my-website)

Step 8 — Start Claude Code and Have It Build Your Website

Fire up your AI assistant and let it create your first web page for you. This is the fun part — you describe what you want in plain English, and Claude builds it.

Open the VS Code integrated terminal (Ctrl + ` or View → Terminal)
Type claude and press Enter to start Claude Code
Now just tell Claude what you want. For example:

Create an index.html file for a personal website. Include a welcome heading, a short about section, and a projects section with a few placeholder cards. Make it look clean and modern with some nice CSS styling, all in one file.

Claude will create the index.html file right in your project folder. You’ll see it appear in the VS Code file explorer on the left side.

Open the file in your browser to preview it — right-click index.html in VS Code’s file explorer and select Open with → your browser, or just double-click the file in Finder/File Explorer.

💡 Don’t like something? Just tell Claude. Say things like “Make the heading bigger,” “Change the color scheme to dark blue and white,” or “Add a contact section at the bottom.” Claude will edit the file in place. Keep going back and forth until you’re happy with it.

Step 9 — Make Your First Git Commit

Save a snapshot of your project. Think of this as a checkpoint.

git add .
git commit -m "Initial commit: added index.html"

Push to GitHub

Step 10 — Create a GitHub Account

GitHub is like a cloud backup for your code that also enables automation.

Go to github.com and sign up for a free account.

Step 11 — Create a New Repository

A repository (“repo”) is your project’s home on GitHub.

Click the + icon → New repository
Name it my-website
Leave it Public
Do NOT check “Add a README file”
Click Create repository

Step 12 — Connect & Push

Link your computer’s folder to GitHub, then upload your files.

git remote add origin https://github.com/YOUR-USERNAME/my-website.git
git branch -M main
git push -u origin main

Replace YOUR-USERNAME with your actual GitHub username.

If prompted for credentials: GitHub uses personal access tokens now. Go to GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token, give it repo permissions, and use it as your password.

💡 Stuck? Ask Claude Code: “I’m trying to push to GitHub and it’s asking for credentials. Help me set up authentication.”

Get a Domain on Cloudflare

Step 13 — Create a Cloudflare Account

Cloudflare will host your website and give it a custom domain name.

Go to dash.cloudflare.com/sign-up and create a free account.

Step 14 — Buy a Domain

Pick a name for your website — what people will type to find you.

In the Cloudflare dashboard → Domain Registration → Register Domains
Search for the domain you want
Add to cart and purchase

💡 .com is classic but sometimes pricey. .dev, .site, .me, and .xyz are affordable alternatives.

Deploy with Cloudflare Workers

This is the magic step — getting your site live on Cloudflare’s global network, then connecting it to GitHub so it updates automatically.

Step 15 — Install Wrangler and Configure Your Project

Wrangler is Cloudflare’s command-line tool — it’s how you deploy your site to Cloudflare Workers. You’ll install it, log in, and have Claude create a small config file for your project.

In your terminal (inside your project folder), install Wrangler:

npm install wrangler --save-dev

npx wrangler login

This will open your browser — click Allow to authorize.

Now ask Claude Code to create the config file for you:

Create a wrangler.toml file for deploying this project as a static HTML site to Cloudflare Workers. The project name should be my-website and the HTML files are in the root directory.

Claude will create the file with the right settings. You should see wrangler.toml appear in your project folder alongside index.html.

Step 16 — Deploy for the First Time

Push your site live. After this step, your website will be on the internet.

npx wrangler deploy

Wrangler will upload your files and give you a live URL like my-website.<your-subdomain>.workers.dev. Open that link in your browser — your site is live!

💡 If you see a 523 error right after the first deploy, wait a minute and refresh. It resolves on its own.

Step 17 — Connect GitHub for Automatic Deployments

Now set it up so that every time you push code to GitHub, Cloudflare automatically redeploys your site — no manual steps needed.

Go to the Cloudflare dashboard → Workers & Pages
Click on your Worker (my-website)
Go to Settings → Builds
Click Connect and follow the prompts to connect your GitHub account
Select your my-website repository
Set the Production branch to main
For the Deploy command, use: npx wrangler deploy

From now on, every git push to your main branch triggers an automatic build and deploy.

Step 18 — Connect Your Custom Domain

Point your purchased domain name to your Worker so people visit yourname.com instead of the .workers.dev address.

In the Cloudflare dashboard, go to your Worker (my-website)
Go to Settings → Domains & Routes
Click Add → Custom domain
Enter your domain (e.g., yourname.com)
Since you bought the domain through Cloudflare, DNS is configured automatically
Wait a few minutes for it to go Active

Also add www.yourname.com as a second custom domain so both work.

The Update Workflow

This is your day-to-day process. It’s short and sweet.

Step 19 — Make a Change Locally

Edit your website files in VS Code with Claude Code helping you.

Open your project in VS Code
Start Claude Code in the terminal (claude)
Tell Claude what to change — for example: “Add a footer with my email address” or “Redesign the projects section to use a grid layout”
Preview the changes by opening index.html in your browser

Step 20 — Commit and Push

Save your changes and send them to GitHub. Cloudflare will detect the update and redeploy your site automatically.

git add .
git commit -m "Added footer and updated projects layout"
git push

That’s it. Within a minute or two, your live site at yourname.com will show the new changes.

💡 Ask Claude Code: “Commit all my changes with a descriptive message and push to GitHub.”

Quick Reference: The Daily Flow

Open terminal → navigate to project folder
Run claude to start Claude Code
Tell Claude what to build or change
Preview locally in browser
Tell Claude to commit and push
Live site updates automatically ✓