The Ultimate Beginner's Guide to Building a Website with Cloudflare Pages (2026)
Cloudflare Pages turned deployment into a single git push. Connect a repository and every commit builds on their edge network, served from hundreds of cities with automatic SSL and unlimited free bandwidth on static requests. Here is the shortest honest path from an empty folder to a live site.
Push, connect, deploy
Start with a plain repository:
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/you/your-repo.git
git push -u origin main
In the Cloudflare dashboard, open Workers and Pages, create a Pages project, and connect that repository. The framework preset auto-detects most stacks; the one setting worth adding yourself is a NODE_VERSION environment variable so the build container matches your local Node. Each push then runs install and build and hands you a production URL at project.pages.dev plus a preview URL for every branch — which makes pull requests reviewable in a browser instead of imagination. If a build fails, the dashboard streams the full log, so a broken dependency install is a scroll, not a mystery.
Run the edge locally
Wrangler is the CLI, and npx wrangler pages dev gives you a local server that mirrors the production edge runtime, bindings included. Scaffold with whatever you already use — Astro and Hugo work just as well, and Next.js is one preset away:
npm create vite@latest my-site -- --template react-ts
cd my-site && npm install && npm run dev
If it works against Wrangler locally, the deploy behaves the same way. Same runtime, same result.
Functions and bindings
Add a functions directory and file-based routing turns it into an API — the file path is the route. Bind D1 (SQLite at the edge), KV or R2 through wrangler.toml, then read them from env, no servers to rent:
// functions/api/items.ts — answers GET /api/items
export const onRequestGet: PagesFunction = async ({ request, env }) => {
const rows = await env.DB.prepare("SELECT * FROM items").all();
return Response.json(rows.results);
};
The two fixes everyone needs
When a single-page app 404s on refresh, that is routing, not bad luck: add a public/_redirects file containing /* /index.html 200 and Pages serves your index for every path. For a custom domain, point a CNAME at project.pages.dev, let Universal SSL cover the certificate, and switch on Always Use HTTPS. That is genuinely the whole ceremony.
Uptime is a dashboard metric to me; in Gaza it is a lifeline. Volunteer teams there keep shelter maps, medical supply lists and family-locator pages online through blackouts, on eSIMs and whatever charge remains. Resilient infrastructure is not an abstraction there — it is survival, and I think of them every time a deploy goes green.
Pages ships one quietly kind feature: instant rollback, one click back to the last good build. We run the same safety net at HTG Travels — when an airline cancels or a schedule collapses, we rebook and reroute until your plan is whole again. Deploy your site yourself; let us handle the departures.
