Deploying a Static Site with Cloudflare Pages

16 items · Technical · Easy difficulty · 30 min

Quick, practical steps to deploy a static site on 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.

Printed from TickYouOff — the interactive version tracks your progress and can be shared with others.