DevTools

Cloudflare Pages Full Setup Guide

Deploy your first static site in under 10 minutes—no servers, no costs, just pure speed and simplicity.

By YureiBlog • November, 2025 • 8 min read

Cloudflare Pages turns your HTML/CSS/JS into a global site with one click. No DevOps degree required—this guide walks you through every step, from account to live deploy.

By the end, you'll have a custom domain, HTTPS, and CDN caching. Free tier: Unlimited bandwidth, 500 builds/month. Let's launch!

Cloudflare Pages turns your GitHub repo into a live, globally distributed website in under 30 seconds — completely free with unlimited bandwidth. You push code, it auto-deploys with preview URLs for every branch, and serves your HTML/CSS/JS from the edge using the same CDN as Netflix. No build servers, no config files — just code and go. Perfect for portfolios, blogs, or learning projects like YureiBlog.

Prerequisites (2 Minutes)

Before starting, grab these:

  • GitHub Account: Free at github.com. Upload your site files here.
  • Domain (Optional): Free .pages.dev subdomain or buy one ($1–10/yr via Namecheap).
  • Your Site Files: HTML/CSS/JS folder (e.g., index.html, style.css).
⚠️ Tip: If no GitHub, use "Direct Upload" for one-off deploys.
1

Create a Cloudflare Account

Sign up—it's free and takes 1 minute.

  1. Go to dash.cloudflare.com/sign-up.
  2. Enter email → Verify → Set password.
  3. Skip "Add Site" prompt → Go to Pages in sidebar.
  4. In case if you missed it, on sidebar do to Build > Compute & AI > Workers & Pages
2

Connect GitHub Repository

Link GitHub for auto-deploys on commits.

  1. In Pages dashboard → Connect to Git.
  2. Select GitHub → Authorize (one-time).
  3. Create new repo on GitHub: mkdir my-site && cd my-site && git init && git remote add origin [your-repo-url] && git add . && git commit -m "Initial" && git push.
  4. Back in Cloudflare → Select repo → Install & Authorize.
⚠️ Note: Grant access to specific repos or all for simplicity.
3

Create Your First Project

Set up the project basics.

  1. Click Create a project → Connect to Git.
  2. Choose repo → Begin setup.
  3. Project name: Auto-fills (e.g., my-site.pages.dev).
  4. Production branch: main (default).
4

Configure Build & Output

Tell Cloudflare how to build your site.

  1. Framework preset: None (for pure HTML) or select (e.g., Astro).
  2. Build command: Leave blank for static (or npm run build for frameworks).
  3. Build output directory: / for root or dist for built sites.
  4. Root directory: / (default).
  5. Environment variables: Add if needed (e.g., API keys).
  6. Click Save and Deploy.
Example for pure HTML: Build command = blank, Output = /
⚠️ Limits: 20-min build timeout, 20k files max.
5

Add Custom Domain (Optional)

Upgrade from .pages.dev to your domain.

  1. After deploy → Custom domains tab.
  2. Click Set up a domain → Enter (e.g., yureiblog.com).
  3. Cloudflare adds DNS records (CNAME for www, A for root).
  4. Go to your registrar (e.g., Namecheap) → Update nameservers to Cloudflare's (ns1.cloudflare.com, etc.).
  5. Wait 5–60 min for propagation → Free SSL auto-activates.
6

Deploy, Preview & Test

Go live and iterate.

  1. Deploy triggers → Visit [project].pages.dev.
  2. Edit files → git commit -m "Update" && git push → Auto-redeploy in 30s.
  3. Preview branches: Create preview.yureiblog.com for testing.
  4. Test: Check HTTPS, speed (pagespeed.web.dev), mobile view.

I’m a full-time employee who runs this blog as a side hustle, so spending ₹500–1000/month on hosting or security tools was never an option. Cloudflare gives me everything for free that would easily cost ₹20,000–30,000/year elsewhere: DDoS protection, SSL, caching, image optimization, analytics — the list goes on. My site stays online even when it gets shared on Reddit, loads instantly everywhere, and never shows “Not Secure”. Honestly, I sleep better knowing random bots can’t crash my little project. If you’re a student, indie maker, or just someone learning in public like me — Cloudflare is the single best free decision you’ll ever make for your website.

Related Guides