add dynamic base URL config for Zola preview deployments (#21999)

* add dynamic base URL config for Zola preview deployments

* use config.toml base_url

* Update src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx

---------

Co-authored-by: Kody Jackson <[email protected]>

Author: welpo

src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx

@@ -110,4 +110,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
+
 <Render file="framework-guides/learn-more" params={{ one: "Zola" }} />