# How to Deploy a Static HTML Site on Cloudflare Pages in Under 10 Minutes
If you’re a developer looking for a fast, free, and reliable way to get your static site online, **Cloudflare Pages static site deployment** is one of the best solutions available today. With its global CDN, instant rollbacks, and seamless Git integration, Cloudflare Pages makes hosting static HTML, CSS, and JavaScript effortless. In this step-by-step tutorial, I’ll show you how to deploy a static HTML site on Cloudflare Pages in under 10 minutes — no server configuration, no command-line wizardry required. Whether you’re launching a personal portfolio, a landing page, or a simple documentation site, this guide will have you live in no time.
## What Is Cloudflare Pages?
Cloudflare Pages is a JAMstack platform designed for frontend developers. It connects directly to your Git repository (GitHub, GitLab, or Bitbucket), builds your static assets, and deploys them across Cloudflare’s global network. The service offers a generous free tier, custom domain support, automatic HTTPS, and even serverless functions if you need backend logic. For those who prefer a simpler approach — like uploading files directly — platforms like [HTMLPUT](https://htmlput.com) offer one-click hosting with Cloudflare CDN, but Cloudflare Pages gives you more control over the build process and version history.
## Why Choose Cloudflare Pages for Static Sites?
Before we dive into the deployment steps, let’s look at why Cloudflare Pages is a top choice for **Cloudflare Pages static site deployment**:
– **Free forever tier**: Unlimited bandwidth and requests on the free plan.
– **Global CDN**: Your site is served from 330+ cities worldwide.
– **Automatic HTTPS**: SSL certificates are provisioned and renewed automatically.
– **Git integration**: Push to your repo, and Cloudflare builds and deploys automatically.
– **Preview deployments**: Every branch gets a unique URL for testing.
– **Custom domains**: Point your own domain in minutes.
If you’re just getting started with static sites, you might also appreciate [HTMLPUT’s AI-assisted HTML generation](https://htmlput.com) to quickly create pages, then deploy them to Cloudflare Pages using this guide.
## Prerequisites
To follow this tutorial, you need:
1. A [Cloudflare account](https://dash.cloudflare.com/sign-up) (free).
2. A GitHub, GitLab, or Bitbucket account.
3. A basic HTML project on your local machine (or you can create one now).
4. Git installed on your computer (optional but recommended).
That’s it. No credit card required, no server setup, no DevOps experience needed.
## Step 1: Prepare Your Static HTML Site
First, create a simple static site. If you already have one, skip to Step 2. Otherwise, create a folder called `my-static-site` with these files:
### index.html
“`html
This site was deployed in under 10 minutes.
“`
### style.css
“`css
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background: #f0f4f8;
color: #333;
}
h1 { color: #0051ff; }
“`
That’s your entire project. No build tools, no frameworks — just pure HTML and CSS.
## Step 2: Push Your Code to a Git Repository
Cloudflare Pages works best when connected to a Git provider. Here’s how to push your project to GitHub (the same steps apply for GitLab or Bitbucket):
1. Go to [github.com](https://github.com) and create a new repository (e.g., `my-static-site`).
2. In your terminal, navigate to your project folder:
“`bash
cd my-static-site
“`
3. Initialize Git and push:
“`bash
git init
git add .
git commit -m “Initial commit”
git branch -M main
git remote add origin https://github.com/your-username/my-static-site.git
git push -u origin main
“`
Now your code is on GitHub and ready for Cloudflare.
## Step 3: Connect Cloudflare Pages to Your Repository
1. Log in to your [Cloudflare dashboard](https://dash.cloudflare.com).
2. In the left sidebar, click **Pages**.
3. Click the **Create a project** button.
4. Select **Connect to Git**.
5. Authorize Cloudflare to access your GitHub account (or GitLab/Bitbucket).
6. Choose the repository you just created (`my-static-site`).
7. Click **Begin setup**.
## Step 4: Configure Your Build Settings
Cloudflare Pages will try to auto-detect your framework. Since we’re using plain HTML, the default settings are perfect:
– **Project name**: `my-static-site` (auto-filled).
– **Production branch**: `main`.
– **Build settings**:
– Build command: Leave blank (no build step needed).
– Build output directory: Leave as `/` (root).
– Root directory: Leave blank.
If you had a framework like Hugo, Jekyll, or Next.js, you’d specify the build command here. For static HTML, no build is required.
Click **Save and Deploy**.
## Step 5: Wait for Deployment (About 1 Minute)
Cloudflare Pages will clone your repository, detect the HTML files, and deploy them. You’ll see a progress log:
– Cloning repository…
– Building…
– Deploying…
In less than a minute, you’ll see a green success message with your live URL, something like: `https://my-static-site.pages.dev`
Click that URL — your site is live on the Cloudflare CDN!
## Step 6: Add a Custom Domain (Optional but Recommended)
Your `*.pages.dev` URL works fine, but a custom domain looks more professional. Here’s how to add one:
1. In your Cloudflare Pages project dashboard, go to **Custom domains**.
2. Click **Set up a custom domain**.
3. Enter your domain (e.g., `example.com`).
4. Cloudflare will check DNS records. If your domain is already on Cloudflare, it will automatically add the required CNAME record.
5. If your domain is not on Cloudflare, you’ll need to update your nameservers or add a CNAME record pointing to `your-project.pages.dev`.
Once verified, HTTPS is automatically provisioned. Your site will be accessible via your custom domain in a few minutes.
## Step 7: Enable Automatic Deployments (Bonus)
One of the best features of **Cloudflare Pages static site deployment** is continuous deployment. Every time you push changes to your `main` branch, Cloudflare automatically rebuilds and redeploys your site. To test this:
1. Edit your `index.html` locally (change the heading text, for example).
2. Commit and push:
“`bash
git add .
git commit -m “Update heading”
git push
“`
3. Go back to your Cloudflare Pages dashboard. Within seconds, you’ll see a new deployment in progress.
This workflow is perfect for teams or solo developers who want a “push and forget” hosting experience.
## Troubleshooting Common Issues
### My site shows a 404 error
– Ensure your `index.html` is in the root of your repository, not in a subfolder.
– Check that the build output directory is set to `/` in Cloudflare Pages settings.
### Custom domain not working
– Verify that the CNAME record points to `your-project.pages.dev`.
– If using a root domain (e.g., `example.com`), you may need a CNAME flattening or an A record pointing to Cloudflare’s IPs. Cloudflare’s dashboard will guide you.
### Build fails
– Since we’re using static HTML, builds should never fail. If you add a framework later, ensure the build command matches your framework’s requirements.
## Comparing Cloudflare Pages with Other Hosting Options
While Cloudflare Pages is excellent, it’s not the only free static hosting solution. Here’s a quick comparison:
| Feature | Cloudflare Pages | HTMLPUT | Netlify | GitHub Pages |
|———|—————–|———|———|————–|
| Free tier | Yes | Yes | Yes | Yes |
| Global CDN | Cloudflare | Cloudflare | Netlify Edge | Fastly |
| Custom domains | Yes | Yes | Yes | Yes |
| Git integration | Yes | No (upload) | Yes | Yes |
| Password protection | No | Yes | No | No |
| AI HTML generation | No | Yes | No | No |
If you need **password protection** or **AI-assisted HTML generation**, [HTMLPUT](https://htmlput.com) is a great alternative for quick, one-off deployments. For full Git-based workflows with preview deployments, Cloudflare Pages is hard to beat.
## Tips for Optimizing Your Static Site on Cloudflare Pages
1. **Enable HTTP/2 and Brotli compression** — Cloudflare does this automatically.
2. **Use cache headers** — Add `Cache-Control` headers in your HTML or via Cloudflare’s Page Rules.
3. **Minify assets** — Use tools like HTMLMinifier or CSSNano before pushing (or let Cloudflare’s Auto Minify handle it in the dashboard).
4. **Set up redirects** — Create a `_redirects` file in your project root:
“`
/old-page /new-page 301
“`
5. **Add a custom 404 page** — Create a `404.html` in your root directory.
## Conclusion
You’ve just learned how to perform a **Cloudflare Pages static site deployment** in under 10 minutes. From creating a simple HTML project to pushing it live on a global CDN with a custom domain, the entire process is streamlined and developer-friendly. Cloudflare Pages eliminates the need for server management, scaling worries, or complex CI/CD pipelines — it just works.
For even faster deployments without Git, remember that platforms like [HTMLPUT](https://htmlput.com) offer one-click static hosting with Cloudflare CDN, custom domains, and even password protection. But if you want full version control, automatic builds, and preview deployments, Cloudflare Pages is the gold standard.
Now go ahead and deploy your next static site. Whether it’s a personal blog, a business landing page, or a documentation hub, you have the tools and knowledge to get it online in minutes — not hours.