Skip to main content

Introduction to Cloudflare Pages

Learning Focus

By the end of this module you will understand the Cloudflare Pages architecture, its place in the JAMstack ecosystem, and why migrating from a self-hosted Docusaurus server to GitHub + Cloudflare Pages is a production-grade decision.

What Is Cloudflare Pages?

Cloudflare Pages is a JAMstack hosting platform built on top of Cloudflare's global edge network (330+ Points of Presence). It provides:

  • Zero-config CI/CD — connect a Git repository and every push triggers a build + deploy
  • Global CDN delivery — your static assets are served from the edge closest to your visitor
  • Serverless functions — via Pages Functions (backed by Cloudflare Workers)
  • Unlimited bandwidth — no egress fees, ever
  • Automatic HTTPS — every project and preview gets a valid TLS certificate
flowchart TB
DEV["Developer\n(git push)"] --> GITHUB["GitHub Repository\n(source of truth)"]
GITHUB -->|webhook trigger| CF_BUILD["Cloudflare Pages\nBuild Pipeline"]
CF_BUILD -->|build command| ARTIFACT["Build Artifact\n(static files + functions)"]
ARTIFACT -->|deploy| CF_NET["Cloudflare Global Network\n(330+ PoPs)"]
CF_NET -->|serve from nearest edge| USER1["User — Tokyo"]
CF_NET -->|serve from nearest edge| USER2["User — London"]
CF_NET -->|serve from nearest edge| USER3["User — São Paulo"]

style GITHUB fill:#24292e,color:#fff,stroke:#555
style CF_BUILD fill:#f6821f,color:#fff,stroke:#e5711e
style CF_NET fill:#2563eb,color:#fff,stroke:#1e40af
style ARTIFACT fill:#16a34a,color:#fff,stroke:#15803d

Core Concepts

The JAMstack Model

JAMstack stands for JavaScript, APIs, Markup. The key principle: your HTML is pre-built at deploy time (not at request time), so there is no server to maintain, patch, or scale.

LayerSelf-Hosted DocusaurusGitHub + Cloudflare Pages
BuildManual or CI script on your serverAutomatic on every git push
ServingNginx/Caddy on a VPSCloudflare's global CDN
SSLLet's Encrypt (manual renewal)Automatic, managed by Cloudflare
ScalingYour server's limitsInfinite — edge distributed
AvailabilityYour VPS uptime99.99%+ SLA
CostVPS fees + timeFree (up to 500 builds/month)

Build Pipeline

When you push to your repository, Cloudflare Pages:

  1. Clones your repository at that commit
  2. Installs dependencies (npm ci or yarn install)
  3. Runs your build command (npm run build)
  4. Uploads the output directory to Cloudflare's edge storage
  5. Atomically activates the new deployment (zero-downtime)

Deployment Types

TypeURL PatternTrigger
Productionyour-project.pages.dev or custom domainPush to production branch
Preview<commit-hash>.your-project.pages.devPush to any other branch
Direct UploadSame as abovewrangler pages deploy CLI

Pages vs Workers

Cloudflare Pages and Workers are complementary:

PagesWorkers
Primary useStatic sites + full-stack appsServerless API / edge logic
Deployment unitFull project (assets + functions)Individual Worker script
FunctionsVia functions/ directory (file-based routing)Via fetch handler
Asset servingBuilt-in (static files)Must use Workers Static Assets
CI/CDGit-native, automaticwrangler deploy
Pages Functions = Workers

Under the hood, Pages Functions are Workers. They share the same runtime, bindings (KV, D1, R2), and limits. The only difference is how they're deployed and routed.


Why Migrate From Self-Hosted Docusaurus?

If you are running Docusaurus inside a Docker container (e.g., Nginx serving the build/ output), here is why GitHub + Cloudflare Pages is superior:

Operational Simplification

Before (Self-Hosted):
Docusaurus repo → manual build → scp/rsync to VPS → Nginx serves files
Risk: server crash, SSL expiry, bandwidth bill, manual updates

After (GitHub + Cloudflare Pages):
Docusaurus repo → git push → Cloudflare builds & deploys → edge serves files
Risk: essentially zero

Performance

  • Edge serving: files are cached at 330+ locations vs one VPS
  • HTTP/3 + QUIC: enabled by default on Cloudflare Pages
  • Brotli compression: automatic for text assets
  • Image optimization: via Cloudflare's Polish (optional)

Cost

ItemSelf-Hosted VPSCloudflare Pages
Compute$5–$20/month$0
Bandwidth~$0.01/GB$0 (unlimited)
SSL renewalTime cost$0 (automatic)
DDoS protection$0 (basic) or $$$$0 (included)
Total$60–$240/year$0/year

Free Tier Limits

ResourceFree Tier
ProjectsUnlimited
Builds per month500
Concurrent builds1
Custom domainsUnlimited
Preview deploymentsUnlimited
BandwidthUnlimited
Pages Functions requests100,000/day
Build timeout20 minutes
Maximum asset size25 MB per file
Total assets per deployment20,000 files
500 Build Limit

For a Docusaurus documentation site with infrequent updates, 500 builds/month is more than enough. If you CI/CD very aggressively (e.g., every commit on feature branches), consider squashing commits or only triggering builds on main.


Cloudflare Pages vs Alternatives

FeatureCloudflare PagesVercelNetlifyGitHub Pages
Free bandwidthUnlimited100 GB100 GB100 GB/month soft
Free builds500/month6,000 min300 minUnlimited
Edge functions✅ Workers✅ Edge Functions✅ Edge Functions
Custom domainsUnlimited50 on free100 on free1 per repo
Deploy previews✅ Unlimited
DDoS protection✅ Included
Private repo support❌ (free)
Zero cold starts✅ (Workers)N/A

Key Takeaways

  • Cloudflare Pages is a JAMstack platform: build once at deploy time, serve from the edge forever.
  • The migration from self-hosted Docusaurus → GitHub + Cloudflare Pages eliminates server maintenance, reduces cost to zero, and improves global performance.
  • Git push = deployment — no SSH, no rsync, no manual steps.
  • Free tier covers unlimited bandwidth, unlimited projects, and 500 builds/month — more than enough for most documentation sites.
  • Pages Functions (Workers) let you add server-side logic without leaving the platform.

What's Next