手动刷新页面时Jekyll无法正确提供文件内容的问题

问题核心原因 #

1. Jekyll构建机制限制：使用jekyll serve --no-watch时，Jekyll不会自动监测源文件变更并重新生成_site目录内容。你修改的是源目录下的test.txt，但页面请求的是_site目录中已生成的旧版本文件，所以刷新页面无法获取最新内容。
2. 浏览器缓存干扰：即使_site文件已更新，浏览器可能仍缓存了旧的响应内容，导致刷新后显示旧数据。

具体解决方案 #

方案1：手动触发站点构建 #

修改test.txt后，在终端执行以下命令重新生成_site目录：

jekyll build

执行完成后刷新页面，即可获取到最新的test.txt内容。

方案2：强化前端请求的缓存控制 #

针对浏览器缓存问题，可通过两种方式优化你的fetch请求：

• 强制刷新缓存：将请求的cache参数从'no-cache'改为'reload'，强制浏览器直接向服务器请求最新资源：

let bannerInit = {
  method: 'GET',
  cache: 'reload', // 替换原no-cache设置
};

• 添加随机参数：在请求URL后追加时间戳参数，确保每次请求的URL唯一，彻底绕过浏览器缓存：

const url = `http://127.0.0.1:4000/test.txt?t=${new Date().getTime()}`

额外检查点 #

确认test.txt放在Jekyll源目录的根位置（或非特殊处理目录），确保Jekyll在构建时会将其复制到_site目录中，避免因目录配置问题导致文件未被正确同步。

内容的提问来源于stack exchange，提问作者R.T. Canterbury