How to Deploy a Website for FREE with Cloudflare Pages and add a Domain

Programming and Developement Hosting
, , ,
1

How to Deploy a Website for FREE with Cloudflare Pages

While GitHub Pages is a fantastic option, another top-tier, free hosting service for developers is Cloudflare Pages. It’s known for its incredible speed, robust global network, and seamless integration with GitHub.

This guide will walk you through deploying a project from your GitHub repository to Cloudflare Pages.

Why Use Cloudflare Pages?

  • Blazing Fast Speeds: Your site is served from Cloudflare’s massive global Edge Network, meaning it loads quickly for users anywhere in the world.
  • Seamless Git Integration: Every time you git push to your repository, Cloudflare Pages automatically builds and deploys the update.
  • Generous Free Tier: The free plan is more than enough for personal projects, portfolios, and even small business sites.
  • Advanced Features: It provides easy-to-use tools like redirects, custom headers, and detailed analytics right out of the box.

Prerequisites

Before you begin, you need two things:

  1. A Cloudflare Account: It’s free to sign up.
  2. A GitHub Account: Your project code must be in a GitHub repository.

Step 1: Sign Up for Cloudflare

  1. Go to the Cloudflare signup page: https://dash.cloudflare.com/sign-up
  2. Create your account using an email and password.
  3. You do not need to add a website or configure nameservers at this stage. You can skip the initial setup wizard if it appears.

Step 2: Create a Cloudflare Pages Project

  1. Log in to your Cloudflare dashboard.
  2. On the right-hand sidebar, click on “Workers & Pages”.
  3. Click the “Create application” button.
  4. Select the “Pages” tab at the top and click “Connect to Git”.

Step 3: Connect Cloudflare to Your GitHub Account

  1. A new window will pop up asking you to authorize Cloudflare to access your GitHub repositories.
  2. Click the “Authorize Cloudflare” button. You may need to enter your GitHub password.
  3. You will be asked to choose which repositories Cloudflare can access. You can either select “All repositories” or “Only select repositories”. For security, it’s a good practice to select only the specific repository you want to deploy.
  4. Click “Install & Authorize”.

Step 4: Select Your Repository and Configure Build Settings

Once authorized, you’ll be returned to Cloudflare to finish the setup.

  1. Select Your Repository: Find the repository you want to deploy from the list and click on it.

  2. Click “Begin setup”.

  3. Configure Build & Deployments: This is where you tell Cloudflare how to build your site.

    • Project name: This will default to your repository name. You can change it if you like.
    • Production branch: This should be your main branch (usually main or master).
    • Build settings: This is the most important part. Cloudflare offers presets for popular frameworks (like React, Hugo, etc.).
      • For a simple HTML/CSS/JS site: You can often leave the “Build command” blank. For the “Build output directory,” you just need to specify the folder your index.html is in. If it’s in the main (root) folder, you can set this to / or just leave it blank if that’s the default.
      • For a framework (like React/Vue/etc.): You would select the correct framework preset, and Cloudflare will fill in the correct build command (e.g., npm run build) and output directory (e.g., /dist or /build).

  4. Click the “Save and Deploy” button.

Step 5: Visit Your Live Website!

That’s it! Cloudflare will now pull your code, build it (if necessary), and deploy it to their global network.

  • You will see a progress screen showing the deployment status. This usually takes about a minute.
  • Once it’s finished, Cloudflare will provide you with a unique URL ending in .pages.dev (e.g., my-cool-project.pages.dev).
  • Click the link to see your website live!

From now on, every time you push a change to your selected branch on GitHub, Cloudflare Pages will automatically redeploy your site.

Bonus: Adding a Custom Domain

Connecting your own domain is just as easy:

  1. In your project’s dashboard on Cloudflare Pages, click the “Custom domains” tab.
  2. Click “Set up a custom domain” and enter the domain you own (e.g., www.yourdomain.com).
  3. Cloudflare will provide you with instructions, which usually involves adding a single CNAME record in your domain registrar’s DNS settings.

If you have any suggestions or edits, please reply below.

And if you found this helpful, a :+1: would be much appreciated!

5 Likes
How to Deploy a website on GitHub Pages for FREE
2

Nice, not trying to annoy you on all your posts lol

Just adding that you can also deploy without GitHub, by uploading a zip, but if you’re going to be making changes, GitHub is the way to go.

3

LOL, It’s probably better that way

4

One more thing, if you have a domain registered with cloudflare, putting up a custom domain is as simple as just entering it and cloudflare takes care of the DNS.

5

Alternative Method: Deploy with a ZIP File (No GitHub Needed!)

As @ars18 saud, you can also deploy without GitHub by uploading a zip, but if you’re going to be making changes, GitHub is the way to go. The GitHub method automates your updates, while this ZIP method requires you to manually upload a new file for every change.

This method is perfect for:

  • A finished project that won’t change often.
  • Quickly sharing a demo or a school assignment.
  • Any situation where you don’t want or need to create a Git repository.

Step 1: Prepare Your Project ZIP File

This is the most important step. You need to create a .zip file that contains your website’s files.

  1. Open your project folder on your computer (e.g., my-cool-site).
  2. Select all the files and folders inside it (e.g., index.html, styles.css, images/, etc.).
  3. Right-click on the selected files and choose “Compress” or “Send to > Compressed (zipped) folder”.
  4. Name the resulting file something like project.zip.

Important: Do NOT zip the parent folder itself. You must zip the contents of the folder, so that your index.html file is at the top level inside the zip archive.

Step 2: Upload to Cloudflare Pages

  1. Log in to your Cloudflare dashboard.
  2. Go to “Workers & Pages” on the right sidebar.
  3. Click “Create application” and select the “Pages” tab.
  4. Instead of clicking “Connect to Git,” choose the option below it: “Upload assets”.

Step 3: Deploy Your Site

  1. Enter a Project Name: Give your site a name (e.g., my-cool-project). This will become part of its URL.
  2. Drag and Drop: Drag your project.zip file into the upload box.
  3. Click “Deploy site”.

Cloudflare will upload your file, unzip it, and deploy the contents to their global network. In less than a minute, your site will be live at a URL like my-cool-project.pages.dev.

How to Update Your Site

To update your website, you simply need to create a new project.zip file with your changes and then go back to your project’s dashboard in Cloudflare Pages. From there, you can upload the new version to create a new deployment.

2 Likes