How to Deploy a Site on Cloudflare Pages (Fast & Free)

Introduction

Cloudflare Pages is a free hosting service for static sites (HTML, CSS, JS) with a super-fast global CDN and automatic HTTPS. In this guide, you’ll deploy your site to Cloudflare Pages in a few minutes.

Why use Cloudflare Pages?

• Free for personal projects
• Global CDN + HTTP/2 by default (very fast)
• Automatic SSL
• GitHub/GitLab integration and previews on every pull request

Prerequisites

• A GitHub or GitLab repository containing your site or frontend app
• For React/Vite/etc., make sure you can run a local build that outputs a folder like dist/ or build/

Step 1: Sign in and connect your repo

1. Go to Cloudflare Dashboard → Pages.
2. Click Create a project → Connect to Git.
3. Authorize GitHub/GitLab and pick your repository.

Step 2: Configure build settings

Cloudflare often detects your framework automatically. If not:

• Static HTML site
  • Build command: (leave empty)
  • Output directory: / (or the folder containing index.html)
• React (CRA)
  • Build command: npm run build
  • Output directory: build
• Vite / Svelte / Vue / Astro
  • Build command: npm run build
  • Output directory: dist

Click Save and Deploy. Cloudflare will build and publish your site.

Step 3: Visit your site

You’ll get a URL like:

https://your-project.pages.dev

Open it — you’re live

Step 4: Add a custom domain (optional)

1. In your Pages project, go to Custom Domains.
2. Add your domain (e.g., mysite.com).
3. Cloudflare will guide you through updating your DNS to their nameservers or adding CNAME records if your domain already uses Cloudflare. SSL is automatic.

Troubleshooting

• 404s on client-side routing (React, Vue, etc.)? Add a _redirects file in the output folder with:

/* /index.html 200

• Wrong output directory? Double-check the folder your build creates (e.g., dist vs build).
• Environment variables? Use Settings → Environment Variables and rebuild.

Conclusion

Cloudflare Pages is one of the fastest ways to publish static sites with a CDN built in. Next up in Hosting Academy: Firebase Hosting for simple sites or SPAs with easy CLI tools.