Skip to content
Back to Cloud Services

Cloudflare Pages Deploy Guide

Deploy static sites and full-stack apps to Cloudflare Pages with git integration, preview deployments, and Pages Functions.

CloudflareBeginner

Why

Pages gives unlimited static requests, 500 builds/month free, and automatic preview URLs per PR. Combined with Pages Functions it becomes a full-stack platform with no cold starts, beating Vercel/Netlify on free-tier limits.

Cloudflare's network spans 330+ cities in 125+ countries, serving 20% of all internet traffic. Workers have 0ms cold starts (isolate-based) and the free tier covers 100k requests/day.

When

Use Pages for Next.js/Astro/Remix static exports, marketing sites, docs, and full-stack apps needing edge functions. Avoid for apps requiring long-running servers or WebSockets servers.

How

1. Connect repo — dash.cloudflare.com → Pages → Create → Connect Git 2. Build settings — framework preset auto-detects, set build command + output dir 3. Deploy — push to main triggers production build, PRs get preview URLs 4. Pages Functions — add functions/ dir, files become routes (/api/* → functions/api/*.ts) 5. Bindings — wrangler.toml or dashboard: KV, D1, R2, Durable Objects 6. Custom domain — Pages → Custom domains → add (auto SSL via Cloudflare) 7. Rollback — every deploy is immutable, one-click rollback in dashboard

Example

// functions/api/feedback.ts — Pages Function (edge) export const onRequestPost = async ({ request, env }) => { const data = await request.json(); await env.DB.prepare("INSERT INTO feedback (msg) VALUES (?)").bind(data.msg).run(); return Response.json({ ok: true }); }; // wrangler.toml (Pages bindings) [[d1_databases]] binding = "DB" database_name = "feedback-db" # Deploy via CLI npx wrangler pages deploy ./dist --project-name mysite

Common Problems

  • ⚠Build command wrong — 'npm run build' vs 'npx next build', check framework preset
  • ⚠Functions not routing — functions/ must be at repo root, not in src/
  • ⚠Preview deploys leaking secrets — use env vars scoped to production, not shared

Best Practices

  • ✓Pin Node version via .nvmrc — Cloudflare uses it for builds, prevents version drift
  • ✓Use _routes.json to limit Functions invocations — skip static paths, save CPU
  • ✓Enable deployment approvals for production — prevents accidental broken deploys

FAQ

What is Cloudflare Pages Deploy Guide and what problem does it solve?

Deploy static sites and full-stack apps to Cloudflare Pages with git integration, preview deployments, and Pages Functions. It lets developers deploy, store, and scale without self-managing infrastructure — a core reference for cloud service selection.

How do I get started with Cloudflare Pages Deploy Guide in 5 minutes?

Two steps to run it: (1) Connect repo — dash.cloudflare.com → Pages → Create → Connect Git; (2) Build settings — framework preset auto-detects, set build command + output dir. Validate on the free tier first, then wire into production.

What is the #1 pitfall with Cloudflare Pages Deploy Guide?

The most frequent issue is: Build command wrong — 'npm run build' vs 'npx next build', check framework preset. Run a pre-launch checklist item by item, and add policy/config scanning in CI.

What are the best practices for Cloudflare Pages Deploy Guide?

Best practices for Cloudflare Pages Deploy Guide include: Pin Node version via .nvmrc — Cloudflare uses it for builds, prevents version drift; Use _routes.json to limit Functions invocations — skip static paths, save CPU; Enable deployment approvals for production — prevents accidental broken deploys. The first one — "Pin Node version via .nvmrc — Cloudflare uses it for builds, prevents version drift" — should be a team default baked into your IaC templates.

How do I control cost and avoid bill surprises with Cloudflare Pages Deploy Guide?

Three ways to prevent overspend: (1) tag every resource with env/team and enable billing alarms; (2) set budget thresholds to trigger Slack/email alerts; (3) review idle resources in Cost Explorer regularly and clean them up. Most Cloudflare Pages Deploy Guide options offer a free tier — validate within free quota before scaling.