Guide · 6 of 8

Put it online with Cloudflare Pages

Your project is on GitHub. Now you give it a real web address that anyone can open, on any phone or laptop. It's free, it takes a few minutes, and after that every push updates the live site by itself.

You need

• A project on GitHub, from chapter 5. It should have an index.html in its top folder.

What Cloudflare Pages is

Cloudflare runs computers all over the world that serve websites. Pages is the part that takes a folder of files from your GitHub repo and puts it online. This very guide is hosted that way.

Connect your repo

1. Make a Cloudflare account at dash.cloudflare.com/sign-up. The free plan is enough for everything in this guide.

   You should see: the Cloudflare dashboard, with a menu down the left side.

2. In the left menu, open Workers & Pages. Click Create.

3. Choose the Pages tab, then Connect to Git. The first time, it asks to connect your GitHub account. Say yes, and let it see the repo you want.

4. Pick your repo from the list and go on to the build settings.

5. Fill in the build settings exactly like this:

   • Framework preset: None
   • Build command: leave it blank
   • Build output directory: /

   Blank build command means "my files are already the website, just serve them". That is true for everything you have built so far.

6. Click Save and Deploy.

   You should see: a log scrolling for a short while, then a success message with a link.

Your address

The link looks like this:

https://<project>.pages.dev

<project> is the project name Cloudflare picked, usually your repo name. For the meal picker it might be meal-picker.pages.dev.

There it is. The thing you described in a sentence, on a phone, at an address anyone can type. That's a real moment. Send the link to someone.

How updates work

• Every push to main redeploys the site. Change something, push, wait a moment, refresh.
• Push to any other branch (a side copy of your project in git) and Cloudflare gives it its own preview link. The main site stays as it was. Good for trying something risky.

If it didn't

Your own domain

If you own a domain (like yourname.com), you can point it at your site.

1. Open your Pages project, then Custom domains.
2. Add your domain and follow the prompts.
3. If the domain is already on Cloudflare, it is one click.

Headers, in two lines

A file called _headers in the top folder of your site sets extra instructions the server sends with each page, like security settings and how long browsers may cache files. A path, then the headers for it, indented:

/*
  X-Content-Type-Options: nosniff

This guide has one; read it on GitHub.

Pages or Workers?

When you click Create, Cloudflare may nudge you toward "Workers with static assets" instead of Pages. That works too. Pages is simpler for a plain site, which is why we use it here.

You want Workers when your project needs code that runs on the server, not just files: saving data for everyone, multiplayer over WebSockets, a database, file uploads, or AI. That's the next chapter.

What you just did

You connected your GitHub repo to Cloudflare Pages and got a free public address. You opened your own work on your phone. And you know that every push to main updates it, while other branches get preview links.