diff --git a/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx index 2e2a581537479e..a0e20cecb32347 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx @@ -105,4 +105,18 @@ base_url = "https://my-zola-project.pages.dev" Every time you commit new code to your Zola site, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes look to your site before deploying them to production. +### Handling Preview Deployments + +When working with Cloudflare Pages, you might use preview deployments for testing changes before merging to your main branch. However, these preview deployments use different URLs (like `https://your-branch-name.my-zola-project.pages.dev`), which can cause issues with asset loading if your `base_url` is hardcoded. + +To fix this, modify your build command in the Cloudflare Pages configuration to dynamically set the base URL depending on the environment: + +```sh +if [ "$CF_PAGES_BRANCH" = "main" ]; then zola build; else zola build --base-url $CF_PAGES_URL; fi +``` + +This command uses: +- The `base_url` set in `config.toml` when building from the `main` branch +- The preview deployment URL (automatically provided by Cloudflare Pages as `$CF_PAGES_URL`) for all other branches +