A step-by-step guide to building and deploying websites using AI-assisted code generation. No prior coding experience required.

---

What You're Setting Up

This workflow connects three services into a simple pipeline:

1. Claude Code — an AI coding agent that writes code for you based on plain-language instructions.
2. GitHub — where your code files are stored and version-controlled.
3. Netlify — a web host that automatically publishes your site whenever code changes are pushed to GitHub.

The flow is always the same: you describe what you want → Claude writes the code → GitHub stores it → Netlify publishes it live.

---

Prerequisites

You'll need accounts on all three services. Free tiers work for GitHub and Netlify, but Claude requires a Pro subscription.

Service	URL	Notes
Claude	claude.ai	Pro account required (~$20/mo)
GitHub	github.com	Free account is fine
Netlify	netlify.com	Free tier is fine for personal projects

Once you have all three accounts, you're ready to start.

---

Part 1 — Create a GitHub Repository

A repository (or "repo") is a project folder on GitHub that holds all of your code files and tracks every change ever made to them.

1. Go to github.com and sign in.
2. Click the + menu in the top-right corner, then New repository. Tip: GitHub's navigation can be confusing. If you can't find the button, click on your profile icon → "Your repositories" → then look for the green New button.
3. Owner should be your personal account (not an organization).
4. Repository name — pick something short and descriptive (e.g., my-portfolio, landing-page).
5. Visibility — choose Private unless you want the code to be publicly visible. You can change this later in repository settings.
6. Leave everything else as default. Click Create repository.

Add the CLAUDE.md Template

Before you bring Claude into the project, you need to give it a set of working instructions. This is a file called CLAUDE.md that lives in the root of your repository — Claude reads it before doing anything, so it knows your project's rules, structure, and workflow preferences.

1. From your new (empty) repository page, click "creating a new file" (or Add file → Create new file).
2. In the filename field at the top, type: CLAUDE.md
3. Paste in the CLAUDE.md template from wilarndt.com/resources/claude-bootstrap-prompt (Step 1 on that page).
4. Click Commit changes. The commit message doesn't matter much — something like "added CLAUDE.md" is fine.

You now have a repository with one file in it. That's all you need on the GitHub side for now.

---

Part 2 — Set Up Netlify

Netlify watches your GitHub repository and automatically publishes your site whenever new code is pushed. You set this up once per project.

1. Go to netlify.com and sign in.
2. Click Add new project (or if you have no projects yet, you'll land on a setup screen — ignore the "AI agent" option).
3. Click Import a Git repository → select GitHub.
4. Authorize Netlify to access your GitHub account if prompted. You may need to verify your identity via email.
5. Select your new repository.
6. Project name — Netlify project names are globally unique, so you may need to add your initials or a suffix (e.g., my-portfolio-jd). This becomes part of your Netlify preview URL.
7. Branch to deploy — leave it on main.
8. Click Deploy. The first deploy will fail or show a blank page — that's expected, since there's no site content yet.

Enable Branch Deploys

By default, Netlify only deploys the main branch. You want it to also deploy feature branches so you can preview Claude's work before it goes live.

1. In your Netlify project, go to Project configuration (or Site settings).
2. Click Build & deploy in the sidebar.
3. Scroll to Branches and deploy contexts.
4. Click Configure, then change Branch deploys to All.
5. Save.

This is a one-time setting per project. Now every branch Claude creates will get its own preview URL.

---

Part 3 — Connect Claude Code to Your Repository

1. Go to claude.ai and sign in.
2. Click the Code button in the interface to open Claude Code. It will launch in a new tab or panel.
3. If this is your first time, you'll go through a short setup flow. When asked how to connect, choose Continue on web and then Sign in with GitHub.
4. Open the sidebar in Claude Code and click New session.
5. Select your repository from the list. The branch should default to main.

If Your Repository Doesn't Appear

Click "Install the Claude GitHub app" (you'll find this in the sidebar when browsing repositories — look for a "repo missing?" link). This opens GitHub's app installation screen:

1. Select Only select repositories.
2. Choose the specific repository you want Claude to access.
3. Click Save / Install.

Go back to Claude Code, open a new session, and your repository should now appear.

Security note: Always choose "Only select repositories" rather than "All repositories." This prevents Claude from accessing repos it doesn't need — especially important if your GitHub account has access to sensitive or organizational codebases.

---

Part 4 — Bootstrap Your Project

With everything connected, you're ready to tell Claude what to build. The bootstrap prompt gives Claude a creative brief and instructions to set up your project's structure before writing any feature code.

1. Go to wilarndt.com/resources/claude-bootstrap-prompt and copy the Step 2 prompt (the full block under "The Prompt").
2. Paste it into Claude Code, but don't hit Enter yet.
3. Scroll up in the pasted text and fill in the bracketed fields:
   • Project name — e.g., "My Portfolio"
   • One-liner — e.g., "A personal portfolio showcasing selected work and writing"
   • Tech stack — for simple sites, use: Static HTML/CSS/JavaScript on Netlify
   • Deploy target — Netlify
   • Design system location — this is the folder where Claude will build and maintain a design system page for your project (tracking colors, fonts, spacing, components). A good default is /ds/. If you're not sure yet, use TBD and Claude will flag it when UI work begins.
   • Context / goals — describe what the site or page should do in plain language. Be as specific as you can. For example:

     A single-page portfolio with my name, a short bio, a grid of project thumbnails that link to individual case study pages, and a contact section at the bottom.

4. At the end of the prompt, it's worth reinforcing: "Build this in stages. Have me approve each stage before we move to the next."
5. Hit Enter and let Claude work.

Claude will create several files — CLAUDE.md (updated with your project details), ROADMAP.md, README.md, and netlify.toml — then push them to a new branch on GitHub. This first push is just project scaffolding; no site content yet.

If the push fails with a 403 error, Claude doesn't have access to the repository. See "If your repository doesn't appear" in Part 3 above, install the GitHub app for that repo, then tell Claude to "try again."

---

Part 5 — Build in Stages

Once the bootstrap is complete, Claude will propose a development roadmap broken into stages. A typical progression might look like:

• Stage 1: Static HTML skeleton — bare-bones page with placeholder text
• Stage 2: CSS styling — colors, layout, fonts, visual effects
• Stage 3: JavaScript interactivity — animations, URL parameters, click events
• Stage 4: Polish — responsive design, edge cases, final tweaks

For each stage:

1. Ask Claude "What's the next step?" or just say "Continue" — it will describe what it plans to build.
2. Say "Yes" or "Go ahead" to approve.
3. Claude writes the code and pushes it to your branch on GitHub.
4. Go to Netlify → Deploys and look for a new branch deploy. Click it, then click Open branch deploy to see your site.
5. Review, then go back to Claude and either approve to move on or ask for changes.

Repeat until you're happy with the result.

---

Part 6 — Deploy to Production

While you've been working, all your changes have been on a feature branch — a separate copy of the code that doesn't affect the live site. When you're ready to publish:

1. Go to your repository on GitHub.
2. You'll see a banner that says your branch "had recent pushes" with a Compare & pull request button. Click it.
3. Add a description if you want (e.g., "Deploy up to phase 3"), then click Create pull request.
4. GitHub will check for merge conflicts (unlikely if you're working solo). Once it says "No conflicts," click Merge pull request → Confirm merge.
5. Go back to Netlify → Deploys — you'll see a new production deploy to main. Your live site is now updated.

You can continue working on the feature branch after merging. Future merges will push any additional changes to production the same way.

---

Starting Another Project

The process for each new project is always the same three steps:

1. GitHub — create a new repository, add the CLAUDE.md template.
2. Netlify — create a new project, point it at the repository, enable branch deploys.
3. Claude Code — open a new session, select the repository, make sure the GitHub app has access.

Then paste the bootstrap prompt, fill in your brief, and go.

---

FAQ & Tips

Prompting

Be specific. Vague prompts produce unpredictable results. "Make it look better" could mean anything — Claude might change colors, fonts, spacing, or all three. Instead, ask a question first: "What font is the heading using?" Then follow up with a precise instruction: "Change the heading font to Georgia and increase the size to 48px." The more specific you are, the more consistent the output.

AI coding is non-deterministic. The same prompt given to five people will produce five different results. This is normal. It's not a bug — it's how large language models work. Use detailed prompts, the CLAUDE.md file, and the roadmap to keep Claude focused and on-track.

Reinforce your brief with staging. Asking Claude to "build this in stages, and have me approve each stage before moving on" prevents it from racing ahead and making decisions you haven't reviewed. This also keeps each chunk of work small and testable.

You can always ask Claude to explain. If you don't understand what it did or what you're looking at, just ask. "I don't understand what's happening — what am I supposed to be seeing?" is a perfectly valid prompt.

GitHub & Version Control

What's a branch? Think of main as the published version of your project. A branch is a working copy where you (or Claude) can make changes without affecting the published version. When you're happy with the changes, you merge the branch back into main, which updates the live site.

Claude creates branches automatically. When you work in Claude Code, it creates its own branch rather than writing directly to main. This is a safety feature — it means Claude can never accidentally break your live site. You're always the one who decides when to merge.

Multiple people, multiple branches. If several people are working on the same repository in Claude Code, each person's Claude session creates its own branch. These can be merged individually or combined.

You can always roll back. Git tracks every change ever made. If something breaks, you can revert to any previous version through GitHub's interface. Version control is your safety net.

Netlify & Deployment

Preview URLs. Every branch deploy gets its own unique URL on Netlify (something like branch-name--your-project.netlify.app). Use these to review Claude's work before merging to production.

Deploys are automatic. Any time code is pushed to GitHub — by Claude, by you, by anyone — Netlify detects it and rebuilds the site. You don't have to manually trigger anything.

Why didn't my branch deploy appear? If you enabled "All branch deploys" after Claude had already pushed a branch, Netlify won't retroactively build it. You need a new commit on that branch to trigger a build. Just ask Claude to make any small change, or push an empty commit.

The netlify.toml file. The bootstrap prompt creates this file to hide internal project files (CLAUDE.md, ROADMAP.md, README.md) from public access. Without it, anyone could navigate to yoursite.com/CLAUDE.md and read your project instructions. The toml file tells Netlify to return a 404 for those paths.

Common Issues

403 permission error on push. Claude doesn't have access to the repository. Go to Claude Code → sidebar → your repo, look for "repo missing? Install the Claude GitHub app," and add the specific repository.

Claude isn't showing my repository. Open a new session in Claude Code. If the repo still doesn't appear, install (or reinstall) the Claude GitHub app through the sidebar link, selecting only the repositories you need.

Claude went off-track or started refactoring things I didn't ask for. This is what the CLAUDE.md rules and ROADMAP.md are designed to prevent, but it can still happen. Tell Claude to stop, refer it back to the roadmap, and be more specific about what you want next. The roadmap file acts as a guardrail — Claude reads it before doing work and should stay within its scope.

Claude is slow or "meandering." Speed varies and there's no consistent pattern. Sometimes a task takes 30 seconds, sometimes several minutes. If Claude appears stuck (no progress indicators, just "thinking" for a long time), you can try typing "try again" or starting a new message.