1. 问题描述

  本地使用 Hugo 启动时，网站样式能够正常显示，但部署到 GitHub Pages 后，样式无法加载（如上图所示）。通过浏览器 F12 调试，控制台报错信息如下：

1

Failed to find a valid digest in the 'integrity' attribute for resource 'https://lz0o0.github.io/assets/css/stylesheet.6da9a63d25a9608bca2f7f907a0，30e887a7dd3c3f3918e4cc113129361414bda.css' with computed SHA-256 integrity '9J1myq6eoP1D8h8p5xqNPihFF+13Dyqob6ASlTrTye8='. The resource has been blocked.

  SRI和校验失败： Subresource Integrity (SRI) 是一种安全机制，用于确保在加载资源时，它们的内容与预期的哈希值一致。如果资源的实际哈希值与 HTML 文件中 integrity 属性定义的不一致，浏览器会阻止加载资源。

2. 原因&解法

  根据报错信息，大致确认问题是因为 SRI 校验时hash值不匹配，CSS加载失败，从而导致网页样式无法正常显示，无法看到多彩的网页。公网上主要的解释和解决办法，主要是以下三种：

1. Cloudflare对 JS 和 CSS，默认执行"Auto Minify"，文件压缩后和 hugo 的处理存在冲突，导致校验失效；对应禁用选项，刷新缓存即可
2. 修改 Hugo 的文件，禁用指纹校验选项。具体而言，在config.yaml或者hugo.yaml中添加以下代码

1
2
3

params:
    assets:
        disableFingerprinting: true

3. 修改 html 文件索引入口，禁用 SRI 校验：将文件`(themes\PaperMod\layouts\partials\head.html)`中的 **integrity** 参数索引都置空`(integrity="")`
  • 方法①本鲤不知道在哪配置，没有实操。但我认为可能是压缩的问题，因为本地加载并未出现类似问题，不一致大概来自云端的处理
  • 方法②比较合理，然而，本鲤实际配置后没什么效果，可能是 hugo 不内置该参数了
  • 使用方法③，本鲤成功显示了CSS样式。大部分教程只提示改(integrity="{{ $stylesheet.Data.Integrity }}")，但我建议你把文件中所有的 integrity 参数索引都置空，因为另外一处索引时可能也会报错，因此建议都置空
    Mind！ 可按照231的顺序，如能解决最好，前端的问题比较多样，本鲤发现甚至有因为LF和CRLF问题的（比较有用的讨论或文档，附在文末

3. 小结

  本文描述了Hugo+Papermod部署到github pages时，由于SRI校验失败，导致CSS文件无法正常加载，不显示网页样式内容的问题。在文档中列举了三种主要的解决方法，并且分析了可能的问题（may优化导致校验失效）。博主实际通过修改配置的html索引，禁用 SRI 校验选项，解决了该问题
  如有意指点，或碰到问题，欢迎留言讨论~

refer