Skip to content

Deploy on Cloudflare Pages

This page shows the exact steps to host this documentation website on Cloudflare Pages.

Prerequisites

  1. Git repository is pushed to GitHub (or GitLab)
  2. Cloudflare account with Pages access
  3. Node 20+ available in build environment

Build settings for Cloudflare Pages

Use these values in Pages project setup:

  • Framework preset: None
  • Build command: npm run docs:build
  • Build output directory: docs/.vitepress/dist
  • Root directory: / (repository root)

Required environment variables:

  • NODE_VERSION=20
  • DOCS_SITE_URL=https://your-docs-domain.com

DOCS_SITE_URL is used to auto-generate:

  1. sitemap.xml hostname
  2. robots.txt sitemap link

Step-by-step deployment

  1. Push this project to GitHub.
  2. In Cloudflare Dashboard, open Workers & Pages -> Create application -> Pages.
  3. Choose Connect to Git and select this repo.
  4. Add build settings shown above.
  5. Click Save and Deploy.

After the first build completes, Cloudflare provides a live *.pages.dev URL.

Add custom domain (optional)

  1. Open your Pages project.
  2. Go to Custom domains.
  3. Add docs.yourdomain.com (or any preferred subdomain).
  4. If your DNS is already in Cloudflare, records are auto-configured.

Local commands

bash
npm run docs:dev
npm run docs:build
npm run docs:preview

Auto-generated SEO files

When you run npm run docs:build:

  • VitePress generates sitemap.xml
  • Build script generates robots.txt and points to your sitemap URL

Troubleshooting

  • Build fails with Node error -> set NODE_VERSION=20
  • 404 on pages -> verify output directory is docs/.vitepress/dist
  • Sitemap URL wrong -> set DOCS_SITE_URL correctly in Cloudflare Pages env variables
  • Styles missing -> clear cache and redeploy

Built for school teachers and admins