Getting Started with Cloudflare Pages: Free, Fast Hosting for Modern Websites

What is Cloudflare Pages?

Cloudflare Pages is a JAMstack platform for deploying static sites and modern web applications directly to Cloudflare's edge network. You connect a GitHub or GitLab repository, configure your build settings, and every push to your main branch automatically builds and deploys your site to over 300 data centres worldwide.

The free tier is remarkably generous: 500 builds per month, unlimited sites, unlimited bandwidth and unlimited requests. There is no traffic limit, no bandwidth overage charge and no surprise bill. For most small to mid-sized websites, the free tier is all you will ever need.

Pages supports any static site generator (Astro, Hugo, Eleventy, Next.js static export, Gatsby, Jekyll and more) as well as plain HTML, CSS and JavaScript. If your build process outputs a directory of static files, Cloudflare Pages can host it. With Pages Functions, you can also add server-side logic using Cloudflare Workers, enabling dynamic API routes alongside your static content.

How it differs from traditional hosting

Traditional web hosting works like this: you rent a server (physical or virtual) in a specific location, you upload your files to that server, and when someone visits your site, the server processes the request and sends back the page. If the visitor is far from the server, the response is slow. If traffic spikes, the server can become overloaded. You are responsible for server maintenance, security updates and backups.

Cloudflare Pages works fundamentally differently. Your site's files are distributed across Cloudflare's global network of over 300 locations. When someone visits your site, they are served from whichever location is closest to them. There is no single server to overload. There is no server maintenance, no security patching, no scaling to worry about. Your site is as close to every visitor as physically possible.

This edge-deployed model means a visitor in Tokyo gets the same speed as a visitor in London. Traditional hosting would require either multiple servers in different regions (expensive and complex) or accepting that distant visitors get a slower experience. With Pages, global performance is the default, not an upgrade.

Step-by-step setup

Getting a site deployed on Cloudflare Pages takes about ten minutes. Here is the process:

1. Create a Cloudflare account at dash.cloudflare.com. The free tier covers everything you need. You do not need to add a domain or set up any other Cloudflare services first.
2. Navigate to Workers & Pages in the left sidebar, then click "Create application" and select the "Pages" tab.
3. Connect your Git provider. Authorise Cloudflare to access your GitHub or GitLab account and select the repository containing your site's source code.
4. Configure build settings. Select your framework preset (Cloudflare auto-detects most frameworks). Set the build command (e.g., npm run build) and the build output directory (e.g., dist or public). For plain HTML sites with no build step, leave the build command empty and set the output directory to the folder containing your HTML files.
5. Deploy. Click "Save and Deploy." Cloudflare will clone your repository, run your build command and deploy the output. Your site will be available at a *.pages.dev subdomain within minutes.

Every subsequent push to your production branch triggers an automatic rebuild and deployment. Pull requests get their own preview deployments with unique URLs, making it easy to review changes before they go live.

Custom domains

Your site initially lives at your-project.pages.dev, but you will want to connect your own domain. In your Pages project settings, go to "Custom domains" and add your domain name. If your domain's DNS is already managed by Cloudflare (recommended), the DNS records are added automatically. If your DNS is elsewhere, you will need to add a CNAME record pointing to your Pages project.

Cloudflare automatically provisions and renews SSL certificates for custom domains at no cost. HTTPS is enforced by default, with no configuration needed. Your site will have a valid SSL certificate within minutes of adding the domain.

Build settings for common frameworks

Cloudflare Pages includes presets for popular frameworks, but here are the correct settings for the most common ones:

• Astro: Build command: npm run build — Output directory: dist
• Hugo: Build command: hugo — Output directory: public
• Eleventy (11ty): Build command: npx @11ty/eleventy — Output directory: _site
• Next.js (static): Build command: npx next build — Output directory: out
• Vite / React: Build command: npm run build — Output directory: dist
• Plain HTML: Build command: (leave empty) — Output directory: / or the folder containing your files

You can also specify the Node.js version using the NODE_VERSION environment variable if your project requires a specific version.

Environment variables

Many build processes need environment variables for API keys, feature flags or configuration. Cloudflare Pages supports environment variables in your project settings under "Settings > Environment variables." You can set different values for production and preview deployments, which is useful for separating staging and production API endpoints.

Sensitive values (API keys, tokens) are encrypted and not visible after saving. They are injected into the build environment at build time and are never exposed in your deployed site's source code. For runtime secrets used by Pages Functions, use Cloudflare's secrets management.

Cloudflare Pages vs Vercel vs Netlify

Cloudflare Pages, Vercel and Netlify are the three major platforms for deploying modern static and JAMstack sites. All three offer free tiers, Git-based deployments, preview URLs and custom domains. The differences are in pricing, performance and ecosystem.

Pricing: Cloudflare Pages has the most generous free tier. Unlimited bandwidth and requests with no overage charges. Vercel's free tier includes 100GB bandwidth per month and has overage pricing. Netlify's free tier includes 100GB bandwidth with $55/100GB overage. For high-traffic sites, Cloudflare's pricing advantage is significant.

Performance: Cloudflare's edge network is the largest of the three, with over 300 locations. Vercel has approximately 70 edge locations. Netlify has a CDN but with fewer points of presence. In practice, all three deliver fast load times for most visitors, but Cloudflare's network density gives it an edge for global audiences.

Developer experience: Vercel has the best developer experience for Next.js projects (Vercel created Next.js). Netlify has excellent form handling, identity management and serverless functions built in. Cloudflare Pages integrates tightly with Workers, KV, D1 and other Cloudflare services. Choose based on which ecosystem fits your stack.

Server-side rendering: Vercel excels at SSR with Next.js. Netlify supports SSR via adapters. Cloudflare Pages supports SSR through Pages Functions (powered by Workers). If you need SSR, evaluate which platform best supports your framework.

When to use Pages vs Workers

Cloudflare Pages is for websites: HTML, CSS, JavaScript and assets served to browsers. Cloudflare Workers is for server-side code: APIs, middleware, authentication, data processing and anything that needs to run on the server.

Pages Functions bridges the two. You can add a functions/ directory to your Pages project and write server-side API routes that deploy as Workers automatically. This lets you build a full-stack application within a single Pages project: static front end plus dynamic API routes, all deployed together.

Use Pages when your site is primarily static content with optional API routes. Use Workers directly when you are building a standalone API, a proxy, a webhook handler or any server-side application that does not need a static front end.

Performance benefits

Cloudflare Pages delivers exceptional performance because of three factors working together:

Edge deployment means your files are served from the nearest data centre to each visitor. Time to First Byte (TTFB) is typically under 50 milliseconds globally, compared to 200-500ms for a traditional single-location server.

Automatic optimisation includes HTTP/3, Brotli compression and efficient cache headers. Your assets are compressed and cached at the edge without any configuration. The Cloudflare network handles TLS termination at the edge, eliminating the latency of connecting back to an origin server for HTTPS.

No cold starts means your site is always ready to serve. Unlike serverless functions that can have cold start delays, static assets on Pages are always hot and available. Response times are consistently fast regardless of traffic patterns or time of day.

For most static sites deployed to Cloudflare Pages, you can expect Lighthouse performance scores of 95-100 with minimal effort. The platform handles the infrastructure optimisation so you can focus on building a great site.

---