基于七牛云自建图床

起因是打开博客的速度非常慢，且与将要打开的页面的图片数量呈正相关。因此初步判断是加载图片的速度过于慢，导致了页面加载速度受到了拖累。之前使用的是 聚合图床，加载速度慢且不稳定，更换图片方案势在必行。

为了解决这个问题，考虑了本地图片和线上图床两个方案，其中线上图床又分为免费图床和付费图床两个方案。免费图床中，SM.MS 图床 最被广泛推荐，但是现在已经关闭注册；其次是 路过图床，但是也有每日八张图片的上传限制。

我参考以下教程，尝试了自行搭建付费图床，采用了 七牛云 的云服务，顺便安装了 Typora 和 Picgo，打算使用 Typora+Picgo+七牛云 的架构，编辑.md 文件时可以直接插入图片，使图片自动上传到七牛云的仓库。

参考如下：
PicGo–图床工具的简单学习
Typora 安装与配置
使用 PicGo 配置七牛云图床
七牛云配置阿里云域名详细过程记录
七牛云+PicGo 设置图床报错 StatusCodeError: 401
七牛云成功保存但无法显示和访问
七牛云图床配置 https

配置好了 Typora+Picgo+七牛云之后遇到了一个问题，七牛云没有 SSL 证书 只能生成 http 链接，而浏览器在处理博客网页时会把其中的图片链接从 http 换成 https，导致无法正确显示图片。免费 SSL 证书可以通过阿里云申请，只是需要每三个月续签一次。申请 SSL 证书参考如下教程：
阿里云免费 SSL 证书申请流程和 3 个月到期解决方法

网页性能优化

清空浏览器缓存后，使用浏览器开发者工具监控初次打开网页时的网络使用情况，发现以下问题：

  1. 首页加载问题：
    • locales.json 文件（2.2 MB） 和 default_config.json 文件（572KB）过大。
    • 多个 CSS 文件（15 个）被分别加载，增加了 HTTP 请求次数。
  2. 子页面（清单页面）加载问题：
    • 图片体积过大，有的图片甚至达到 1.0 MB，而且图片数量多，加载时间长达数分钟。
    • 图片没有使用懒加载，导致页面一次性加载所有图片，阻塞了页面渲染。
    • 图片链接有 302 重定向，增加了额外的网络往返。

解决方案如下：

禁用 Algolia 搜索

locales.json 文件（2.2MB）和 default_config.json 文件（572KB）是由 Algolia 搜索插件 生成的，对于我的博客来说，Algolia 搜索并非刚需，事实上，我几乎从未使用此功能。

修改主题配置文件

1
2
3
# 禁用 Algolia 搜索
algolia_search:
  enable: false

从根目录配置中移除 Algolia 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# algolia: #搜索
#   appId: "WOURYZ5KW7"
#   apiKey: "de7ae43a5b620a11526b973c29243b1c"
#   adminApiKey: "61008c25bc8263b500081e0ff9c77e38"
#   chunkSize: 5000
#   indexName: "Index"
#   fields:
#     - content:strip:truncate,0,500
#     - excerpt:strip
#     - gallery
#     - permalink
#     - photos
#     - slug
#     - tags
#     - title
#     - path

禁用 Algolia 搜索带来了一点小 bug：菜单栏位置异常。下述合并.css 文件过程中顺便通过添加.css 内容修复了此问题，详见 mycss.css，不再赘述。

合并.css 文件

将此前新建的七个.css 文件合并为一个.css 文件：mycss.css
路径为…blog-demo\source\css\mycss.css
源文件未删除，移动至 unuse 文件夹备份，只是不再引用。

对图片进行压缩

使用 docsmall 实现对图片的压缩。

压缩标准：

  • 博客封面图片：普通压缩，图片体积平均减少 50%，体积 < 200KB
  • 文章内容图片：强力压缩，图片体积平均减少，体积 < 100KB
  • 缩略图：极强压缩，图片体积平均减少 85%，体积 < 50KB

启用图片懒加载

参考 Hexo 优化之图片懒加载，通过 hexo-lazyload-image 插件实现懒加载。
需要注意的是，butterfly 自带的配置项是 vanilla-lazyload 插件，与教程里的插件不是同一个，因此需要在 config.yml 中手动添加配置项。

效果立竿见影，配合图片压缩，加载速度显著提升。

修改了一个新的加载动画，从而在懒加载过程中播放此动画。

内容更新

上一次更新时间为 2024.7（也是第一次更新），此次更新时间为 2025.9。具体更新内容如下所示：

书籍页面

  • 移除 屐上霜
  • 移除 我们只是妖怪
  • 新增 战略级天使
  • 新增 死在火星上
  • 新增 赛博剑仙铁雨

游戏页面

  • 调整排列顺序，按照网络游戏、单机游戏、手机游戏的顺序进行分布，按游玩时长降序排列
  • 新增 三角洲行动
  • 新增 瓦洛兰特
  • 新增 暖雪
  • 新增 杀戮尖塔
  • 新增 荒野大镖客 2
  • 新增 棕色尘埃 2
  • 调整了 明日方舟、云图计划、战双帕弥什 的封面图片

其他

改变插入图片尺寸

很多文章内图片尺寸太大，铺满整个屏幕，并不美观。hexo 支持 html 代码，使用纯 html 代码进行图片插入时可以按比例调整图片大小，如下：

1
<img   src="/images/html-try.png"  width="80%" alt="备注">

修复一系列 Bug

  • 修复 menu 位置

禁用搜索功能之后，由于搜索图标被隐藏，而容器依旧存在，导致了 menu 容器位置出现了异常（此前通过绝对位置来强迫 menu 处于屏幕正中间，并通过同样的方法来调整子菜单位置）。

上述问题修复后，移动端适配又出现了问题，子菜单位置又出现了异常，进一步修复。

  • 禁用 https 协议

一些调用的插件已经很久不被维护，例如 Aplayer，并不支持 https 协议，同时考虑到 https 协议会显著增加加载时间，遂放弃。

  • 更换 CDN 服务（回退回 jsdelivr）

250927 晚 9:00 至 11:00，所有来自 jsdelivr 的 CDN 资源（包括 fancybox、APlayer、sharejs 和 fontawesome）都连接超时。bootcdn 只有部分资源（APlayer 和 fontawesome），没有我所使用版本的 fancybox 和 sharejs 资源，更换后只修复了部分错误。正纠结于如何寻找替换源，于 11:30 发现 jsdelivr 源恢复服务。

为避免此类由于 jsdelivr 源不稳定导致的问题，更换 APlayer 和 font-awesome 的源为 cloudflare 源，如下所示：

  # APlayer 1.10.1
  aplayer_css: https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css
  aplayer_js: https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js
  
  # font-awesome 6.5.1
  fontawesome: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

而对于 fancybox 这样在别的源难以寻找的资源，将其下载为本地资源进行引用。分别位于 /source/css 和 /source/js 。

仍有一个问题，fancybox插件的JavaScript文件同时加载了本地和CDN两个版本。通过以下步骤进行修复：

npm install hexo-butterfly-extjs –save