Cloudflare Pages — Deploy Static & Full-Stack Sites

In this tutorial you will learn what Cloudflare Pages is, how it deploys both static sites and full-stack applications at the edge, and why it is a top choice for modern web developers. A fast, global CDN matters because every second of load time impacts user engagement and conversion rates. DodaZIP uses Cloudflare Pages to serve its marketing site and documentation from 300+ edge locations, achieving sub-200ms load times worldwide.

What Is Cloudflare Pages

Cloudflare Pages is a Jamstack platform that builds, deploys, and hosts static sites with built-in support for Serverless functions. It integrates directly with Git repositories so that every push triggers an automatic build and deploy. Unlike traditional hosting, Pages runs your site on Cloudflare's global edge network, meaning visitors download assets from the nearest data center.

Static Sites benefit from instant cache purges, automatic SSL certificates, and unlimited bandwidth on the free plan. Full-stack apps add Serverless functions that run at the edge, eliminating the need for a dedicated backend server.

How Cloudflare Pages Works

flowchart LR
  A[Git Push] --> B[Cloudflare Pages]
  B --> C[Build framework]
  C --> D[Deploy to edge]
  D --> E[Global CDN]
  E --> F[Visitor]
  style D fill:#f90,color:#fff
  style E fill:#f90,color:#fff

Creating Your First Pages Project

You need a Git Repository with static files or a framework project. Cloudflare Pages detects popular frameworks automatically and sets the correct build command.

// A simple static site with HTML and JavaScript
const siteTitle = 'My Cloudflare Pages Site';
const pages = ['Home', 'About', 'Contact'];

pages.forEach(function(page) {
  console.log('Building page:', page);
});

// Expected output:
// Building page: Home
// Building page: About
// Building page: Contact

// Generate a sitemap for your Pages site
const baseUrl = 'https://example.com';
const routes = ['/', '/about', '/contact'];

const sitemap = routes.map(function(route) {
  return baseUrl + route;
});

console.log(sitemap.join('\n'));
// Expected output:
// https://example.com/
// https://example.com/about
// https://example.com/contact

// Check if Cloudflare is serving your site
async function checkCloudflare(url) {
  const response = await fetch(url);
  const server = response.headers.get('server');
  return server && server.includes('cloudflare');
}

checkCloudflare('https://your-site.pages.dev').then(function(result) {
  console.log('Served by Cloudflare:', result);
  // Expected output: Served by Cloudflare: true
});

Deployment Configuration

Cloudflare Pages reads a _headers and _redirects file from your build output directory to configure Caching and URL forwarding.

# _headers file example
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

FAQ

Practice Questions

1. How does Cloudflare Pages differ from traditional hosting providers?
2. What file formats does Cloudflare Pages automatically detect for framework configuration?
3. Why is edge deployment beneficial for global audiences?

Summary

Cloudflare Pages combines static hosting, Git-based continuous deployment, and Serverless functions into one platform. Sites are deployed to Cloudflare's global edge network for fast performance. You can start with the free plan and scale as your project grows.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.