Skip to main content

Cloudflare Pages

WebHostingUI is built as a static Docusaurus site, which makes Cloudflare Pages a straightforward deployment target.

The intended canonical hostname is webhostingui.pages.dev, although the same project can be mapped to a custom domain later.

Build contract​

  • Build command: pnpm build
  • Output directory: build
  • Node version: 20
  • Pages project name: webhostingui
  • Source-controlled Pages config: wrangler.toml
  1. Push this repository to your Git provider.
  2. Create a new Cloudflare Pages project from that repository.
  3. Set the build command to pnpm build.
  4. Set the build output directory to build.
  5. Set the production branch to the branch you want to deploy from.
  6. Keep the production URL aligned with https://webhostingui.pages.dev unless you intentionally switch to a custom domain.

GitHub Actions deployment​

This repository now includes .github/workflows/deploy-pages.yml, which builds the site on every push to main and deploys the generated build/ directory to Cloudflare Pages through Wrangler.

Add these repository secrets before relying on that workflow:

  • CLOUDFLARE_API_TOKEN
  • CLOUDFLARE_ACCOUNT_ID

The workflow uses the project name webhostingui, matching the intended webhostingui.pages.dev hostname.

Wrangler configuration note​

wrangler.toml is committed so the Pages build output directory is versioned alongside the site. Cloudflare documents that once you use a Wrangler config for Pages, that file becomes the source of truth for the project configuration.

If you already created the Pages project manually in the dashboard and want to preserve its current settings, sync first:

pnpm dlx wrangler pages download config webhostingui

Review the generated file before deploying, especially if you later add bindings or environment-specific configuration.

Direct upload fallback​

If you need a one-off deploy from a local checkout, build first and then upload the static output:

pnpm install
pnpm build
pnpm deploy:cloudflare

Environment notes​

  • No environment variables are required for the current static build.
  • pnpm-lock.yaml is committed so Cloudflare Pages can install with pnpm consistently.
  • Keep the url value in docusaurus.config.ts aligned with the live hostname for correct canonical links and social previews.

Local verification​

pnpm install
pnpm typecheck
pnpm build
pnpm serve

Why this setup works well​

  • Docusaurus builds to static files.
  • Cloudflare Pages serves the static build/ output directly.
  • The docs and gallery structure stay easy to maintain without adding a custom runtime.
  • The same build output is verified in CI before production deploys.