Complete Cloudflare Pages Hosting Guide 2026

Deploy static sites, frameworks, serverless backend — unlimited bandwidth, free SSL, preview deployments

What is Cloudflare Pages — Different from Traditional Hosting

Cloudflare Pages is a platform for hosting static websites, Progressive Web Apps, and single-page applications using Cloudflare's global CDN network, with servers distributed worldwide including Southeast Asia and Thailand.

The main difference from traditional hosting (shared hosting, VPS) is that Cloudflare Pages doesn't use a single server. Instead, it uses edge computing, which means your website is cached and delivered from the server closest to each visitor. This ensures maximum speed regardless of their location.

Unlike traditional hosting where you manage server maintenance, updates, security patches, and backups yourself, Cloudflare Pages handles everything automatically. You simply push code to GitHub and Cloudflare Pages deploys it via their CI/CD pipeline instantly.

Another advantage is clear environment separation. You get Production, Preview, and Development environments out of the box. This lets you test changes safely before releasing them to production, reducing the risk of breaking your live website.

Cloudflare Pages is built on the same infrastructure as Cloudflare Workers, so your code runs on the same powerful edge network that handles billions of requests daily.

Cloudflare Pages Free Plan — What Can You Do

Cloudflare Pages' free tier is generously packed with features and makes an excellent choice for startups, blogs, portfolios, and small-to-medium websites.

Unlimited Bandwidth: There's no monthly bandwidth limit. You can serve as much data to visitors as needed without worrying about overage charges—very different from many hosting providers that cap bandwidth.

Unlimited Requests: HTTP requests are also unlimited. Whether you're fetching data, uploading files, or communicating with APIs, there are no request quotas.

500 Builds Per Month: You can build and deploy your website up to 500 times monthly, which is plenty for small publishers, content creators, and even full-time developers.

Free Custom Domains: Point your own domain to Cloudflare Pages at no cost. No markup or hidden domain fees.

Automatic HTTPS: Cloudflare Pages manages SSL/TLS certificates automatically. All traffic is encrypted by default, and certificates renew themselves—you never have to think about it.

Functions Included: Free tier includes Cloudflare Functions, providing 100,000 serverless function invocations per day—enough for most small-scale backends.

Preview Deployments: Every pull request on GitHub gets an auto-generated preview URL so you can test changes before merging to production.

Frameworks Supported by Cloudflare Pages

Cloudflare Pages supports over 100 frameworks and generators, covering virtually every modern web technology stack.

Next.js: The React framework, fully supported for both static generation (SSG) and server-side rendering (SSR) via Cloudflare Functions. Best-in-class performance on Cloudflare's network.

Nuxt.js: Vue.js framework for building universal apps. Both Nuxt 2 and 3 work perfectly. Great for JAMstack projects.

SvelteKit: Modern, lightweight framework supporting SSR, SSG, and incremental static regeneration. Very fast builds and excellent developer experience.

Hugo: Static site generator written in Go, extremely fast. Perfect for blogs and content-heavy websites. Builds in milliseconds even for thousands of pages.

Jekyll: Popular for blogs and documentation. Built-in support makes deploying Jekyll sites to Cloudflare Pages trivial.

Gatsby: React framework emphasizing static generation with GraphQL for data fetching. Excellent for content marketing websites and blogs.

Astro: Perfect for content-driven sites. Ships zero JavaScript by default while still supporting interactive components—fantastic for SEO and performance.

VitePress: Built on Vite, ideal for documentation sites and technical content with minimal overhead.

MkDocs: Python-based documentation generator with beautiful themes. Deploy directly to Cloudflare Pages.

Hexo: Node.js blogging framework, popular in Asia. Full support for deploying to Cloudflare Pages.

How to Deploy Your Website on Cloudflare Pages from GitHub

The deployment process is remarkably straightforward and takes just a few minutes.

Step 1 — Create GitHub Repository: First, create a new GitHub repository and push your code to it. Alternatively, if you already have a repository, simply link it.

Step 2 — Access Cloudflare Dashboard: Visit dash.cloudflare.com and log into your Cloudflare account.

Step 3 — Click Pages: In the left sidebar menu, find Pages and click it.

Step 4 — Connect GitHub Account: Click "Connect to Git," select GitHub, and authorize Cloudflare to access your GitHub repositories.

Step 5 — Select Repository: Choose the repository you want to deploy and click "Begin Setup."

Step 6 — Configure Build: The system will ask about your framework (Next.js, Hugo, etc.), build command, and output directory. In most cases, Cloudflare auto-detects these settings.

Step 7 — Deploy: Click "Save and Deploy" and Cloudflare Pages begins building and deploying your website.

Within minutes you'll have a live URL like project-name.pages.dev and your website is live globally!

Setting Up Custom Domain and SSL on Cloudflare Pages

After deployment, you probably want to use your own domain instead of the default Cloudflare Pages subdomain.

Step 1 — Add Custom Domain: Go to your project settings in Cloudflare Pages Dashboard, navigate to Custom Domains, and click "Add Custom Domain."

Step 2 — Enter Domain Name: Type your domain (for example: example.com or blog.example.com).

Step 3 — Configure DNS: Cloudflare Pages provides DNS instructions. Typically you need to change the CNAME record to point to Cloudflare Pages.

Step 4 — Setup Cloudflare Nameservers (Optional): If you use Cloudflare for DNS management too, this step becomes simpler—just set the proxy status to "Proxied" (orange cloud).

SSL/TLS Certificate: Cloudflare Pages automatically provisions and manages SSL/TLS certificates for your custom domain. Certificates renew automatically, and HTTPS is enforced by default.

Enabling HTTPS redirection (forcing all HTTP traffic to HTTPS) takes one click in the Cloudflare Dashboard under SSL/TLS settings.

Cloudflare Pages Functions — Serverless Backend

Cloudflare Pages Functions let you write serverless backend code on the Cloudflare edge network, using the same runtime as Cloudflare Workers but integrated directly into Pages.

With Functions, you can build APIs, fetch data from databases, send emails, perform image processing, and do almost any backend task—all on serverless infrastructure without managing servers.

Creating Functions: Create a functions folder at your repository root, then create JavaScript files like functions/api/hello.js. After deploying, the function is accessible at URLs like example.com/api/hello.

Example Function: A simple function returning JSON looks like:

export async function onRequest(context) {
  return new Response(JSON.stringify({ message: 'Hello World' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Free tier allows 100,000 function invocations daily, sufficient for most small websites. You can store state in external databases like MongoDB, Fauna, or Supabase.

Environment Variables and Preview Deployments

Cloudflare Pages supports environment variables for securely storing secrets, API keys, database credentials, and configuration without exposing them in your repository.

Setting Up Variables: In your Pages project settings, go to Environment variables and add the variables you need. You can set different values for Production and Preview environments.

Using in Code: In Next.js or Node.js, access them via process.env.VARIABLE_NAME. For client-side code, add the NEXT_PUBLIC_ prefix so the browser can access them.

Preview Deployments: Every pull request automatically gets a preview deployment with its own unique URL. This lets you and your team review changes before they go live. Preview deployments stay active for 6 months after creation.

This workflow prevents bugs, lets non-technical stakeholders review changes, and provides a clean audit trail of all website modifications.

Cloudflare Pages vs Vercel vs Netlify — Comparison

Cloudflare Pages: Strengths: unlimited bandwidth, global CDN, generous free tier, functions included, seamless DNS integration if using Cloudflare DNS. Weaknesses: smaller community than Vercel/Netlify.

Vercel: Strengths: exceptional Next.js optimization (Vercel created Next.js), excellent performance analytics built-in, fast preview deployments, strong community. Weaknesses: free tier bandwidth limited to 100GB/month.

Netlify: Strengths: simple deployment workflow like Cloudflare Pages, built-in form handling, identity authentication, extensive plugin ecosystem. Weaknesses: limited build minutes (300/month on free tier), bandwidth quotas, some features require paid plans.

Summary: For educational institutions, beginners, and static websites that don't need deep SSR, choose Cloudflare Pages. For Next.js optimization, choose Vercel. For form handling and authentication needs, choose Netlify.

Limitations of Cloudflare Pages — When to Choose Traditional Hosting

Limitations: Cloudflare Pages excels at static sites and JAMstack apps but isn't suitable for applications requiring heavy server-side processing, long-running background jobs, high memory usage, or file-system permission management.

Build timeout is 15 minutes, so optimize your build process if projects take longer to compile.

When to Choose Traditional VPS Hosting: If you need WordPress, Node.js applications with persistent databases, video streaming, machine learning models, or long-running background jobs, a VPS is the right choice. Traditional hosting gives you full server control and can handle complex applications.

As a beginner, blogger, portfolio creator, or static content site builder, Cloudflare Pages is the smart choice—it's free, fast, and requires minimal maintenance.