博客网站 自动更新

Posted by farmer3-c on February 16, 2026

问题 1:如何让网站自动更新,无需手动刷新

问题描述: 添加新文章或变化后,需要手动刷新才能看到更新

解决方案:

  • 添加了 Jekyll Livereload 支持( npm run start:live )
  • 配置了 Service Worker 自动更新检测
  • 添加了 BrowserSync 作为可选方案 修改文件:

  • package.json - 添加新脚本命令
  • Gruntfile.js - 配置 BrowserSync

问题 2:还是会有刷新确认按钮

问题描述: 网站检测到更新时,会显示 “Content updated. REFRESH” 按钮,需要手动点击

解决方案:

  • 修改 sw-registration.js ,移除手动刷新提示,改为直接自动刷新 修改文件:

  • js/sw-registration.js - 移除 createSnackbar 调用,直接使用 location.reload()

问题 3:网站不停自动更新(无限循环)

问题描述: 打开网站后不停自动刷新

解决方案:

  • 移除了自动刷新逻辑
  • 改用 Stale-While-Revalidate 策略:先显示缓存,后台更新
  • 用户下次访问时自然看到新内容 修改文件:

  • sw.js - 移除 UPDATE_FOUND 消息发送
  • js/sw-registration.js - 移除自动刷新

问题 4:删除的文章仍在网站上显示

问题描述: 从仓库删除的文章,网站上还能看到

解决方案:

  • 优化 Service Worker 策略,HTML 页面优先从网络获取
  • 检测到 404 时自动从缓存中删除
  • 更新缓存版本,清理旧缓存 修改文件:

  • sw.js - 实现智能缓存策略,导航请求优先网络

问题 5:导航栏显示文章标题

问题描述: 导航栏出现了文章标题(”编译实践Lv1. main 函数”)

根本原因:

  • 之前误将一篇博客文章放到了 css/ 文件夹
  • 那篇文章有 layout: post ,被 Jekyll 当作页面处理
  • 导航栏循环显示所有有 title 的页面 解决方案:

  • 彻底解决方案: 硬编码导航栏,只显示固定页面(Home、About、Archive)
  • 从 git 历史中彻底移除误放的文章
  • 清理临时文件 修改文件:

  • _includes/nav.html - 硬编码导航链接,移除循环
  • 删除了 css/2026-02-15-lv1-main-.md

问题 6:About 和 Archive 页面 404

问题描述: 点击导航栏的 About 和 Archive 跳转到 /about.html 和 /archive.html ,显示 404

原因:

  • 博客使用 permalink: pretty 配置
  • 正确的 URL 应该是 /about/ 和 /archive/ (带斜杠) 解决方案:

  • 修改导航链接,使用正确的 pretty permalink 格式 修改文件:

  • _includes/nav.html - 链接改为 /about/ 和 /archive/

📊 最终效果总结

功能 状态 说明
导航栏 ✅ 正常 只显示 Home、About、Archive
About 页面 ✅ 正常 访问 /about/
Archive 页面 ✅ 正常 访问 /archive/
Service Worker ✅ 优化 Stale-While-Revalidate 策略
缓存管理 ✅ 智能 HTML 优先网络,404 自动清理
本地开发 ✅ 支持 npm run start:live 自动刷新

🗂️ 所有修改的文件

  1. package.json - 添加脚本命令和依赖
  2. Gruntfile.js - 配置 BrowserSync
  3. js/sw-registration.js - 移除自动刷新
  4. sw.js - 智能缓存策略,多次版本更新(v1→v2→v3→v4→v5)
  5. _config.yml - 更新 exclude 列表
  6. _includes/nav.html - 硬编码导航,修复链接格式