Stop 18 · DeploymentTopics · 3/9

Cloudflare Pages

In short

Cloudflare runs one of the biggest networks on the internet. With Cloudflare Pages, your site's files are served from data centres close to your users, and small bits of server code can run there too.

Cloudflare's Git-based static/frontend hosting platform, built on their global edge network, with tight integration to Cloudflare Workers for serverless logic.

The jaadu hands a milk packet to a neighbour from a small booth, with more booths down the street.

Think of it like this

Milk booths in every colony

Instead of everyone travelling to one big dairy, small booths in every colony keep fresh packets ready. Cloudflare keeps copies of your site in many cities, so a user in Kochi and one in Delhi both get it from somewhere nearby.

Watch it happen

Served from nearby

User in Kochi

Nearby edge

Function

GET /

1/5The request goes to the closest Cloudflare data centre, not one far-off server.

The big ideas

What you need to know

Served from the edge

"Edge" means servers spread across many cities. Your static files are cached and served from the one closest to the user.

Git or direct upload

Connect a GitHub or GitLab repo, or upload a built folder using the Wrangler CLI.

Pages Functions

Put files in a functions folder and they run as server code on Cloudflare's network, powered by Workers.

_redirects and _headers

Plain text files in your output folder control redirects and response headers.

See it in code

Walk through the code

bash

1# Build locally, then upload the output folder2npm run build3npx wrangler pages deploy dist4 5# functions/api/hello.ts becomes /api/hello6# export const onRequest = () => new Response("Namaste from the edge");

1/3Build locally, then upload the dist folder with Wrangler.

Wrangler is Cloudflare's CLI. A file inside functions becomes a route based on its path, and its onRequest handler returns a normal Response object.

Save yourself the pain

Common mistakes

Oops

Using Node-only packages like fs inside Pages Functions.

Do this instead

Functions run on Workers, which use web-standard APIs like fetch and Response. Check that a package supports Workers before using it.

Oops

Forgetting to set the build output directory in the project settings.

Do this instead

Set it to your tool's output, like dist for Vite, or Pages will deploy the wrong folder.

Your mission

Put a site on the edge

~25 min

Quick check

Why might a user in Chennai load your Cloudflare Pages site faster than one hosted on a single server in the US?

Go deeper

1Deploy a project to Cloudflare Pages from a GitHub repo.
2Learn how it differs from Vercel/Netlify in its edge-first architecture.
3Try pairing it with a Cloudflare Worker for a small API endpoint.