Visual Storyteller | Navy

Hugo版本导致Cloudflare Pages静态样式失效的解决办法

hugo生成的静态html页面上传至cloudflare pages中托管时,如果hugo版本是extended版本,大概率css样式会失效,因为cloudflare默认提供的hugo版本是标准版本。这是我花了很大精力才找出来的原因。



Solution

1. Set the Hugo Version in Cloudflare Pages

To ensure your site uses the correct version of Hugo, you need to set an environment variable in Cloudflare Pages.

Steps:

  1. Go to your Cloudflare Pages dashboard and select your project.

  2. Navigate to Settings > Environment variables.

  3. Add a new environment variable:

    • Name: HUGO_VERSION
    • Value: For example, 0.111.3-extended

      Note: Replace 0.111.3 with the version required by your site, and make sure to include the -extended suffix.

  4. Save the changes.


2. Regenerate the Static Site

After setting the environment variable, you need to regenerate and upload your static site files to ensure everything works correctly.

Command:

hugo --gc --minify