慕雪的小助手正在绞尽脑汁···
慕雪小助手的总结
DeepSeek & LongCat

太久没有升级过hexo了,现在用的4.9.0版本主题已经是2023年10月的老东西了,准确来说是在我配置好了butterfly主题之后基本上就没有动过。

github.com/jerryc127/hexo-theme-butterfly/releases/tag/5.3.5

本次打算升级5.3.5版本,是3月4日发布的。目前mac上使用的npm和node版本号如下

1
2
3
4
5
❯ npm --version
10.8.2

❯ node --version
v20.18.0

1. hexo升级

首先需要升级hexo 7版本,现在使用的是hexo 6.3.0版本。升级hexo步骤如下,参考:1px.run/hexo/upgrade/

首先是列出过期的包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
❯ npm outdated
Package Current Wanted Latest Location Depended by
hexo 6.3.0 6.3.0 7.3.0 node_modules/hexo blog
hexo-deployer-git 3.0.0 3.0.0 4.0.0 node_modules/hexo-deployer-git blog
hexo-filter-mathjax 0.8.1 0.8.1 0.9.0 node_modules/hexo-filter-mathjax blog
hexo-generator-archive 1.0.0 1.0.0 2.0.0 node_modules/hexo-generator-archive blog
hexo-generator-category 1.0.0 1.0.0 2.0.0 node_modules/hexo-generator-category blog
hexo-generator-index 2.0.0 2.0.0 4.0.0 node_modules/hexo-generator-index blog
hexo-generator-searchdb 1.4.1 1.5.0 1.5.0 node_modules/hexo-generator-searchdb blog
hexo-generator-tag 1.0.0 1.0.0 2.0.0 node_modules/hexo-generator-tag blog
hexo-renderer-marked 5.0.0 5.0.0 7.0.1 node_modules/hexo-renderer-marked blog
hexo-renderer-stylus 2.1.0 2.1.0 3.0.1 node_modules/hexo-renderer-stylus blog
hexo-theme-landscape 0.0.3 0.0.3 1.1.0 node_modules/hexo-theme-landscape blog
uuid 8.3.2 8.3.2 11.1.0 node_modules/uuid blog

然后根据这里的版本号修改package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
"name": "hexo-site",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "7.3.0"
},
"dependencies": {
"hexo": "^7.3.0",
"hexo-abbrlink": "^2.2.1",
"hexo-baidu-url-submit": "^0.0.6",
"hexo-blog-encrypt": "^3.1.6",
"hexo-deployer-git": "^4.0.0",
"hexo-filter-mathjax": "^0.9.0",
"hexo-generator-archive": "^2.0.0",
"hexo-generator-baidu-sitemap": "^0.1.9",
"hexo-generator-category": "^2.0.0",
"hexo-generator-feed": "^3.0.0",
"hexo-generator-index": "^4.0.0",
"hexo-generator-searchdb": "^1.5.0",
"hexo-generator-sitemap": "^3.0.1",
"hexo-generator-tag": "^2.0.0",
"hexo-hide-posts": "^0.4.3",
"hexo-neat": "^1.0.9",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-marked": "^7.0.1",
"hexo-renderer-pug": "^3.0.0",
"hexo-renderer-stylus": "^3.0.1",
"hexo-server": "^3.0.0",
"hexo-theme-landscape": "^1.1.0",
"hexo-wordcount": "^6.0.1",
"uuid": "^11.1.0"
}
}

修改完毕后,重新安装新的包

1
npm install --save

使用hexo version确认包更新成功。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
❯ hexo version
INFO Validating config
INFO
===================================================================
##### # # ##### ##### ###### ##### ###### # # #
# # # # # # # # # # # # #
##### # # # # ##### # # ##### # #
# # # # # # # ##### # # #
# # # # # # # # # # # #
##### #### # # ###### # # # ###### #
4.9.0
===================================================================
hexo: 7.3.0
hexo-cli: 4.3.2
os: darwin 24.3.0 15.3

node: 20.18.0
acorn: 8.12.1
ada: 2.9.0
ares: 1.33.1
base64: 0.5.2
brotli: 1.1.0
cjs_module_lexer: 1.4.1
cldr: 45.0
icu: 75.1
llhttp: 8.1.2
modules: 115
napi: 9
nghttp2: 1.61.0
nghttp3: 0.7.0
ngtcp2: 1.1.0
openssl: 3.0.13+quic
simdutf: 5.5.0
tz: 2024a
undici: 6.19.8
unicode: 15.1
uv: 1.46.0
uvwasi: 0.0.21
v8: 11.3.244.8-node.23
zlib: 1.3.0.1-motley-71660e1

更新版本后,执行了hexo三板斧,没有观测到butterfly主题4.9.0版本上有啥问题,已有站点能正常渲染,说明hexo版本升级ok了。那就可以开始更新butterfly主题的版本了。

2. 主题更新

下载5.3.5版本的压缩包,放到theme目录下,解压,文件夹命名为butterfly5,主题配置文件也命名为_config.butterfly5.yaml,这样就能和老版本的butterfly共存,有问题可以直接通过切主题名称切老版本去。

下面是先前我对butterfly主题魔改的记录,其实都算不上魔改,主要是新增了几个页面。

  1. 【Hexo】hexo-butterfly主题添加非主站提示
  2. 【Hexo】hexo-butterfly主题添加装备展示页面
  3. 【Hexo】hexo-butterfly主题添加tag标签文章数量上下标
  4. 【Hexo】hexo-butterfly主题添加影评书评页面

这边照着原本的博客和Hexo配置仓库的Git提交信息,对新版本的butterfly主题做相同的修改就OK了,没有任何差异,修改后直接就能用。

3. 配置问题记录

3.1. 站点背景图

注意,butterfly新版本配置中,站点背景图设置的时候直接填url就可以了,不用像老主题一样需要用url()​括起来,新版本已经自动帮我们处理了。

1
background: /img/main/mothra.webp

image

3.2. CDN配置

目前使用cdnjs和jsdeliver似乎都容易404,于是还是想找国内替代的cdn。

现在有两个方案,一个是使用custom自定义的url,另外一个是借助hexo-butterfly-extjs​插件使用本地的内容(hexo g的时候把js文件都拉至本地)

目前hexo-butterfly-extjs​能正常使用,但是加载速度非常慢

于是考虑使用custom,目前七牛云的cdn.staticfile.org​已经停止维护了,找到了一个还在维护的:www.zstatic.net/docs/getting-started

最开始我设置成了如下,结果发现虽然请求后返回的是200,但是返回的内容都是空的,并不是js的内容

1
https://s4.zstatic.net/${cdnjs_name}/${version}/${min_cdnjs_file}

image

最后看了一下butterfly的源码和zstatic站点上的介绍,首先butterfly源码中的cdn url是下面这样处理的

1
2
3
4
5
6
7
const cdnSource = {
local: cond === 'internal' ? `${cdnjs_file + verType}` : `/pluginsSrc/${name}/${file + verType}`,
jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${min_file}`,
unpkg: `https://unpkg.com/${name}${verType}/${file}`,
cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}`,
custom: (CDN.custom_format || '').replace(/\$\{(.+?)\}/g, (match, $1) => value[$1])
}

zstatis站点上给的示例是这样的

1
2
3
4
- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
- https://cdn.bootcdn.net/jquery/3.5.1/jquery.min.js
- https://cdn.staticfile.net/jquery/3.5.1/jquery.min.js
+ https://s4.zstatic.net/ajax/libs/jquery/3.5.1/jquery.min.js

仔细一看会发现,zstatic用的url路径和cdnjs是一样的,所以我们要设置的自定义url也要和cdnjs维持一致

1
custom_format: https://s4.zstatic.net/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}

可以看到这个时候请求的url已经有内容了

image

目前测试结果正常,顶栏图标也能加载。

image

不过呢,后续测试发现zstatic的某些包是不支持的,比如我现在需要使用的mermaid包在zstatic里面会404,说明这个CDN没有成功缓存这个包。

所以,最后还是使用了butterfly的local CDN功能,CDN配置里面的两个provider都设置为local即可

1
2
3
4
5
6
7
CDN:
# The CDN provider for internal and third-party scripts
# Options for both: local/jsdelivr/unpkg/cdnjs/custom
# Note: Dev version can only use 'local' for internal scripts
# Note: When setting third-party scripts to 'local', you need to install hexo-butterfly-extjs
internal_provider: local
third_party_provider: local

local CDN是在hexo g​的时候,把所有用的到的js文件全部下载到本地,最终给用户提供的,全都是hexo静态目录下已经下载好的js文件了,不再需要使用外部CDN了,也就解决了访问问题和404问题。

目前没有发现local CDN有什么bug,使用正常。

3.3. Vercel和Netlify的node版本问题

最开始配置Vercel和Netlify的时候,配置的node版本是18,现在这两个站点都开始弃用node 18了,所有配置了node 18的项目会直接部署失败。

所以,需要去两个平台的后台,直接把构建设置里面的node版本改成22就可以了。hexo对node版本的兼容性很好,改了就能用,不需要做任何其他操作。

image.png

image.png

同理,cloudflare workers也是在设置里面把“构建系统版本”设置成更新的版本3。虽然当前workers使用版本2的node 18依旧可以正常部署,但还是设置一下吧!

image.png

这里也体现出claudeflare这个赛博大善人和其他平台的不同了,其他平台都因为各种原因弃用node 18支持的同时,claudeflare依旧安稳支持node 18,善!

3.4. packages-lock.json版本号匹配问题

另外需要注意的是,更新hexo和主题版本的时候一定要删除本地hexo仓库中的的packages-lock.json文件然后npm install重新安装(会生成新的packages-lock.json),否则cloudflare workers这类部署平台可能会因为版本号对不上而部署失败。

这个问题我只在cloudflare workers上遇到了,Vercel和Netlify都是正常能部署成功。但还是建议大家操作一下删除后重新npm install安装的步骤,避免出问题。