Deploying a Static Site with Cloudflare Pages

Connect GitHub repository to Cloudflare Pages

Authorize Pages to access the repo and select the project repository.

Select production branch to deploy (e.g., main)

Choose the branch that will trigger production builds.

Set build command and output directory (e.g., npm run build, public)

Enter the exact build command and folder that contains static assets.

Add environment variables and secrets in Pages

Store API keys and build-time vars in the Pages dashboard, not in source control.

Add production environment variables (secrets)

Use the production environment to store live API keys and database URLs.

Add preview branch environment variables

Provide safe or read-only keys for preview builds to avoid leaking production secrets.

Enable preview deployments for branches and pull requests

Allow per-branch previews so team members can review changes before merging.

Add redirects and headers files to your repo (e.g., _redirects, _headers, netlify.toml)

Include SPA redirects and security headers so routing and CSP work after deploy.

Configure caching and edge TTLs using headers or Cloudflare settings

Set Cache-Control and Edge TTL to balance freshness and performance.

Add custom domain in Pages dashboard

Register your domain in Pages and follow the verification prompts.

Create DNS records for custom domain (CNAME for subdomain or A/AAAA for root)

Point your domain to the records Pages provides; use CNAME flattening if needed.

Verify TLS / HTTPS and enable Always Use HTTPS

Wait for certificate issuance, then force HTTPS to secure all traffic.

Set up redirects (www ↔ root) in DNS or Pages to canonicalize your domain

Choose a primary hostname and redirect the alternative to it for SEO.

Enable Cloudflare Web Analytics for the site

Turn on privacy-friendly analytics in Pages to view simple traffic stats.

Test production and preview deployments: check links, assets, and forms

Open URLs and verify assets load, forms submit, and third-party integrations work.

Monitor deployment logs and set alerts for failed builds

Review build logs in Pages and enable notifications for build failures.