本博出现图碎问题说明

杜老师说

作者 Teacher Du

2025年2月11日 00:00

近期本博访问时出现了图碎问题，经排查系 CDN 回源失败导致的。有小伙伴可能会说，保证成功就可以修复了，其实没有那么简单。本文简单描述下存储节点数据流，顺便科普一下如何清理单站数据缓存。

数据流向

通过下图可以看出，图片文件保存在主机上，通过转换处理为 WebP 格式文件，经由 CDN 回源并实现访问加速：

问题分析

超时原因一般两种，一种是因线路问题导致回源超时，一种是因主机没有及时返回数据造成。

本地图片经由 WebP 中间件处理，再回源给 CDN 做反代，经查是 WebP 服务突然宕机导致 CDN 未收到响应数据导致超时。

除超时问题外，因无返回数据导致 CDN 响应 404，而服务器设置 404 默认跳转至主站首页，这就导致好多小伙伴频繁刷新页面依然不显示图片。

解决方案

目前已关闭 CDN，流量直接回源至源主机，缺点就是会影响访问的速度。带调试维护后会重新挂上 CDN。

WebP 图片转换是为了减少图片体积，进而减轻带宽压力「轻量级服务器有流量的限制」因此不能暂停使用，已修改其参数，尽量保障响应的成功率。

如之前有访问记录，会留下 404 跳转缓存，需要清理相关数据。

有小伙伴分享了两种清理缓存的方法，需要的小伙伴可以参考操作。

清理缓存

首先进入到浏览器的开发者工具，一般浏览器点击F12即可，进入更多设置，勾选 Disable cache while DevTools is open 项：

或者切换到网络标签页，勾选禁用缓存，刷新页面即可「注意保持开发者工具一直处于开启的状态」

Hugo 渲染超时问题的解决笔记

杜老师说

作者 Teacher Du

2025年2月5日 00:00

hehe 童鞋选择将所有的站点托管到杜老师这「是收费的」这样就可以专心维护网站的内容，也不用费心思在运维上。在做站点迁移时遇到了 Hugo 框架的一个报错，原因是使用 Hugo 搭建相册网站需要遍历大量图片，而在生成站点文件时出现了超时问题，本文记录解决方法。

报错信息

1
2
3

ERROR render of "page" failed: "/home/runner/work/photo/photo/themes/gallery/layouts/_default/single.html:3:5": execute of template failed: template: _default/single.html:3:5: executing "main" at <partial "gallery.html" .>: error calling partial: partial "gallery.html" timed out after 30s. This is most likely due to infinite recursion. If this is just a slow template, you can try to increase the 'timeout' config setting.
Total in 60412 ms
Error: error building site: render: failed to render pages: render of "page" failed: "/home/runner/work/photo/photo/themes/gallery/layouts/_default/single.html:3:5": execute of template failed: template: _default/single.html:3:5: executing "main" at <partial "gallery.html" .>: error calling partial: partial "gallery.html" timed out after 30s. This is most likely due to infinite recursion. If this is just a slow template, you can try to increase the 'timeout' config setting.

注意：杜老师是通过 GitHub Actions 来部署，逻辑是先准备 Hugo 的运行环境，再根据站点的数据渲染站点文件。在生成站点文件时出现如上错误信息。

解决思路

从错误信息看，Hugo 网站在渲染页面时出现了问题，具体是 gallery.html 这个 partial 文件在执行时超时了，并且怀疑是由于无限递归导致的。

首先检查 gallery.html 中代码。无限递归问题可能是 gallery.html 中调用了自身，或者在调用其它 partial 时形成了循环。仔细检查文件，确保没有递归调用自己或其它可能导致循环的部分。

其次检查数据结构。如果 gallery.html 中依赖某些数据结构，可能是数据结构中存在循环引用。例如，某个对象或者列表在渲染时不断递归调用。

再次增加超时时间。如果确认不是无限递归问题，而是模板渲染确实很慢，可以尝试增加超时时间。在 Hugo 的配置文件中，增加 timeout 配置项，如 timeout = '60000'。

然后优化模板性能。如果模板渲染确实很慢，可能是模板的代码过于复杂。可以尝试优化模板代码，减少不必要循环和复杂逻辑。

接着调试模板。使用 Hugo 的调试工具来逐步检查模板的执行过程。可通过在模板中添加日志输出来帮助调试。

再者检查依赖插件。如果网站使用第三方插件或依赖，可能是插件导致了问题。尝试禁用插件，看看能否解决问题。

最后检查 Hugo 的版本。确保使用的 Hugo 版本是最新的。旧版本可能存在已知的 bug，而新版本可能已修复了这些问题。

阅读视图