Hosting a static website shouldn’t be complicated or expensive. Cloudflare Pages has emerged as one of the best platforms for deploying static sites (HTML, React, Vue, etc.) directly from your GitHub repository. It offers a lightning-fast global CDN, free SSL, and unlimited bandwidth—all for free.

This guide outlines the complete step-by-step process to host your static HTML application using Cloudflare Pages and GitHub. We will use a real-world example project, Sandbox, to show you exactly how it works from GitHub creation to custom domain setup.

Project Overview

  • Goal: Host a simple index.html file.
  • Domain: Sandbox.gethostpro.com
  • Repository: https://github.com/gethostpro/example

Video Instructions at the end of this post

Phase 1: Create GitHub Repository & Upload File

Before connecting to Cloudflare, you need to set up your code storage on GitHub. Cloudflare pulls your code from here.

1. Create the Repository

  1. Log in to your GitHub account.
  2. Click the + icon in the top-right corner and select New repository.
  3. Repository name: Enter Sandbox.
  4. Description: (Optional) e.g., “My static HTML site”.
  5. Visibility: Choose Public or Private.
    • Note: Cloudflare Pages works with Private repositories for free, so you can keep your code hidden if you prefer.
  6. Initialize this repository: You can leave these unchecked for now.
  7. Click the green Create repository button.

2. Upload index.html

  1. Once created, you will see a “Quick setup” screen. Look for the section “…or create a new repository on the command line”.
  2. Click the link slightly above that says: uploading an existing file.
  3. Drag and Drop: Drag your index.html file from your computer into the gray box on the screen.

3. Commit Changes

  1. In the “Commit changes” box at the bottom, type a message like “Initial upload”.
  2. Click the green Commit changes button.

4. Verify Root Directory (Critical)

You should now be on the main page of your repository.

  • Confirm that index.html is listed right there in the file list.
  • CRITICAL: It must not be inside a folder. If you see a folder name instead of the file, click into it to find the file. Cloudflare needs the file to be at the top level (root).

Phase 2: Deploying to Cloudflare Pages

This is where many users get stuck because the Cloudflare interface can be tricky. Follow these steps carefully to avoid creating a “Worker” by mistake.

1. Log in to Cloudflare

Go to the Cloudflare Dashboard and sign in.

2. Create the Application

  1. On the left-hand sidebar, navigate through Build > Compute & AI > Workers & Pages.
  2. Click the blue Create application button.

3. The Critical Choice (Pages vs. Workers)

You will see a screen titled “Ship something new”.

  • STOP: Do NOT click “Connect GitHub” inside the big white box (that creates a Worker).
  • ACTION: Look at the very bottom of the box for the small text link: “Looking to deploy Pages? Get started”.
  • Click that “Get started” link.

4. Connect GitHub Repository

  1. You should now see a screen titled “Get started with Pages”.
  2. Locate the box labeled “Import an existing Git repository” and click Get started.
  3. Click the Connect GitHub button.
    • Note: If you have already authorized GitHub, this step might be skipped.
  4. Select your repository (Sandbox) by clicking the circle next to it.
  5. Click the blue Begin setup button.

5. Configure Build Settings

  1. Project Name: Enter sandbox (or your preferred name).
  2. Production Branch: Leave as main.
  3. Framework Preset: Select None (Since this is a simple static HTML site).
  4. Build Command: Leave Blank.
  5. Build Output Directory: Leave Blank.
  6. Click Save and Deploy.

Phase 3: Connecting the Custom Subdomain

Your site is now live on a temporary URL (e.g., example.pages.dev). Let’s point your professional domain (example.gethostpro.com) to it.

1. Navigate to Custom Domains

In the Cloudflare Pages dashboard for your project, click the Custom domains tab at the top.

2. Add Domain

  1. Click Set up a custom domain.
  2. Enter: example.gethostpro.com
  3. Click Continue.

3. DNS Configuration

Scenario A: If gethostpro.com is managed in Cloudflare

  • Cloudflare will automatically suggest the new DNS record.
  • Simply click Activate domain.

Scenario B: If gethostpro.com is managed elsewhere (e.g., GoDaddy, Namecheap)

  1. Log in to your domain registrar’s DNS management page.
  2. Add a CNAME Record:
    • Type: CNAME
    • Name/Host: Sandbox
    • Value/Target: sandbox.pages.dev (Your project’s Cloudflare URL)
    • TTL: Automatic / Default
  3. Return to Cloudflare and verify.

4. SSL/HTTPS

Cloudflare will automatically issue an SSL certificate. This usually takes 2-5 minutes. The status will change from “Initializing” to “Active”.

Phase 4: How to Update Your Site (CI/CD)

You now have a fully automated deployment pipeline. You never need to upload files manually to Cloudflare again.

1. Edit Locally

Open index.html on your computer and make your changes.

2. Push to GitHub

Option A: Web Interface (Easy)

  1. Go to your repo on GitHub.
  2. Click the index.html file.
  3. Click the pencil icon (Edit).
  4. Make your changes.
  5. Click Commit changes (green button).

Option B: Command Line (Advanced) Run the following Git commands:

git add index.html
git commit -m "Update homepage content"
git push origin main

3. Automatic Deployment

Cloudflare detects the push immediately. It pulls the new code and updates Sandbox.gethostpro.com. This usually takes less than 30 seconds.

Troubleshooting Common Issues

  • 404 Error: Ensure the file is named exactly index.html (all lowercase). Index.html or home.html will not work as the default homepage.
  • Changes Not Showing:
    1. Check the Deployments tab in Cloudflare to ensure the build didn’t fail.
    2. Perform a hard refresh in your browser: Ctrl + F5 (Windows) or Cmd + Shift + R (Mac).

Copyright @EngineerHow.com

We recommend bookmarking this guide from EngineerHow.com for future reference. Our goal is to make complex technical topics simple and accessible for everyone.

🔗 Useful Links 📺 EngineerHow YouTube Channel (www.youtube.com/@EngineerHow)

📢 About EngineerHow.com EngineerHow.com is dedicated to providing expert IT and engineering tutorials, helping professionals and enthusiasts set up servers, networks, and self-hosted solutions. Our guides focus on step-by-step instructions to make complex topics easy to understand.

🚀 Explore More IT Guides: EngineerHow.com

💬 Join the Discussion! Have questions or insights? Drop a comment below and let’s discuss!

Copyright © 2025 EngineerHow.com. All Rights Reserved.