Skip to content
BloggerSpot
Website Buildingtutorial

How to Create a Website for Free: A Complete Step-by-Step Guide

By The BloggerSpot Author
Step-by-step website building tutorial diagram

I built a real, live website with no coding background, using three free tools: Astro (to build the site), GitHub (to store the code), and Cloudflare Pages (to host it). Total cost: $0, aside from the domain name itself if you want a custom one.

This guide walks through every step in order. I’m also linking out to detailed breakdowns of the specific walls I hit at each stage — because knowing the step is one thing, and surviving what actually goes wrong is another.

What You’ll Need Before You Start

  • A computer (Windows, Mac, or Linux)
  • A free GitHub account
  • A free Cloudflare account
  • About an hour, if nothing goes wrong (budget more — something usually goes wrong)

Step 1: Install Node.js

Your computer doesn’t come with the tools needed to build a modern website. You need Node.js, which also installs npm (a tool that installs everything else you’ll need).

  1. Go to nodejs.org
  2. Download the LTS version
  3. Run the installer, clicking “Next” through the defaults
  4. Confirm it worked: open a terminal and type node -v

If you get an error that says a command “is not recognized” — that’s almost always a terminal/PATH issue. → Terminal, CMD, PowerShell, Bash Explained

Step 2: Create Your Astro Project

npm create astro@latest your-site-name

Answer the setup questions — “a basic, minimal starter,” no TypeScript, and yes to installing dependencies and initializing Git are all safe defaults for a first project.

cd your-site-name

This step trips people up constantly — forgetting to cd into the new folder before running the next commands. → The “Not a Git Repository” Error

Step 3: Preview Your Site Locally

npm run dev

Open http://localhost:4321 in your browser. Press Ctrl+C when you’re done.

Step 4: Put Your Code on GitHub

Option A — Using Git properly (via VS Code): stage, commit, and publish through VS Code’s Source Control panel.

Option B — Manual upload: create an empty repository on GitHub, then drag your entire project folder into its “Upload files” area. No Git commands required.

→ Drag-and-Drop vs Git: A Real Comparison for Non-Coders

If you’re editing an existing repo and need to replace old files → Deleting and Re-Uploading Files in Git

Step 5: Deploy to Cloudflare Pages

  1. Log into the Cloudflare dashboard
  2. Workers & Pages → Pages → Create a project → Connect to Git
  3. Select your GitHub repository
  4. Set: Framework preset: Astro · Build command: npm run build · Build output directory: dist
  5. Save and Deploy

Important: Cloudflare has two similar-sounding products — Workers and Pages. For a static site, you want Pages. → Cloudflare Workers vs Pages

Step 6: Connect a Custom Domain (Optional)

If you bought a domain, connect it under Custom domains in your Pages project. Watch for:

Step 7: Your Site Is Live — Now Keep It Healthy

  • Submit your sitemap to Google Search Console — double-check the exact filename your site actually generates
  • Re-run Lighthouse/PageSpeed checks more than once; results vary between runs
  • Keep dependencies updated (npm audit fix) to catch security warnings early

The Honest Summary

Every step above is simple to describe. Almost none of them were simple to survive the first time. That’s exactly why each linked page above exists. Start with Step 1, take it slow, and when something breaks — because it will — go find the page that matches your exact error.

← Back to all articles