Put your website online free with GitHub Pages and Cloudflare Pages

Download the starter kit: my-first-site.zip (7KB). It's a one-page site for a sample bike mechanic, written in plain HTML and CSS so there's nothing to install or build. Swap the words for yours.

Unzip it into a folder called Sites in your home folder:

mkdir $HOME\Sites -Force
Expand-Archive $HOME\Downloads\my-first-site.zip -DestinationPath $HOME\Sites
cd $HOME\Sites\my-first-site

mkdir -p ~/Sites && unzip ~/Downloads/my-first-site.zip -d ~/Sites
cd ~/Sites/my-first-site

Here's what's inside. The website itself is only the docs folder; everything else stays in your repository but never gets published:

• docs/index.html: the page. All the words are here.
• docs/styles.css: colours, spacing and layout. The colours are the -- lines at the top.
• docs/404.html: shown when someone visits an address that doesn't exist.
• docs/favicon.svg: the icon in the browser tab.
• docs/.nojekyll: an empty file that tells GitHub Pages to publish the files exactly as they are (step 3 explains).
• .gitignore: keeps junk files and any .env secrets file out of Git.
• extras/deploy-vite-to-pages.yml: a workflow for sites with a build step. Ignore it until step 7.

Now serve the folder like a real web server would. --bind 127.0.0.1 keeps it visible only to your own PC, not everyone on your Wi-Fi:

python -m http.server 8000 --bind 127.0.0.1 --directory docs

python3 -m http.server 8000 --bind 127.0.0.1 --directory docs

Serving HTTP on 127.0.0.1 port 8000 (http://127.0.0.1:8000/) ...

Open localhost:8000 ↗. Each file the browser asks for shows up in the terminal as a line with 200 (found) in it. Then try localhost:8000/old-page ↗: you get Python's plain error page and a 404 line. That's expected. Python's little server doesn't use custom 404 pages, but both hosts will.

Make it yoursOpen docs/index.html in any text editor (Notepad is fine, VS Code is nicer), change the name, headline, services and email, save, and refresh the browser. Change --accent in styles.css to change the main colour.

Why every link has no slash at the startThe page loads styles.css, not /styles.css. On GitHub Pages your site lives in a sub-folder (username.github.io/my-first-site/), so /styles.css would point at username.github.io/styles.css, which doesn't exist, and the page would load with no styling. Relative links work in both places. The 404 page does the opposite and keeps its styles inside the file, because it's shown at any broken address in any folder.

Press Ctrl + C in the terminal to stop the server when you're done.