Free Guide
How to Build a Website for Free in 2025
The complete beginner's checklist: every tool, every step, every command you need to go from zero to a live website without spending a dollar.
By Gab
gab.ae
By the end of this checklist, you'll have a professional-looking website live on the internet with a custom domain — and you won't have written a single line of code yourself. Here's the stack:
Claude Code (AI) writes your HTML, CSS, and JavaScript. GitHub Pages hosts it for free. Git manages your files. Total recurring cost: $0.
This guide gives you the full roadmap. Follow the checklist, run the commands, and you'll be live today.
Download from code.visualstudio.com. This is where you'll see and manage your files. Install it, open it, done.
Download the LTS version from nodejs.org. Click the left button ("Recommended For Most Users"). This lets you run Claude Code.
node --version
Run this in your terminal after installing. If you see a version number, you're good.
Download from git-scm.com. Git tracks every change you make so you can undo mistakes. It's also how you push your site live.
git --version
Open your terminal and run:
npm install -g @anthropic-ai/claude-code
Then verify:
claude --version
NOTE
You'll need an Anthropic API key or Claude Pro/Max subscription. Claude Code is free to install — you pay per usage or through your subscription.
mkdir my-website && cd my-website
claude
This creates a folder and opens Claude Code inside it. You're now talking to an AI that can create files directly on your computer.
Here's a prompt that works. Replace the brackets with your info:
Build me a modern, responsive website for [YOUR BUSINESS/NAME]. Include: a hero section with a headline and call-to-action button, an about section, a services/features section with 3 items, and a footer with contact info. Use a clean design with [YOUR COLOR] as the accent color. Make it mobile-friendly.
TIP
Be specific. "A photography portfolio with dark theme and gold accents" gets better results than "make me a website."
Open the index.html file in your browser (just double-click it). You should see a working website. If you want changes, just tell Claude:
Make the hero section taller. Change the font to Inter. Add hover effects to all buttons.
Keep asking for changes until it looks right. There's no limit.
Go to github.com and sign up. Free. This is where your website files will live.
Click the green "New" button on GitHub. Name it whatever you want (e.g., my-website). Keep it public. Don't add a README.
Back in your terminal, inside your project folder:
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/YOUR-USERNAME/my-website.git
git push -u origin main
TIP
Replace YOUR-USERNAME with your actual GitHub username. GitHub shows you these exact commands after creating the repo.
On GitHub: go to your repo → Settings → Pages → under "Source," select main branch → click Save.
Wait 1–2 minutes. Your site is now live at:
https://YOUR-USERNAME.github.io/my-website/
Mobile test: Open your site on your phone. Does everything look right? No text cut off? No horizontal scrolling?
All links work: Click every button and link. Nothing should go to a dead page or #.
Images load: Check that all images show up and aren't broken. Watch for broken image icons.
Favicon exists: The small icon in the browser tab. Ask Claude: "Add a favicon to my site."
Page title set: Check the <title> tag in your HTML. This is what shows in Google results and browser tabs.
Meta description added: Ask Claude: "Add a meta description for SEO." This is the preview text in search results.
Contact info correct: Email, phone, address — double-check everything is accurate.
Open Graph tags: Ask Claude: "Add Open Graph meta tags." This controls how your site looks when shared on social media.
Share it: Text your URL to a friend. Ask them if it loads fast and looks right on their phone.
1. Giving vague prompts
Fix: Be specific. "Make it look better" gives random results. "Change the heading font to Playfair Display, increase the hero padding to 120px, and make the CTA button coral (#FF6B6B)" gives exactly what you want.
2. Never checking mobile
Fix: After every major change, resize your browser to phone width (375px) or check on your actual phone. Most of your visitors will be on mobile.
3. Uploading huge images
Fix: Compress images at
tinypng.com or
squoosh.app before adding them. Keep each image under 500KB. Your site should load in under 3 seconds.
4. Not committing often enough
Fix: Run git add . && git commit -m "description" && git push after every change that works. If you break something later, you can always go back.
5. Skipping the meta tags
Fix: Title, meta description, and Open Graph tags take 30 seconds to add with Claude and make your site look professional in search results and social shares.
Want the full audio tutorial?
This checklist gives you the roadmap. The full tutorial walks you through every step with 10 audio modules, written guides, and a complete prompt library — so you never get stuck.
Get the Full Tutorial →
gab.ae
$39
One-time payment · Lifetime access
No subscriptions. No upsells. Just the tutorial.