# How to Deploy a Static HTML Site to Cloudflare Pages with One-Click Publishing from GitHub
Static sites are making a massive comeback. They load faster, cost less to host, and are far easier to maintain than dynamic alternatives. If you have a simple portfolio, a documentation site, or a landing page, you don’t need a heavy CMS or a server-side framework. You just need HTML, CSS, and a reliable deployment pipeline.
In this guide, we’ll walk through a complete **Cloudflare Pages static site deployment** workflow. You’ll learn how to connect a GitHub repository to Cloudflare Pages, set up automatic builds, and push updates with a single click. We’ll also show you how tools like HTMLPUT can simplify the initial creation of your static HTML assets.
## Why Cloudflare Pages for Static Sites?
Cloudflare Pages is a JAMstack platform designed specifically for static and frontend-heavy projects. It offers global CDN distribution, automatic HTTPS, and seamless integration with Git providers. Here’s why developers choose it for **Cloudflare Pages static site deployment**:
– **Global performance** — Every page is served from Cloudflare’s edge network, reducing latency for visitors worldwide.
– **Free tier** — Unlimited bandwidth and requests for most personal projects.
– **Instant rollbacks** — If a deployment breaks something, you can revert to any previous version in seconds.
– **Custom domains** — Bring your own domain with automatic SSL certificate provisioning.
– **One-click publishing** — Once connected to GitHub, every push to your main branch triggers a new deployment automatically.
## Prerequisites
Before we start, make sure you have the following:
1. A GitHub account (free tier works perfectly).
2. A Cloudflare account (sign up at dash.cloudflare.com).
3. A static HTML project — either one you built yourself or a template you downloaded.
If you don’t have a static HTML project ready, you can create one instantly using [HTMLPUT](https://htmlput.com). HTMLPUT lets you generate clean, responsive HTML pages with AI assistance, and you can download the files in seconds. It’s a great way to skip the boilerplate and focus on deployment.
## Step 1: Prepare Your Static HTML Project
Your static site should have at least an `index.html` file at the root. Cloudflare Pages expects this file as the entry point. You can also include CSS, JavaScript, images, and any other static assets in the same repository.
Here’s a minimal project structure:
“`
my-static-site/
├── index.html
├── styles.css
├── script.js
└── images/
└── logo.png
“`
Make sure all internal links are relative (e.g., `./styles.css` instead of `/styles.css`). This ensures your site works both locally and after deployment.
If you’re building your site with [HTMLPUT](https://htmlput.com), you can export the generated code as a zip file. Unzip it, and you’ll have a complete project folder ready to push to GitHub.
## Step 2: Push Your Project to GitHub
Cloudflare Pages requires a Git repository to monitor for changes. Let’s push your static site to GitHub.
1. Log in to GitHub and create a new repository (public or private — both work).
2. In your terminal, navigate to your project folder:
“`bash
cd my-static-site
“`
3. Initialize Git and commit your files:
“`bash
git init
git add .
git commit -m “Initial commit”
“`
4. Link your local repository to the remote GitHub repository:
“`bash
git remote add origin https://github.com/your-username/your-repo-name.git
git branch -M main
git push -u origin main
“`
Now your static HTML project is on GitHub. Every time you push a change, Cloudflare Pages will rebuild and redeploy your site automatically.
## Step 3: Connect GitHub to Cloudflare Pages
This is where the magic happens. Follow these steps to set up **Cloudflare Pages static site deployment**:
1. Log in to your Cloudflare dashboard.
2. In the left sidebar, click **Pages**.
3. Click **Create a project** > **Connect to Git**.
4. Select **GitHub** and authorize Cloudflare to access your repositories.
5. Choose the repository you just pushed.
6. In the **Set up builds and deployments** section:
– **Production branch**: `main`
– **Build command**: Leave this blank (static HTML doesn’t need a build step).
– **Build output directory**: Leave this blank or set it to `/` (root).
7. Click **Save and Deploy**.
Cloudflare will now clone your repository, serve the files, and give you a `*.pages.dev` URL. Your site is live in under a minute.
## Step 4: Set Up One-Click Publishing from GitHub
The best part about this workflow is that you don’t need to touch Cloudflare’s dashboard again. To update your site:
1. Make changes to your HTML, CSS, or JS files locally.
2. Commit and push to GitHub:
“`bash
git add .
git commit -m “Updated hero section”
git push
“`
3. Cloudflare Pages detects the push, rebuilds your site, and deploys the new version — all automatically.
This is true one-click publishing. Every push to `main` becomes a new deployment. You can also create preview deployments by pushing to a different branch and opening a pull request. Cloudflare will generate a unique preview URL for testing.
## Step 5: Add a Custom Domain (Optional)
Your `*.pages.dev` URL is fine for testing, but for production, you’ll want a custom domain. Here’s how:
1. In the Cloudflare Pages dashboard, go to your project.
2. Click **Custom domains** > **Set up a custom domain**.
3. Enter your domain (e.g., `example.com`).
4. Follow the DNS instructions. If your domain is already on Cloudflare, it’s a one-click update. Otherwise, you’ll need to add a CNAME record pointing to your `*.pages.dev` domain.
5. Cloudflare automatically provisions an SSL certificate for HTTPS.
Now your static site is live on your own domain with full HTTPS support.
## Step 6: Enhance Your Workflow with HTMLPUT
While Cloudflare Pages handles deployment brilliantly, you still need to create and update your HTML files. This is where [HTMLPUT](https://htmlput.com) becomes a valuable companion.
HTMLPUT is a free web hosting platform that lets you deploy static HTML pages instantly. But more importantly, it offers:
– **AI-assisted HTML generation** — Describe what you need, and the AI generates clean, semantic HTML.
– **One-click deployment** — Publish directly from the editor without touching Git.
– **Password protection** — Lock pages behind a password for private projects.
– **Cloudflare CDN** — All pages are served through Cloudflare’s global network.
You can use HTMLPUT to prototype your static site quickly, then export the code and push it to GitHub for long-term hosting on Cloudflare Pages. Or, you can use HTMLPUT as your primary editor and deploy directly from there.
For example, you might generate a landing page with AI, tweak the design, and then export the files. After that, you follow the steps above to push to GitHub and set up Cloudflare Pages. This hybrid approach gives you the speed of AI generation with the reliability of Git-based deployment.
## Troubleshooting Common Issues
Even with a straightforward **Cloudflare Pages static site deployment**, you might hit a few snags. Here are solutions to common problems:
### My site shows a 404 error
Make sure your `index.html` file is in the root of your repository. Cloudflare Pages looks for this file by default. If your entry point is named differently (e.g., `home.html`), you can configure it in the project settings under **Build configuration** > **Root directory**.
### Changes aren’t showing after push
Check the **Deployments** tab in Cloudflare Pages. If the deployment failed, click on it to see the build log. Common causes include missing files or incorrect output directory settings.
### Custom domain not resolving
DNS propagation can take up to 48 hours, but it’s usually much faster. Ensure your domain’s nameservers point to Cloudflare, and that you’ve added the correct CNAME record.
### Build command errors
For static HTML sites, you don’t need a build command. If you accidentally set one, Cloudflare will try to run it and fail. Go to project settings and clear the build command field.
## Best Practices for Static Site Deployment
To get the most out of your **Cloudflare Pages static site deployment**, follow these best practices:
– **Use a `.gitignore` file** — Exclude unnecessary files like `.DS_Store`, `node_modules`, or local configuration files.
– **Optimize images** — Compress images before adding them to your repository. Smaller files mean faster load times.
– **Enable HTTP/2 and Brotli** — Cloudflare Pages enables these by default, but double-check in your Cloudflare dashboard.
– **Set up branch previews** — Use feature branches for testing. Cloudflare Pages automatically creates preview URLs for pull requests.
– **Monitor analytics** — Cloudflare Pages provides basic analytics. For deeper insights, integrate with tools like Google Analytics or Plausible.
## Conclusion
Deploying a static HTML site to Cloudflare Pages with one-click publishing from GitHub is one of the fastest, most reliable workflows available today. You get global CDN performance, automatic HTTPS, and effortless updates — all without paying a cent.
Start by creating your static HTML project with [HTMLPUT](https://htmlput.com) to save time on coding. Then push it to GitHub, connect Cloudflare Pages, and enjoy automatic deployments every time you make a change. For more tips and tutorials on static site hosting, check out the [HTMLPUT blog](https://blog.htmlput.com).
Now it’s your turn. Build something amazing, deploy it in minutes, and let the world see it.