Deploying a static site to Cloudflare Pages is fast, reliable, and ideal for projects that benefit from a global CDN and built-in previews. This guide walks through the core steps: connecting your repository, configuring build settings, enabling previews and custom domains, and optimizing for performance.
First, create a Cloudflare account and open the Pages dashboard. Click "Create a project" and connect the repository that contains your static site (GitHub or GitLab). Cloudflare will prompt you to authorize access to your repo and then let you select the branch you want to publish, typically main or master.
Next, configure your build settings. For many static site generators the build command is npm run build and the output directory is either docs or dist. Enter the correct build command and output folder — for this project, use npm run build and docs if you publish the production build to the docs/ directory. Specify any required environment variables (e.g., API keys) inside the Pages project settings to ensure builds run the same as locally. Also select the Node.js version if your build depends on a specific runtime.
After saving the settings, trigger the first build. Cloudflare will queue a build and provide logs you can follow in the dashboard. If the build fails, check the logs, fix dependency or script issues in your repo, and push changes to trigger a new build. On success, Cloudflare provides a preview URL for that build; this is useful for shareable per-branch or per-PR previews.
To add a custom domain, go to the project settings, add your domain, and follow verification steps. If your DNS is managed by Cloudflare, the domain setup is straightforward and Cloudflare will handle TLS certificate issuance automatically. If not, you’ll need to update DNS records at your registrar to point to Cloudflare per their instructions.
For performance and security, use Cloudflare's caching features. Pages serves content from Cloudflare's edge CDN by default; you can fine-tune cache-control headers or use Cloudflare Rules to customize caching behavior. If you need dynamic functionality, consider Cloudflare Workers or Workers KV to run serverless code at the edge.
Image optimization and asset management can be handled either at build time (resizing and producing WebP variants) or by using Cloudflare Images for on-the-fly image delivery. Either approach reduces bandwidth and speeds up page load across regions.
Finally, enable continuous deployment: every push to the connected branch triggers a new build and deploy. Use per-branch previews to validate changes before merging. Monitor builds and traffic in the Pages dashboard and set up alerts for build failures. Cloudflare Pages offers a generous free tier that covers most personal projects and small portfolios, making it a solid choice to deploy a static site quickly and globally.
With these steps — connect the repo, configure build & output, enable previews, set up custom domains, and optimize caching & assets — your static site will be published on Cloudflare with global performance and secure HTTPS by default.