Pages foundations

Choose Pages for a site

Understand the Pages deployment model and decide when a static or full-stack site fits it.

8 minute lesson

~~~

Cloudflare Pages publishes a built directory to Cloudflare’s network. You hand it a folder of HTML, CSS, JavaScript, and images, and it serves those files from data centers around the world. There is no web server to configure, no certificate to renew, no process to keep alive.

A Pages project keeps everything about one site together: production and preview deployments, build settings, environment values, and domain configuration.

Start from the build output

Pages deploys the framework’s production build output, not its development server. Every framework has a command that produces final files:

npm run build
# ...
# dist/index.html
# dist/blog/index.html
# dist/assets/app.3f9c1a.css

For Astro that output lands in dist, for Next.js in .next, for plain sites wherever you put your files. Identify that directory precisely — it is the single most common Pages misconfiguration. If the project points at the repository root instead of the output directory, the deploy succeeds and every page 404s, because Pages is serving your source tree instead of your site.

The output directory is declared in the project settings or in wrangler.jsonc:

{
  "name": "my-site",
  "pages_build_output_dir": "./dist"
}

Once this key exists in wrangler.jsonc, the repository configuration becomes the source of truth for those settings.

When Pages fits

Pages is the right call when most responses can be generated before the request arrives. A blog, documentation, a marketing site, a portfolio: the build produces every page, and requests only read files. A static file is a wonderful deployment unit because almost nothing can break at request time.

Pages can also run Functions for the parts that cannot be static — a contact form endpoint, a webhook receiver. That capability comes later in this course. The principle stays: static files remain the cheapest and simplest response when no server work is required, so keep the dynamic surface small.

If every page needs per-request server rendering, sessions, and database reads, you are describing an application. That still runs on Cloudflare, but the design conversation starts with Workers rather than a static directory.

Now build a small site locally and identify the exact directory that contains the deployable HTML, CSS, JavaScript, and images. List its contents and confirm an index.html sits at its root.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →