Jekyll应用部署Heroku后CSS/JS修改不生效的缓存问题求助

我之前踩过一模一样的坑！结合Jekyll和Heroku的特性，你遇到的CSS/JS修改不生效、仅隐身模式可见的问题，核心原因不是Heroku的构建缓存（毕竟你已经按官方教程清过了），而是下面这几个常见的缓存环节出了问题：

可能的原因 #

• 浏览器本地强缓存：普通浏览模式下，浏览器会根据资源的Cache-Control等响应头缓存静态资源，而隐身/无痕模式会默认禁用本地缓存，所以能看到最新修改。
• Jekyll未启用资源指纹：Jekyll默认不会给CSS/JS文件添加唯一哈希后缀，导致浏览器认为资源文件名没变，一直复用旧缓存。
• Heroku路由层缓存：Heroku的反向代理路由可能会缓存静态资源，即使你清了构建缓存，路由层的缓存依然存在。

针对性解决办法 #

1. 启用Jekyll资源指纹（最彻底的长期方案） #

这个方案能从根源解决问题：每次修改CSS/JS后，Jekyll会自动给文件名加上哈希后缀（比如style.css变成style-abc123def.css），浏览器看到新文件名就会主动请求最新资源。

• 打开项目根目录的_config.yml，添加或修改以下配置：

  assets:
    source: assets  # 你的资源存放目录，根据实际情况调整
    destination: assets
    fingerprint: true
  

• 在你的HTML模板（比如_includes/head.html）里，用Jekyll的asset_path标签引用资源，替换原来的直接路径：

  <link rel="stylesheet" href="{{ site.baseurl }}{% asset_path style.css %}">
  <script src="{{ site.baseurl }}{% asset_path main.js %}"></script>
  

• 提交修改后重新推送到Heroku，之后所有资源更新都会自动生成新的哈希文件名，彻底避免缓存混淆。

2. 给资源URL加版本戳（临时应急方案） #

如果不想修改Jekyll配置，临时让用户看到更新，可以在资源URL后追加动态版本参数，比如用当前构建时间：

<link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css?v={{ site.time | date: '%Y%m%d%H%M' }}">
<script src="{{ site.baseurl }}/assets/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>

每次Jekyll构建时，site.time会生成新的时间戳，浏览器会把带新参数的URL当成新资源加载。不过这个方案不如指纹优雅，因为文件名本身没变，部分CDN可能仍会缓存旧资源。

3. 配置缓存控制响应头 #

通过Jekyll的_headers文件，自定义Heroku返回的缓存头，平衡缓存效率和更新及时性：

• 在项目根目录创建_headers文件，添加以下内容（可根据需求调整）：

  # 全局禁用强缓存（适合开发阶段）
  /*
    Cache-Control: no-cache, no-store, must-revalidate
    Pragma: no-cache
    Expires: 0
  
  # 或者给静态资源设置合理的缓存时间（生产阶段推荐）
  /assets/*.css
    Cache-Control: public, max-age=3600, must-revalidate
  /assets/*.js
    Cache-Control: public, max-age=3600, must-revalidate
  

  上面的配置让CSS/JS缓存1小时，到期后浏览器会验证资源是否更新，既利用缓存提升加载速度，又能保证更新及时生效。

4. 强制浏览器刷新（用户端临时操作） #

如果只是自己测试需要看到最新效果，可以用快捷键强制刷新：

• Windows/Linux：Ctrl + Shift + R
• Mac：Cmd + Shift + R
  这个操作会绕过浏览器本地缓存，重新加载所有资源，但只能临时解决，无法让所有用户自动看到更新。

内容的提问来源于stack exchange，提问作者Seybol