How to Host a Website on Cloudflare for Free (From GitHub to Live)

You do not need a paid server, a control panel, or a monthly hosting bill to put a website online. If your site is made of static files, or built with a framework like Astro, Next.js, Hugo, React, or plain HTML, Cloudflare Pages will host it for free, serve it from data centres around the world, and rebuild it automatically every time you push to GitHub.

This guide walks through the whole journey, from a repository on GitHub to a live website on your own domain. Along the way we will explain how GitHub and Cloudflare actually talk to each other, because once you understand that, the rest stops feeling like magic.

The Big Picture: GitHub and Cloudflare

Traditional web hosting means renting a server, installing software, and paying every month whether anyone visits or not. Cloudflare flips that model. It serves your website from a global network of data centres in 300+ cities, so a visitor in Nairobi, London, or New York is served from a location near them, making the site load almost instantly.

Before the steps, here is the mental model. Three players are involved:

The magic is continuous deployment: once it is set up, you simply save your changes to GitHub, and Cloudflare automatically rebuilds and publishes the new version. No FTP, no manual uploads, no dragging files to a server. You write code, you push, it is live.

What You Need Before You Start

Three things, and the third is optional:

1. A GitHub account with a repository that holds your website.
2. A Cloudflare account. The free plan covers everything in this guide.
3. A domain name, if you want one. You can launch and test without it.

If your site is just HTML, CSS, and images, you are ready. If it uses a framework, make sure it has a build command, something like npm run build, that produces a folder of finished static files. That folder is usually called dist, build, or out, depending on the tool.

Step 1: Put Your Website on GitHub

If your code is not on GitHub yet, get it there first. You can drag and drop your files into a new repository using GitHub's web interface, or use Git from your project folder:

Then create an empty repository on GitHub, copy the URL it gives you, and connect your local project to it:

Your code now lives on GitHub, with a complete history of every change. This is the single source of truth that Cloudflare will watch.

Step 2: Connect the Repository to Cloudflare

1. Log in to the Cloudflare dashboard and open Workers and Pages.
2. Click Create, choose the Pages tab, then Connect to Git.
3. Authorize Cloudflare to access your GitHub account. You can give it access to a single repository or all of them.
4. Pick the repository you just pushed, and click Begin setup.

Behind the scenes, this step installs a small Cloudflare application on your GitHub account. That installation is what lets the two services keep talking after you walk away. More on that shortly.

Step 3: Tell Cloudflare How to Build Your Site

Cloudflare now needs to know how to turn your repository into a finished website. You give it a few settings:

• Framework preset: choose your framework from the dropdown, or pick None for plain HTML.
• Build command: the command that builds your site, for example npm run build. Leave it blank for plain HTML.
• Build output directory: the folder your build produces, such as dist, build, or out. For plain HTML this is usually the root.
• Environment variables: optional. A common one is NODE_VERSION set to 20, so the build uses the Node version you expect.

If you are using a popular framework, Cloudflare often auto-detects these. Save and deploy, and Cloudflare runs your first build immediately.

How GitHub and Cloudflare Talk to Each Other

This is the part worth understanding, because it explains everything that happens afterwards.

When you connected the repository, Cloudflare and GitHub set up a webhook. A webhook is just a small automatic message, a kind of digital tripwire. From now on, every time you push a commit to your chosen branch, GitHub sends Cloudflare a short notification that says, in effect, "this repository just changed, and here is the new commit."

Cloudflare receives that message and starts a build on a temporary machine it spins up just for you. That machine:

1. Clones your repository at the new commit.
2. Installs your dependencies.
3. Runs your build command.
4. Collects the output folder.

If the build succeeds, Cloudflare copies those finished files to its global network, and the new version of your site goes live within a minute or two. If the build fails, your previous version stays online and Cloudflare shows you the error log. You never serve a broken site by accident.

Step 4: Your First Deployment

When the first build finishes, Cloudflare gives you a free address that looks like this:

Open it. Your website is live on the internet, served from hundreds of locations worldwide, with HTTPS already switched on. You did not buy a certificate or configure a server; Cloudflare handled security for you. At this point you have a working, public site at zero cost.

Step 5: Connect Your Own Domain

To use your own domain instead of the pages.dev address:

1. In your Pages project, open the Custom domains tab.
2. Click Set up a custom domain and enter your domain, for example yoursite.com.
3. Follow the prompts to point your domain at Cloudflare.

If your domain is already managed inside Cloudflare, this is almost instant, because Cloudflare can update the DNS for you automatically. If your domain lives elsewhere, Cloudflare gives you a record to add at your current registrar. Either way, your site is reachable on your own domain within minutes, with a free SSL certificate issued automatically.

It is good practice to add both the bare domain and the www version, then set up a redirect so visitors always land on one canonical address. If you want a refresher on how domains connect to a host, see our guide to understanding DNS.

What You Get for Free

The free plan is genuinely generous. Out of the box you get:

• A global CDN, so your site loads quickly anywhere in the world.
• Free SSL and HTTPS, with certificates renewed automatically.
• Unlimited bandwidth, which most free and even paid hosts do not offer.
• Preview deployments: every branch and pull request gets its own temporary URL, so you can review changes before they reach the live site.
• Instant rollbacks: if a deploy goes wrong, you can revert to a previous version in one click.

A Few Things Worth Knowing

• The free plan includes 500 builds per month. For most personal and small business sites, that is far more than you will use.
• Set the Node version with a NODE_VERSION environment variable if your project needs a specific one. Mismatched versions are the most common cause of a build that works locally but fails on Cloudflare.
• Your build output directory must match exactly what your framework produces. If the deploy succeeds but the page is blank, this is usually the culprit.
• Keep secrets and API keys out of your code. Add them as encrypted environment variables in the Cloudflare dashboard instead, so they never end up in your public repository.
• Big sites take longer to build. A handful of pages builds in seconds; thousands of pages can take several minutes. That is normal, because the build runs once per update, not once per visitor.

Closing

Once it is set up, hosting stops being a chore you think about. You write your changes, push them to GitHub, and a fresh version of your site appears on its own, served on infrastructure that most companies would have paid serious money for a decade ago. No servers to manage, no bills to track, and no downtime when you publish.

That is the quiet power of Cloudflare Pages: the boring parts are handled for you, for free, so you can spend your time on the website itself.

Frequently Asked Questions

Is hosting a website on Cloudflare Pages really free?

Yes. Cloudflare Pages has a genuinely free plan that includes a global CDN, automatic HTTPS, effectively unlimited bandwidth, preview deployments, and instant rollbacks. The free plan includes 500 builds per month, which is far more than most personal and small business sites will ever use.

What kind of websites can I host on Cloudflare Pages?

Cloudflare Pages is built for static sites and modern frameworks such as Astro, Next.js, Hugo, React, or plain hand-written HTML. It does not run a traditional PHP and MySQL stack, so a standard WordPress site is not a fit for Pages. For those, you need standard web hosting that supports PHP and a database.

Do I need to know how to code or use Git?

It helps, but you do not have to be an expert. You can upload your website files to a GitHub repository through GitHub's web interface with drag and drop, or push them with Git from your computer. Once the repository is connected to Cloudflare Pages, publishing future updates is as simple as saving your changes to GitHub.

How do GitHub and Cloudflare talk to each other?

When you connect the repository, GitHub and Cloudflare set up a webhook, a small automatic notification. Every time you push a commit to your chosen branch, GitHub instantly tells Cloudflare the repository changed. Cloudflare then spins up a temporary machine, clones your code, installs dependencies, runs your build, and publishes the result to its global network.

Can I use my own domain name on Cloudflare Pages?

Yes. In your Pages project, open the Custom domains tab, add your domain, and follow the prompt to point its DNS at Cloudflare. If your domain is already managed in Cloudflare it is almost instant, and a free SSL certificate is issued automatically so your site is secure from the start.

What happens if my build fails?

If a build fails, your previous version stays online and Cloudflare shows you the error log. You never serve a broken site by accident. The most common causes of a failed build are a mismatched Node version or a build output directory that does not match what your framework produces.

Can I host WordPress on Cloudflare Pages?

No. WordPress needs PHP and a MySQL database, which Cloudflare Pages does not provide. Pages serves static files and front-end frameworks. If your site runs on WordPress or needs a database and server-side logic, choose standard web hosting designed for that.