Fixing Missing CSS Styles on Cloudflare Pages (Integrity Attribute Issue)

When deploying a Hugo site (specifically using the Blowfish theme) to Cloudflare Pages, you might encounter an issue where the site loads without any styling (CSS). The browser console often shows an error related to Subresource Integrity (SRI) check failure.

The Problem

#

The site looks “garbled” or unstyled. Checking the browser’s developer console (F12) reveals errors like:

Failed to find a valid digest in the ‘integrity’ attribute for resource ‘…’ with computed SHA-512 integrity ‘…’. The resource has been blocked.

The Cause

#

This happens because of Cloudflare’s Auto Minify feature.

1. Hugo generates the CSS/JS files and calculates their cryptographic hash (SRI), adding it to the integrity attribute in the HTML.
2. Cloudflare Pages (if Auto Minify is enabled) modifies these files to reduce their size.
3. The Browser downloads the modified file, calculates its hash, and compares it with the one in the HTML. Since the file changed, the hashes don’t match, and the browser blocks the resource for security reasons.

The Solution

#

Since Cloudflare deprecated the Auto Minify feature in August 2024, the previous recommendation of disabling it is no longer applicable.

The primary solution now is to remove the integrity attributes from your Hugo templates. This prevents the browser from blocking the resources due to hash mismatches caused by Cloudflare’s edge optimization or compression.

Remove Integrity Attributes

#

You need to override the theme’s template to remove the integrity attribute from CSS and JS tags.

Steps:

1. Copy the Template: Copy the head.html partial from the theme to your project’s layouts folder: themes/blowfish/layouts/partials/head.html -> layouts/partials/head.html

2. Edit the File: Open the new layouts/partials/head.html file.

3. Remove Integrity Attributes: Find all <link> and <script> tags that have an integrity attribute and remove the integrity="{{ ... }}" part.

   Example (CSS):

   Change this:

   <link
     type="text/css"
     rel="stylesheet"
     href="{{ $bundleCSS.RelPermalink }}"
     integrity="{{ $bundleCSS.Data.Integrity }}">
   

   To this:

   <link
     type="text/css"
     rel="stylesheet"
     href="{{ $bundleCSS.RelPermalink }}">
   

   Example (JS):

   Change this:

   <script
     src="{{ $js.RelPermalink }}"
     integrity="{{ $js.Data.Integrity }}"></script>
   

   To this:

   <script
     src="{{ $js.RelPermalink }}"></script>
   

4. Rebuild: Rebuild your site. The resources will now load without integrity checks, resolving the issue.