Cloudflare Pages: Zero to Production

January 2025

Cloudflare Pages transforms static site deployment from a complex DevOps challenge into a simple git push workflow. Here's everything you need to know about deploying your projects with zero configuration and global edge distribution.

Why Cloudflare Pages?

Traditional hosting solutions often require manual server management, complex deployment pipelines, and expensive CDN configurations. Cloudflare Pages eliminates this complexity:

• Zero Configuration - No build scripts or deployment configs needed
• Global CDN - 275+ edge locations worldwide
• Automatic SSL - HTTPS certificates managed automatically
• Git Integration - Deploy on every commit
• Preview Deployments - Every branch gets its own URL
• Free Tier - Generous limits for personal projects

Setting Up Your First Project

Prerequisites

• Cloudflare account (free)
• GitHub repository with your static site
• Domain registered with Cloudflare (optional)

Step 1: Connect Your Repository

1. Navigate to the Cloudflare Dashboard
2. Select "Pages" from the sidebar
3. Click "Create a project"
4. Choose "Connect to Git"
5. Authorize Cloudflare to access your GitHub account
6. Select your repository from the list

Step 2: Configure Build Settings

For static HTML sites like this one:

Framework preset: None
Build command: (leave empty)
Build output directory: /
Root directory: (leave empty)

For popular frameworks, Cloudflare auto-detects settings:

React: npm run build → build/
Vue.js: npm run build → dist/
Next.js: npm run build → out/
Gatsby: npm run build → public/

Step 3: Deploy

Click "Save and Deploy" - your site deploys automatically to a *.pages.dev subdomain.

Custom Domain Configuration

Adding your own domain is straightforward when using Cloudflare DNS:

For Cloudflare-Managed Domains

1. Go to your Pages project settings
2. Navigate to "Custom domains"
3. Click "Set up a custom domain"
4. Enter your domain (e.g., splarf.com)
5. Cloudflare automatically creates the necessary DNS records

For External DNS Providers

Type: CNAME
Name: www (or @)
Target: your-project.pages.dev

Advanced Configuration

Environment Variables

Set build-time variables for different environments:

Production:
  API_URL=https://api.mysite.com
  ANALYTICS_ID=GA_PROD_123

Preview:
  API_URL=https://staging-api.mysite.com
  ANALYTICS_ID=GA_DEV_456

Redirects and Rewrites

Create a _redirects file in your project root:

# Redirect old blog URLs
/blog/* /posts/:splat 301

# SPA fallback
/* /index.html 200

# API proxy
/api/* https://backend.example.com/api/:splat 200

Headers Configuration

Add security headers with _headers:

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Content-Security-Policy: default-src 'self'

/api/*
  Access-Control-Allow-Origin: *
  Cache-Control: no-cache

Performance Optimization

Caching Strategy

Cloudflare automatically caches static assets with optimal headers:

• HTML - Short cache, respects ETags
• CSS/JS - Long cache with version control
• Images - Automatic compression and format optimization

Image Optimization

Enable automatic image optimization:

<img src="/hero.jpg" 
     alt="Hero image"
     loading="lazy"
     width="800" 
     height="400">

Cloudflare automatically serves WebP/AVIF to supporting browsers.

Monitoring and Analytics

Built-in Analytics

Pages provides detailed metrics:

• Page views and unique visitors
• Geographic distribution
• Response time by region
• Cache hit ratios

Real User Monitoring

Enable RUM for performance insights:

<script defer src='https://static.cloudflareinsights.com/beacon.min.js' 
        data-cf-beacon='{"token": "your-token"}'></script>

CI/CD Integration

Automatic Deployments

Every git push triggers a new deployment:

• Main branch → Production deployment
• Feature branches → Preview deployments
• Pull requests → Automatic preview links

Build Hooks

Trigger deployments from external systems:

curl -X POST "https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/YOUR_HOOK_ID"

Security Features

DDoS Protection

Automatic protection against attacks with Cloudflare's global network.

Access Control

Restrict access to preview deployments:

• Password protection
• IP allowlisting
• Cloudflare Access integration
• GitHub team restrictions

Cost Analysis

Free Tier Limits

• 1 build at a time
• 500 builds per month
• 100GB bandwidth
• Unlimited sites and custom domains

Pro Features ($20/month)

• 5 concurrent builds
• 5,000 builds per month
• Priority support
• Advanced analytics

Common Troubleshooting

Build Failures

# Check build logs in dashboard
# Verify package.json scripts
# Ensure dependencies are in package.json, not devDependencies

DNS Issues

# Check DNS propagation
dig yourdomain.com

# Verify CNAME records
dig www.yourdomain.com CNAME

Cache Issues

# Purge cache via dashboard
# Add cache-busting query parameters
# Check cache headers in browser dev tools

Migration from Other Platforms

From Netlify

• Export build settings and environment variables
• Convert _redirects file (syntax is similar)
• Update DNS records to point to Pages

From Vercel

• Convert vercel.json to _redirects
• Migrate environment variables
• Update custom domain configuration

Best Practices

• Branch Protection - Require PR reviews before production
• Environment Separation - Use different configs for staging/prod
• Asset Optimization - Compress images and minify code
• Performance Monitoring - Set up alerts for slow pages
• Security Headers - Implement CSP and other protections

Cloudflare Pages represents the evolution of static site hosting - combining the simplicity of traditional hosting with the power of modern edge computing. For projects like this blog, it provides enterprise-grade infrastructure with zero operational overhead.

The combination of git-based workflows, global distribution, and automatic optimizations makes it an ideal choice for developers who want to focus on building rather than managing infrastructure.