Skip to main content

Cloudflare Pages Deployment Guide

This guide covers deploying a static site or documentation project (e.g. Docusaurus) to Cloudflare Pages via GitHub integration.


Prerequisites​

  • A Cloudflare account with access to the dashboard
  • A GitHub repository containing your project
  • Appropriate permissions to install GitHub Apps in your organization

1. Create a New Cloudflare Pages Application​

  1. Log in to the Cloudflare dashboard.
  2. Navigate to Build → Compute → Workers & Pages.
  3. Click Create Application.
  4. Under the Pages section, click Get started (next to "Looking to deploy Pages?").
  5. Select Import an existing Git repository → Get started.

2. Connect Your GitHub Repository​

  1. Click Connect GitHub to authorize Cloudflare's GitHub App.
  2. Select your GitHub organization (e.g. your-org).
  3. Choose Only select repositories, then select the target repository (e.g. your-org/your-repo).
  4. Click Install and authorize to grant Cloudflare access.

3. Configure the Build Settings​

After connecting your repository, click Begin setup and fill in the build configuration:

SettingValue
Project nameyour-project-name
Production branchmain
Framework presete.g. Docusaurus (select as appropriate)
Build commandnpm run build
Build output directory/build

Note: Adjust the framework preset, build command, and output directory to match your project. For example, Next.js uses .next, and plain HTML projects may not require a build command at all.

Click Save and deploy to trigger the first deployment.


4. Custom Domains (Optional)​

Once deployed, Cloudflare assigns a .pages.dev preview URL (e.g. your-project.pages.dev).

To add a custom domain:

  1. Go to Workers & Pages → your project → Custom Domains tab.
  2. Click Set up a custom domain.
  3. Enter your domain and follow the DNS configuration steps.

5. Environment Variables and Secrets​

To configure runtime environment variables:

  1. Go to Workers & Pages → your project → Settings tab.
  2. Scroll down to Variables and Secrets.
  3. Add variables as needed:
TypeVariable NameValue
SecretMY_SECRET_KEYyour-secret-value
TextNODE_ENVproduction

Important: Secrets are encrypted and not visible after saving. Variables take effect on the next deployment — re-deploy if you add them after initial setup.


6. Subsequent Deployments​

Cloudflare Pages automatically deploys on every push to the configured production branch (main). Pull requests generate isolated preview deployments with unique URLs, allowing you to review changes before merging.


Troubleshooting​

  • Build fails: Check the build log in the Deployments tab. Ensure your build command and output directory are correct.
  • Missing environment variables: Variables added after a deployment require a re-deploy to take effect.
  • GitHub connection issues: Re-authorize via Settings → Builds & deployments → Connected Git repository.