Zero to Hero

Lesson 4 of 4

Publish with Cloudflare Pages

Turn your GitHub repo into a live website — free, fast, and automatically updated every time you push.

What is Cloudflare Pages?

Cloudflare Pages is a free service that hosts static websites. You connect it to a GitHub repository once; from then on, every time you push a change, Cloudflare automatically publishes the new version to a real web address and serves it from a fast global network. No servers to manage.

The payoff of the whole course: the "Write → Save → Push → Live" loop. You edit files (Lesson 1 & 3), commit and push to GitHub (Lesson 2), and Cloudflare does the rest — your site is live in about a minute.

Deploy your site, step by step

  1. Make sure your website is pushed to a GitHub repo (that's Lesson 2). It needs an index.html at the top level.
  2. Create a free account at Cloudflare.
  3. In the dashboard, go to Workers & Pages → Create → Pages, then Connect to Git.
  4. Authorize Cloudflare to access GitHub and pick your repository.
  5. Configure the build settings (see below), then click Save and Deploy.
  6. Wait about a minute. Cloudflare gives you a live URL like your-project.pages.dev. Open it — you're live! 🚀

The right settings for a plain static site

Because our site is hand-written HTML with no build tools, the settings are wonderfully simple:

Cloudflare Pages build configuration
Framework preset:        None
Build command:           (leave empty)
Build output directory:  /            (the repo root, where index.html lives)
Why empty? A "build" step is only needed when your files must be transformed first (like React or a site generator). Our files are already ready to serve, so there's nothing to build — Cloudflare just copies them as-is.

Automatic deploys on every push

This is the part that feels like magic. Once connected, you never touch the Cloudflare dashboard again to update your site. The workflow becomes:

terminal — your normal routine from now on
# Make an edit (yourself or with Claude Code), then:
git add .
git commit -m "Update the homepage headline"
git push

# Cloudflare notices the push and redeploys automatically.
# ~1 minute later, your live site shows the change.

Every push is also saved as its own deployment, so you can roll back to a previous version from the dashboard with one click if something breaks.

Using your own custom domain (optional)

The free .pages.dev address works forever, but you can attach your own domain (like kadir.dev):

  1. Buy a domain (from Cloudflare Registrar, Namecheap, etc.).
  2. In your Pages project, open Custom domains → Set up a domain and enter it.
  3. Follow the DNS instructions. Cloudflare adds HTTPS (the padlock 🔒) automatically and free.

Bonus: the _headers file

Cloudflare Pages reads a special file named _headers in your repo to add security and caching rules — no dashboard needed. This project includes one. A simple example:

_headers
# Apply these response headers to every page on the site
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

Optional, but a nice touch once you're comfortable — and a taste of how much Cloudflare can do for a "just static" site.

🏆 You did it

From zero to hero

You can now build a static website, version it with Git & GitHub, get help from Claude Code, and publish it live on Cloudflare Pages. That's the complete loop the pros use.

Next challenge: fork this site, change the colors and text to make it yours, push it, and watch it go live. Then build something brand new.

← Lesson 3Claude Code