解决Hexo博客更新后网页不刷新的问题

解决Hexo博客更新后网页不刷新的问题

问题描述

我在用Hexo搭建个人博客（www.dioye.com）时，遇到了一个令人头疼的问题：每次更新博客内容后，访问网站时网页内容不会自动刷新。无论是PC端还是手机端，都显示旧内容，甚至手机上显示的是半年前的内容！PC端和手机端都显示旧内容，尤其是手机端甚至显示半年前的内容！只有手动清除浏览器缓存、开启隐身模式或按Ctrl+F5强制刷新才能看到最新内容。这严重影响用户体验，我在网上查了好久都没找到解决办法。后来试着问了AI，没想到几分钟就定位到问题，改了几行Nginx配置就搞定了。。。。

博客环境

  • 框架：Hexo，主题为hexo-theme-anzhiyu（基于hexo-theme-butterfly修改）
  • 服务器：腾讯云服务器，使用宝塔面板管理
  • 存储：腾讯云服务器
  • 域名：阿里云（www.dioye.com）
  • 问题表现：
    • 更新博客后，网页内容不刷新。
    • 手机端显示半年前的内容，PC端需强制刷新。
    • 手动清除缓存或隐身模式可看到新内容。

问题原因分析

一开始我以为是主题或Hexo框架的问题，在网上查了好多教程，折腾了半天没效果。后来问了AI，才发现问题出在Nginx的缓存配置上。默认配置没有为HTML文件设置缓存策略，导致浏览器默认缓存，更新后内容不刷新。

以下是宝塔面板的默认Nginx配置（nginx配置修改下里直接搜索expires就能看到）

1
2
3
4
5
6
7
8
9
location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$
{
expires      30d;
}

location ~ .*.(js|css)?$
{
expires      12h;
}

之后根据AI的建议将配置文件修改为以下内容保存并且重启nginx就搞定了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      7d;
    add_header Cache-Control "public";
}
location ~ .*\.(js|css)$
{
    expires      12h;
    add_header Cache-Control "public, must-revalidate";
}
location ~ .*\.html$
{
    expires      12h;
    add_header Cache-Control "public, max-age=43200, must-revalidate";
}