How to Deploy Your Website to Cloudflare Pages for Free: Complete Tutorial

Total cost: $0. Time required: 15 minutes. Global CDN included.

I've deployed 6 websites on Cloudflare Pages in the past month. Zero hosting fees, lightning-fast load times worldwide, and automatic SSL certificates. Here's exactly how to do it, step by step.

Why Cloudflare Pages Beats Other Free Hosting

Before diving into the tutorial, let me explain why Cloudflare Pages is superior to alternatives:

Versus GitHub Pages

Versus Netlify Free

Versus Vercel Free

What You'll Need

Method 1: Direct Upload (Fastest Start)

Perfect if you have static HTML files or a built project ready to deploy.

Step 1: Create Cloudflare Account

  1. Go to dash.cloudflare.com/sign-up
  2. Enter your email and create a password
  3. Verify your email address
  4. Complete the welcome flow (you can skip domain transfer for now)

Step 2: Access Cloudflare Pages

  1. From your Cloudflare dashboard, click "Pages" in the left sidebar
  2. Click "Create a project"
  3. Choose "Upload assets" tab

Step 3: Prepare Your Files

For static sites: Ensure you have an index.html file in your project root.

For built frameworks: Upload your build folder (usually dist/, build/, or public/).

File structure example:

my-website/
├── index.html
├── styles.css
├── script.js
├── images/
│   └── logo.png
└── pages/
    ├── about.html
    └── contact.html

Step 4: Upload and Deploy

  1. Give your project a name (this becomes your subdomain: project-name.pages.dev)
  2. Drag and drop your files or folder into the upload area
  3. Click "Create project"
  4. Wait 30-60 seconds for deployment
  5. Your site is live at https://your-project-name.pages.dev

Method 2: GitHub Integration (Recommended)

This method enables automatic deployments when you push code changes.

Step 1: Prepare Your GitHub Repository

  1. Create a new repository on GitHub (or use existing)
  2. Push your website files to the repository
  3. Ensure your project structure matches your framework's requirements

Step 2: Connect to Cloudflare Pages

  1. In Cloudflare Pages, click "Create a project"
  2. Choose "Connect to Git" tab
  3. Click "Connect GitHub" and authorize Cloudflare
  4. Select your repository from the list

Step 3: Configure Build Settings

Cloudflare automatically detects most frameworks, but here are common configurations:

Static HTML Sites

React (Create React App)

Next.js

Vue.js

Gatsby

Hugo

Step 4: Deploy

  1. Click "Save and Deploy"
  2. Cloudflare builds your site (watch the build log for errors)
  3. After 1-3 minutes, your site is live
  4. Future commits to your main branch automatically trigger deployments

Adding a Custom Domain

The .pages.dev subdomain works fine, but custom domains look more professional and are better for SEO.

Step 1: Add Domain to Your Project

  1. In your Pages project, go to "Custom domains" tab
  2. Click "Set up a custom domain"
  3. Enter your domain (e.g., mywebsite.com)
  4. Click "Continue"

Step 2: Configure DNS

You have two options:

Option A: Use Cloudflare as Your DNS Provider (Recommended)

  1. Add your domain to Cloudflare (separate from Pages)
  2. Change your domain's nameservers to Cloudflare's
  3. In Pages, the domain will automatically configure
  4. Benefits: Full Cloudflare integration, better performance, free SSL

Option B: Keep Your Current DNS Provider

  1. Add a CNAME record: www CNAME your-project.pages.dev
  2. Add A records for root domain:
    • @ A 192.0.2.1
    • @ AAAA 100::
  3. Wait for DNS propagation (up to 24 hours)

Step 3: Verify Domain

  1. Back in Pages, click "Activate domain"
  2. SSL certificate automatically provisions (may take 10-15 minutes)
  3. Your site is now live on your custom domain

Advanced Configuration

Environment Variables

If your build process needs environment variables:

  1. In your Pages project, go to "Settings" → "Environment variables"
  2. Add variables for Production and/or Preview environments
  3. Common variables: NODE_ENV, API_URL, SITE_URL

Custom Headers

Add a _headers file to your build output for custom HTTP headers:

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

/api/*
  Access-Control-Allow-Origin: *

Redirects and URL Rewriting

Create a _redirects file for URL redirects:

# _redirects file
/old-page.html /new-page.html 301
/blog/* /articles/:splat 301
/* /index.html 200

Functions (Serverless)

Add dynamic functionality with Cloudflare Pages Functions:

  1. Create a functions/ directory in your project
  2. Add JavaScript files for API endpoints
  3. Example: functions/api/hello.js:
export async function onRequest(context) {
  return new Response('Hello World!');
}

This creates an endpoint at /api/hello.

Performance Optimization

Enable Auto Minify

  1. Go to your Cloudflare dashboard (not Pages)
  2. Select your domain
  3. Go to "Speed" → "Optimization"
  4. Enable "Auto Minify" for CSS, JavaScript, and HTML

Configure Caching

  1. In Cloudflare dashboard, go to "Caching" → "Configuration"
  2. Set "Browser Cache TTL" to "4 hours" or higher
  3. Enable "Always Online" for better reliability

Image Optimization

  1. Enable "Polish" in "Speed" → "Optimization"
  2. Set to "Lossless" or "Lossy" based on your needs
  3. Enable "WebP" format support

Monitoring and Analytics

Web Analytics (Free)

  1. In your Pages project, go to "Analytics" tab
  2. Enable "Web Analytics"
  3. Add the provided script to your website
  4. View visitor data, page views, and performance metrics

Real User Monitoring

  1. In Cloudflare dashboard, enable "Speed" → "Real User Monitoring"
  2. Get insights into actual user experience
  3. Monitor Core Web Vitals automatically

Troubleshooting Common Issues

Build Failures

Problem: Build fails with dependency errors

Solutions:

404 Errors on Refresh

Problem: Single-page app routes return 404 when accessed directly

Solution: Add this to your _redirects file:

/* /index.html 200

SSL Certificate Issues

Problem: SSL certificate not provisioning for custom domain

Solutions:

Large File Upload Limits

Problem: Upload fails due to file size limits

Solutions:

Best Practices

Project Organization

  1. Use descriptive project names: company-website not site1
  2. Organize by environment: Separate projects for staging and production
  3. Document build settings: Keep a README with build instructions

Security

  1. Use HTTPS only: Enable "Always Use HTTPS" in Cloudflare
  2. Set security headers: Use _headers file for CSP and other headers
  3. Limit access: Use Cloudflare Access for staging sites

Performance

  1. Optimize images: Use modern formats (WebP) and appropriate sizes
  2. Minify code: Enable auto-minification in Cloudflare
  3. Use CDN efficiently: Leverage long cache times for static assets

Cost Comparison

Here's what you'd pay with other providers for similar features:

Feature Cloudflare Pages Netlify Vercel AWS S3+CloudFront
Hosting Free Free Free* ~$5-15/month
Custom Domain Free Free Free Free
SSL Certificate Free Free Free $0.75/month
Analytics Free $9/month $20/month $2-5/month
Functions Free (100k/month) $25/month $20/month ~$10/month

*Vercel free tier has commercial use restrictions

Real-World Performance Results

Here are actual performance metrics from our deployed sites:

TheOpsDesk.ai Performance

Performance Comparison

Same website tested on different platforms:

Advanced Use Cases

Multi-Language Sites

Deploy multiple versions with URL-based routing:

# _redirects
/en/* /en/index.html 200
/es/* /es/index.html 200
/fr/* /fr/index.html 200

API Proxy with Functions

Create API endpoints that proxy to external services:

// functions/api/proxy.js
export async function onRequest(context) {
  const response = await fetch('https://external-api.com/data', {
    headers: {
      'Authorization': context.env.API_KEY
    }
  });
  return response;
}

A/B Testing

Use Cloudflare Workers for A/B testing:

// functions/_middleware.js
export async function onRequest(context) {
  const variant = Math.random() < 0.5 ? 'A' : 'B';
  context.data.variant = variant;
  return context.next();
}

Migration from Other Platforms

From GitHub Pages

  1. Your existing repository works directly
  2. Connect via GitHub integration
  3. Update DNS to point to Cloudflare
  4. Zero downtime migration possible

From Netlify

  1. Export your repository settings
  2. Convert netlify.toml to _redirects and _headers
  3. Migrate environment variables
  4. Test thoroughly before DNS change

From Traditional Hosting

  1. Convert dynamic content to static (if possible)
  2. Move server-side logic to Cloudflare Workers/Functions
  3. Set up CI/CD with GitHub
  4. Gradually migrate traffic

Future-Proofing Your Deployment

Stay Updated

Scale Considerations

Conclusion

Cloudflare Pages offers the best free hosting solution available in 2026. With global CDN, automatic SSL, and seamless GitHub integration, it rivals paid solutions while costing nothing for most use cases.

Key advantages:

Best for: Static sites, JAMstack applications, documentation sites, portfolios, small business websites, and side projects.

Not ideal for: Database-heavy applications, large file storage, or complex server-side processing (though Functions handle many use cases).

Start with the direct upload method to get familiar, then move to GitHub integration for automatic deployments. Your wallet and your users will thank you for the performance.

Need help with your specific deployment? Drop a comment at TheOpsDesk.ai or follow our social channels for deployment tips, performance optimizations, and real-world case studies.