Cloudflare Pages

Cloudflare is a cloud solutions provider with a huge proprietary content delivery network (CDN). Like Netlify or Vercel, Cloudflare Pages makes the deployment process flexible and easy. You can add a GitHub repo to the service and build & host Zola-based websites after each PR automatically.

🔗Step-by-step

  1. Sign in or create a new Cloudflare account and choose "Pages" on the right nav column
  2. Press the button "Create a project"
  3. Select the GitHub repo that contains your Zola website and connect it to Cloudflare Pages
  4. Click "Begin setup"
  5. Enter your project name. Keep in mind that if you would like to use the default Pages domain (pages.dev), this will be your website's future URL ("yourprojectname.pages.dev"). Additionally, select a production branch.
  6. In Build settings, select Zola as the Framework preset. Build command and Build output directory will be filled automatically.
  7. Toggle Environment variables below and add ZOLA_VERSION as a variable name. Use 0.17.2 or a different Zola version as the value.
  8. Finally, save and deploy.

Your website is now built and deployed to Cloudflare's network! You can add a custom domain or modify settings in the Pages dashboard.

You may find documentation and guides like Getting started with Cloudflare Pages and Deploying Zola with Cloudflare Pages in the Developers portal.

🔗Handling preview deployments

When working with Cloudflare Pages, you'll often use preview deployments for testing changes before merging to your main branch. By default, these preview deployments use different URLs (like https://your-branch-name.your-project.pages.dev), which can cause issues with asset loading if your base_url is hardcoded in your zola.toml.

To fix this, modify your build command in the Cloudflare Pages configuration to dynamically set the base URL depending on the environment:

if [ "$CF_PAGES_BRANCH" = "main" ]; then zola build; else zola build --base-url $CF_PAGES_URL; fi

This command:

  • Uses your zola.toml base_url when building from the main branch
  • Uses the preview deployment URL (automatically provided by Cloudflare Pages as $CF_PAGES_URL) for all other branches