How to deploy a static site to Cloudflare Pages: step-by-step

Cloudflare Pages is a free static website hosting and deployment platform that runs on Cloudflare's global edge network. After you connect a Git repository, Pages builds your site and publishes the output to hundreds of data centers worldwide, with HTTPS, a CDN, and global load-balancing included at no cost. This guide walks through the two deployment paths — Git integration for automatic rebuilds, and Direct Upload for prebuilt assets — plus the free-plan limits you should plan around.

Why deploy to Cloudflare Pages

A static site is a collection of fixed HTML, CSS, and JavaScript files — no server, no database, no runtime. Because everything is prebuilt, a static host only needs to store files and serve them fast. Cloudflare Pages does exactly that, serving your files from its global network with no bandwidth charges. The free plan removes the usual cost of hosting, which is why Pages is a common home for blogs, documentation, and marketing sites built with frameworks such as Next.js (static export), Eleventy, Hugo, Astro, or plain HTML.

Pages gives you a clean workflow: commit code, push to Git, and a new version goes live automatically. Every deployment is versioned, so you can roll back to a previous build if something breaks.

Path 1: Deploy from a Git repository

Git integration is the recommended path when you want changes to publish automatically on every push. Pages supports both GitHub and GitLab.

1. Build your site locally and confirm the build command and output directory for your framework. For a Next.js static export the build command is npx next build and the output directory is out. For a Vite React app it is npm run build and dist. A plain HTML site with no build step can leave the build command blank.
2. In the Cloudflare dashboard, open the Workers & Pages page and select Create application → Pages → Connect to Git.
3. Sign in with your Git provider and choose the repository to deploy. Both public and private repositories are supported.
4. In Set up builds and deployments, enter your project name (it becomes <project>.pages.dev) and choose your production branch — usually main or master. The production branch serves your live site; other branches become preview deployments.
5. Set your build command and build output directory from the framework preset, or leave the build command blank for a site with no build step.
6. Optionally add environment variables for the build, then select Save and Deploy.

Pages runs the install and build steps, then uploads the output to its edge network. When a build process returns a non-zero exit code, Pages marks it as failed; an exit code of 0 means the build succeeded and the assets are uploaded. After the first deploy you get a URL like <project>.pages.dev for your live site, and Cloudflare injects system build variables such as CF_PAGES (set to 1) and CF_PAGES_BRANCH so builds can detect they are running on Pages.

Path 2: Direct Upload with prebuilt assets

Choose Direct Upload when you build elsewhere — at a separate CI platform or on your own machine — and only want Cloudflare Pages to host the finished files. Assets are uploaded either through the Wrangler CLI or by dragging and dropping in the dashboard.

With Wrangler:

1. Log in with wrangler login, then create a project: npx wrangler pages project create.
2. Deploy your build output: npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>.
3. Your production site is served at <project>.pages.dev. To deploy a preview, pass --branch=<BRANCH_NAME> and the branch alias becomes available at <branch>.<project>.pages.dev.

With drag and drop, open Workers & Pages → Create application → Get started → Drag and drop your files, name the project, and upload a folder (or a zip) of your assets. Drag and drop is limited to 1,000 files, while Wrangler supports up to 20,000 files per project.

Direct Upload projects do not support the functions folder via the dashboard drag and drop — to deploy a functions folder you must use Wrangler.

Adding a custom domain

After your site is live at <project>.pages.dev, attach your own domain from the project's Custom domains settings. Cloudflare can issue an SSL/TLS certificate automatically, and the site continues to serve over HTTPS through the edge. The free plan allows up to 100 custom domains per project.

Free plan limits to plan around

Cloudflare Pages free plan limits (as documented by Cloudflare):

Bandwidth and requests are unlimited on the free plan, which is why Pages suits a high-traffic static site without surprise bills. The practical constraint is the file count (20,000 per site) and the monthly build budget (500 builds). A large documentation site that publishes often can approach those numbers; a typical blog stays far below them.

What about dynamic features?

Pages also supports Pages Functions, which let you run server-side code for dynamic behavior such as handling forms or reading cookies, with requests counting toward your Workers quota. On the free plan this quota is modest, so most users keep dynamic work minimal and lean on the static asset hosting, which is effectively free.

Summary

Cloudflare Pages turns a static site into a fast, globally-cached deployment with no hosting bill. Connect a Git repository for automatic rebuilds, or use Direct Upload for manual builds. Set a custom domain, and keep the free-plan limits in mind — especially the 20,000-file and 500-builds-per-month caps. For purely static output, Pages is hard to beat on price and performance.

FAQ

Is Cloudflare Pages free?

Yes. The free plan provides 20,000 files per site, 500 builds per month, and unlimited bandwidth. Paid plans raise the file limit to 100,000 per site and increase monthly builds.

What is the difference between Cloudflare Pages and Cloudflare Workers?

Pages is static hosting with optional Pages Functions; Workers is a serverless execution platform where you write code that runs at the edge. They are related products, and Pages Functions requests count toward your Workers quota. Many static sites use Pages alone, without Workers.

Can I use Cloudflare Pages without GitHub or GitLab?

Yes. Direct Upload lets you upload prebuilt assets with Wrangler or drag-and-drop without any Git provider. You lose automatic rebuilds on push, but still get the same edge hosting and HTTPS.

Does Cloudflare Pages support Next.js?

Yes. Next.js can be deployed as a static HTML export using npx next build with the out output directory, or via the pages adapter for full-stack deployments. For a purely static site, the static export path needs no server runtime.