How to Set Up Free Static Site Hosting on Cloudflare Pages with GitHub

January 25, 2025 -

Setting up a website might sound intimidating, but with Cloudflare Pages and GitHub, it’s easier (and cheaper!) than ever. In this guide, I’ll show you how to host your site for free, manage its content through GitHub, and let Cloudflare automatically update your site whenever you make changes.

This post contains affiliate links, which means I may receive a small commission, at no extra cost to you, if you make a purchase using these links.

Whether you’re showcasing a portfolio, writing a blog, or experimenting with web development, this tutorial is designed for absolute beginners—no coding experience necessary. It’s no secret that web design and hosting is a complicated endeavor. For something fully featured and professional you should turn to Squarespace, but if you want something quick, and free this is a great approach!

Why Cloudflare Pages?

Cloudflare Pages offers free static site hosting with global CDN, ensuring fast load times. It also seamlessly integrates with GitHub, allowing you to edit your site’s content and push changes directly from your browser.

Prerequisites

Before we dive in, you’ll need the following:

  1. A GitHub account (free to create).
  2. A Cloudflare account (also free).
  3. Optionally, a custom domain (purchase via Cloudflare if needed).

Step 1: Set Up Your GitHub Repository

  1. Create a GitHub Account
    If you don’t already have one, go to GitHub.com and click Sign Up. Follow the prompts to create your account.

  2. Create a New Repository

    • After logging in, click the + icon in the top-right corner and select New repository.
    • Name your repository (e.g., my-website).
    • Set the repository to Private (recommended for security).
    • Check the box for Add a README file.
    • Click Create repository.

  3. Optional: Add Starter Files
    You can add basic website files, such as index.html, directly in the browser:

    • Click Add file > Create new file.
    • Name the file index.html.
    • Add simple HTML like: 
      <!DOCTYPE html>
<html>
<head>
  <title>Welcome!</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>
    • Commit your changes by clicking Commit changes.

Step 2: Set Up Cloudflare Pages

  1. Create a Cloudflare Account
    Visit Cloudflare.com and sign up for a free account.

  2. Access Cloudflare Pages

    • Once logged in, navigate to the Pages section in the dashboard.
    • Click Create a project.

  3. Connect Your GitHub Repository

    • Cloudflare will ask to connect to GitHub. Click Connect GitHub and authorize the connection.
    • Select your repository (e.g., my-website) from the list.

  4. Configure Build Settings

    • For most static sites, the default settings work fine:
      • Build command: Leave empty (or specify if using a static site generator like Hugo or Jekyll).
      • Output directory: ./ (for plain HTML/CSS files).
    • Click Save and Deploy.

  5. Wait for Deployment
    Cloudflare will build and deploy your site. This usually takes less than a minute. Once complete, your site will be live at a Cloudflare-provided URL (e.g., https://your-site.pages.dev).

If you already have a domain, you can connect it to Cloudflare Pages. If not, you can buy one through Cloudflare or another registrar like Namecheap.

  1. Add Your Domain to Cloudflare

    • In the Domains section, click Add a site and follow the prompts to point your DNS to Cloudflare.

  2. Link Your Domain to Pages

    • Go to your Pages project settings.
    • Under Custom Domains, add your domain (e.g., yourdomain.com).
    • Follow the instructions to configure DNS records.

Step 4: Edit Content and Update Your Site

One of the best things about this setup is how easy it is to update your site. Here’s how to make changes:

  1. Edit Directly on GitHub

    • Go to your repository on GitHub.
    • Click the file you want to edit (e.g., index.html).
    • Make your changes and click Commit changes.

  2. Automatic Deployment
    Cloudflare Pages will detect the changes and automatically rebuild and deploy your site.

FAQs

Do I need to use Git or a command line?

No! You can manage everything through GitHub’s web interface.

Can I use a static site generator?

Yes! Tools like Hugo or Jekyll are supported. Add your files to the repo and configure the build settings in Cloudflare Pages.

Is this really free?

Yes, both GitHub (private repos) and Cloudflare Pages offer free plans suitable for personal sites.

With these simple steps, you’ll have a fast, secure, and free website hosted on Cloudflare Pages, with GitHub managing your content. As you grow more comfortable, you can explore advanced features like analytics, custom build commands, and even multi-user collaboration.

Got questions? Let me know in the comments! Happy building!