From ac8848c320fc4047ab0f4aac4546d11d8b911857 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar?= Date: Sat, 26 Apr 2025 21:03:28 +0200 Subject: [PATCH 1/2] add dynamic base URL config for Zola preview deployments --- .../pages/framework-guides/deploy-a-zola-site.mdx | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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 2e2a581537479e0..6da5b32ffe4ae31 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,17 @@ 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'll often 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 --base-url 'https://my-zola-project.pages.dev/'; else zola build --base-url $CF_PAGES_URL; fi +``` + +This command uses: +- Your production URL when building from the main branch +- The preview deployment URL (automatically provided by Cloudflare Pages as `$CF_PAGES_URL`) for all other branches + From 0b8a38646147a9eca53f9cc77fd5fc7fc580f569 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar?= Date: Sat, 26 Apr 2025 21:24:34 +0200 Subject: [PATCH 2/2] use config.toml base_url --- .../docs/pages/framework-guides/deploy-a-zola-site.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 6da5b32ffe4ae31..3d79e8dc3e9ee77 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 @@ -110,12 +110,13 @@ Every time you commit new code to your Zola site, Cloudflare Pages will automati When working with Cloudflare Pages, you'll often 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 --base-url 'https://my-zola-project.pages.dev/'; else zola build --base-url $CF_PAGES_URL; fi +if [ "$CF_PAGES_BRANCH" = "main" ]; then zola build; else zola build --base-url $CF_PAGES_URL; fi ``` This command uses: -- Your production URL when building from the main branch +- 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