How to Build and Host a Website for Free — A Step-by-Step Guide for Beginners

You don’t need to know how to code to build a real website. With the right tools, you can have a site live on the internet in under an hour — and it won’t cost you a penny.

This guide walks you through the entire process, from installing your first tool to seeing your site online.

What You’ll Need

• A computer (Mac, Windows, or Linux)
• An internet connection
• A free GitHub account
• About 30–60 minutes

Step 0 — Set Up Your Workspace

Before we install anything, let’s create a folder on your computer to keep your projects organized.

On Mac

1. Open Finder
2. Go to your Documents folder (or Downloads — wherever you like)
3. Right-click → New Folder
4. Name it projects

Or use the Terminal app (search for “Terminal” in Spotlight with Cmd + Space):

mkdir ~/projects

That single command creates a folder called projects in your home directory.

On Windows

1. Open File Explorer
2. Go to your Documents folder
3. Right-click → New → Folder
4. Name it projects

Or use PowerShell (search for it in the Start menu):

mkdir ~\projects

What is a terminal?

A terminal (also called command line or shell) is a text-based way to talk to your computer. Instead of clicking buttons, you type commands. It looks intimidating at first, but you’ll only need a few basic commands:

Command	What it does	Example
mkdir	Make a new folder	mkdir my-site
cd	Change directory (go into a folder)	cd my-site
ls	List files in current folder	ls
pwd	Print where you are right now	pwd

That’s all you need to know. Claude handles the rest.

Step 1 — Install VS Code

VS Code (Visual Studio Code) is a free code editor made by Microsoft. It’s what most professional developers use.

1. Go to code.visualstudio.com
2. Click the big Download button
3. Install it like any other app
4. Open VS Code

That’s it. You now have a professional development environment.

Step 2 — Install the Claude Code Extension

Claude is an AI assistant that can write code for you. Instead of learning every command from scratch, you can describe what you want in plain English and Claude will build it.

1. In VS Code, click the Extensions icon on the left sidebar (it looks like four squares)
2. Search for “Claude Code”
3. Click Install
4. After installation, you’ll see a Claude icon in the sidebar
5. Click it and sign in with your Anthropic account (free tier available)

Now you have an AI coding partner ready to help.

Step 3 — Create Your Website Project

Open the Claude Code panel and type:

Create a new Astro website project in my Downloads folder called "my-site"
with a homepage, about page, and contact page. Use a clean, modern design.

Claude will:

• Create the project folder
• Set up the Astro framework (a tool for building fast websites)
• Create your pages
• Add styling

You can also be more specific:

Make it a dark theme blog with my name "Alex" as the title.
Add a sample blog post about my favorite hobby.

Step 4 — Preview Your Site Locally

In the VS Code terminal (press Ctrl+` to open it), run:

cd ~/Downloads/my-site
npm install
npm run dev

Open your browser and go to http://localhost:4321. You should see your website!

Every time you save a file, the browser auto-refreshes. Try editing some text and watch it update instantly.

Step 5 — Create a GitHub Account and Repository

GitHub is where your code lives online. It’s free.

1. Go to github.com and sign up
2. Click the + icon in the top right → New repository
3. Name it my-site
4. Keep it Public
5. Click Create repository

Now push your code to GitHub. In the VS Code terminal:

cd ~/Downloads/my-site
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/my-site.git
git push -u origin main

Replace YOUR_USERNAME with your actual GitHub username.

Step 6 — Deploy on Vercel (Free Hosting)

Vercel hosts your website for free and automatically updates it every time you push code to GitHub.

1. Go to vercel.com and sign up with your GitHub account
2. Click Add New Project
3. Select your my-site repository
4. Vercel auto-detects it’s an Astro project
5. Click Deploy

In about 30 seconds, your site will be live at something like my-site-abc123.vercel.app.

That’s it. Your website is on the internet.

Step 7 — Make Changes

The workflow from now on is simple:

1. Edit files in VS Code (or ask Claude to help)
2. Save your changes
3. Preview locally at localhost:4321
4. When you’re happy, commit and push:

git add .
git commit -m "update my site"
git push

Vercel automatically deploys the new version within seconds.

Step 8 — Optional: Add a Custom Domain

If you want a custom domain like yourname.com:

1. Buy a domain from Cloudflare, Namecheap, or Google Domains
2. In Vercel → Project Settings → Domains → add your domain
3. Update your domain’s DNS settings to point to Vercel

This is the only part that costs money (usually $10–15/year for a .com domain), and it’s completely optional.

Tips for Working with Claude

Here are some things you can ask Claude to do:

• “Add a new blog post about [topic]”
• “Change the color scheme to blue and white”
• “Make the navigation bar sticky”
• “Add a photo gallery page”
• “Fix the layout on mobile”

The key is to be specific about what you want. Claude works best when you describe the end result clearly.

What You’ve Learned

By following this guide, you’ve used professional tools that real developers use every day:

Tool	What It Does
VS Code	Code editor
Claude AI	AI coding assistant
Astro	Website framework
Git	Version control (tracks changes)
GitHub	Code hosting
Vercel	Website hosting & deployment

All of these are free. You now have everything you need to build, iterate, and ship websites.

---

The site you’re reading this on was built using exactly this process.