How to Deploy a Static Site to Cloudflare Pages with One-Click Publishing from GitHub

If you’re a developer or designer looking for a fast, free, and reliable way to host a static website, Cloudflare Pages one-click publishing is a game-changer. Connecting your GitHub repository to Cloudflare Pages means that every time you push a commit, your site is automatically built and deployed — no manual FTP, no server configuration, no downtime. In this tutorial, you’ll learn exactly how to set up that seamless workflow, from repo creation to live site, in under ten minutes.

What Is Cloudflare Pages One‑Click Publishing?

Cloudflare Pages is a JAMstack platform that hosts front‑end projects directly from your Git provider (GitHub, GitLab, or Bitbucket). The “one‑click” publishing feature refers to the initial setup: once you authorise Cloudflare to access your repository, you pick a branch, and every future push triggers an automatic build and deploy. This is Cloudflare Pages one-click publishing in action — a continuous deployment pipeline that requires zero manual intervention after configuration.

The service is built on Cloudflare’s global edge network, meaning your static assets (HTML, CSS, JavaScript, images) are served from the closest data centre to your visitor. Combined with a custom domain, SSL certificates, and unlimited bandwidth on the free tier, it’s an ideal solution for landing pages, documentation sites, portfolios, and even small e‑commerce front‑ends.

Prerequisites

Before we dive in, make sure you have:

  • A GitHub account (free tier works perfectly).
  • A static site project — it can be plain HTML, a static site generator output (like Hugo, Jekyll, Next.js export), or even a single index.html file.
  • A Cloudflare account (free plan is sufficient).

If you don’t have a project yet, you can quickly create a simple one using HTMLPUT, a free web hosting platform that lets you deploy static HTML pages instantly. HTMLPUT offers one-click deployment with Cloudflare CDN, custom domains, password protection, and even AI-assisted HTML generation — perfect for testing the waters before moving to a full DevOps pipeline.

Pro tip: Use HTMLPUT’s AI generator to create a landing page, then export the code and push it to GitHub. You’ll have a live site on Cloudflare Pages in minutes.

Step‑by‑Step Guide: Enabling One‑Click Publishing from GitHub

### 1. Prepare Your GitHub Repository

Log in to GitHub and create a new repository (public or private — both work with Cloudflare Pages). Clone it to your local machine, add your static site files, commit, and push.

Make sure your project includes a build command if you use a framework (e.g., npm run build for Next.js, hugo for Hugo). For plain HTML, you can skip the build step entirely.

### 2. Log In to Cloudflare Pages

  1. Go to the Cloudflare Dashboard.
  2. On the left sidebar, click Pages.
  3. Click the Create a project button.

You’ll see two options: “Connect to Git” and “Direct Upload”. Choose Connect to Git – that’s the gateway to one‑click publishing.

### 3. Authorise GitHub (One Time)

Cloudflare will ask you to install the Cloudflare Pages app on your GitHub account. Grant access to the repository you just created. This step only happens once per account.

### 4. Select Your Repository and Branch

After authorisation, you’ll see a list of your GitHub repositories. Select the one containing your static site. Then choose the branch you want to watch – most developers use main or master.

Cloudflare will automatically detect your framework (if any) and pre‑fill build settings. For plain HTML sites, leave the build command blank and set “Build output directory” to the folder containing your index.html (often empty, / or public).

### 5. Configure Build Settings (Optional but Recommended)

  • Build command: e.g., npm run build for frameworks.
  • Build output directory: e.g., dist, public, or ..
  • Root directory (advanced): Use only if your project lives in a subfolder.

Click Save and Deploy. Cloudflare will clone your repo, run the build (if any), and deploy the output. Your first deployment will be live at a *.pages.dev domain in about 30 seconds.

### 6. Set Up Custom Domain (Optional)

You can bring your own domain (e.g., example.com). In the Pages project dashboard, go to Custom domains → Set up a custom domain. Cloudflare will guide you through adding a CNAME or DNS record. If your domain is already on Cloudflare, the configuration is instant.

### 7. Enable Automatic Deployments

By default, every push to the selected branch triggers a new deployment. No further setup needed. This is the essence of Cloudflare Pages one-click publishing – you click once during initial setup, and every future update is automatic.

To verify, push a small change to your GitHub repo (e.g., update a heading in index.html). Within seconds, Cloudflare Pages will detect the push, rebuild, and redeploy. Your site updates without any downtime.

Why Cloudflare Pages One‑Click Publishing Matters

### Speed and Simplicity

Traditional deployment methods require you to upload files via FTP, run scripts manually, or configure CI/CD pipelines. Cloudflare Pages eliminates that overhead. Developers can focus on writing code, not on deployment mechanics. The Cloudflare Pages one-click publishing workflow is especially valuable for teams that ship frequently — every merge to the main branch becomes a live release.

### Global CDN Performance

Cloudflare’s edge network covers 330+ cities. A visitor in Tokyo gets the same fast load time as a visitor in New York. Combined with automatic HTTP/2 and Brotli compression, your static site performs at its peak.

### Free Tier with Generous Limits

Cloudflare Pages offers unlimited bandwidth and requests on the free plan. 500 builds per month, 1 GB storage – more than enough for personal projects, portfolios, and small business sites. Compare that to other platforms that cap bandwidth or charge per build.

### Easy Rollbacks & Preview Deployments

Every deployment is automatically saved. If a commit breaks your site, you can roll back to any previous version with one click. Additionally, pull request previews let you test changes before merging – Cloudflare deploys a unique URL for each branch.

Best Practices for a Smooth One‑Click Workflow

### Use a .gitignore to Keep Build Artifacts Out of the Repo

Frameworks often generate large node_modules or output folders. Exclude them from your repository to keep it lean. Cloudflare Pages will regenerate these during the build step.

### Leverage Environment Variables

If your static site needs API keys or environment‑specific variables, set them in the Cloudflare Pages dashboard under Environment variables. They are injected during build time.

### Combine with HTMLPUT for Rapid Prototyping

Before committing to a full GitHub workflow, you can prototype your static pages on HTMLPUT. HTMLPUT’s instant deployment and AI‑assisted HTML generation let you iterate quickly. Once the design is final, export the code to your GitHub repo and let Cloudflare Pages take over.

For additional tutorials on static site deployment and optimisation, check out the HTMLPUT Blog. You’ll find guides on custom domains, password protection, and CDN performance tuning.

Troubleshooting Common Issues

  • Build fails with “Command not found” – make sure your repository includes a package.json with the build script, or that you’ve specified the correct root directory.
  • Site shows 404 after deploy – verify your Build output directory. If your index.html is in the root, set it to /.
  • Changes not triggering a new deploy – confirm that Cloudflare has write access to your GitHub repo. Re‑install the Cloudflare Pages app if needed.

Conclusion

Cloudflare Pages transforms static site hosting into a truly hands‑off experience. With Cloudflare Pages one-click publishing from GitHub, you get a production‑grade CDN, automatic builds, free SSL, and unlimited bandwidth – all triggered by a simple git push. Whether you’re hosting a personal blog, a documentation site, or a client landing page, this workflow saves time and reduces friction.

For developers who want an even quicker way to deploy static HTML without leaving the browser, HTMLPUT offers a complementary solution – one‑click deployment, instant Cloudflare CDN, and AI‑powered page creation. Start with HTMLPUT for rapid experiments, then migrate to Cloudflare Pages for serious projects.

Set up your first one‑click pipeline today. Your future self will thank you every time a deploy runs in the background while you code the next feature.

WORDS: 1248