Hexo 3 升級到 Hexo 6 的各種奇怪踩坑

2018.08.26 我在這網站發布了第一篇貼文 Hello Hexo! Test By Jerry Yang
原本在這裡是想寫演算法競賽的解題報告
用了當時蠻流行的組合 Hexo + GitHub Page 架設了 Blog 出來

Hexo 其實有段時間沒有更新了,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
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.9.0"
},
"dependencies": {
"hexo": "^3.3.0",
"hexo-autoprefixer": "^2.0.0",
"hexo-deployer-git": "^2.0.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-feed": "^2.2.0",
"hexo-generator-index": "^1.0.0",
"hexo-generator-json-content": "^4.1.6",
"hexo-generator-search": "^2.4.0",
"hexo-generator-sitemap": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-inject": "^1.0.0",
"hexo-math": "^3.0.4",
"hexo-renderer-ejs": "^1.0.0",
"hexo-renderer-less": "^1.0.0",
"hexo-renderer-marked": "^2.0.0",
"hexo-renderer-stylus": "^1.0.0",
"hexo-server": "^1.0.0"
}
}

Hexo 3.3.0 是在 2017.04.04 發布的,到現在 Hexo 6.1.0 已經差蠻遠的
而且之前寫的文章常常在預覽時會遇到奇怪問題,發佈都是陰差陽錯成功

再加上想要在其他環境寫 Blog(我目前寫 Blog 為 Mac 筆電,想要換在 Windows 環境寫寫看)
還有 WSL 也逐漸熟悉,就決定來做大跳板&重整環境了。

首先聲明,以 SRE 或 DevOps 的思維來說,通常會是一版一版升級
反正是個人的東西,所以我就都不管了
為了確保升級是 OK 的,也額外複製一份出來跑升級,到時候用爛還可以還原

升級 Hexo 6

這部分我稍微參照了 hexo-starter 的官方專案去做升級

直接去手動修改版本,都升級成為最新版本。

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
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "6.1.0"
},
"dependencies": {
"hexo": "^6.1.0",
"hexo-autoprefixer": "^2.0.0",
"hexo-deployer-git": "^2.0.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-feed": "^2.2.0",
"hexo-generator-index": "^2.0.0",
"hexo-generator-json-content": "^4.1.6",
"hexo-generator-search": "^2.4.0",
"hexo-generator-sitemap": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-inject": "^1.0.0",
"hexo-math": "^3.0.4",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-less": "^1.0.0",
"hexo-renderer-marked": "^5.0.0",
"hexo-renderer-stylus": "^2.0.1",
"hexo-server": "^3.0.0",
}
}

沒有寫在 hexo-starter 就維持不變

接下來就把 node_modules, yarn.lock, package-lock.json 全部刪掉

1
2
3
rm -rf node_modules
rm -rf yarn.lock
rm -rf package-lock.json

重跑 yarnnpm install(我個人喜歡 yarn,套件管理來說 npm 會比 yarn 好,詳情可以 Google 比較)

1
yarn

原本重新裝好就可以準備

1
hexo s

當然怎麼會這麼簡單呢?

1
err: Error: Function yaml.safeLoad is removed in js-yaml 4. Use yaml.load instead, which is now safe by default.

更新主題 Fluid

我參考了這網頁,其實再往下追查 ERROR Stack 才發現,我現在用的 Fluid 主題需要更新。

Fluid 安裝方式

Hexo 在 5.0.0 以後可以用 npm 來裝了,因此我就直接 yarn 裝起來,把 themes 裡面的 fluid 改名。

1
yarn add hexo-theme-fluid

接下來就是更改 Hexo Fluid 的主題樣式……

圖片 Location 問題

改版之後,圖片解析都怪怪的,全部都跑去根目錄,而不是原本的文章裡面
後來在查官網文件 _config.yml 都才發現 hexo-renderer-marked 多了一些選項

1
2
3
4
post_asset_folder: true
marked:
prependRoot: true
postAsset: true

之後把 hexo 重新清理產生就好了

1
2
hexo clean
hexo s

不過有個 warning 一直都沒有解決

修正 Node.js circular dependency

1
2
3
4
5
6
7
(node:96093) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:96093) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:96093) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:96093) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:96093) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:96093) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

這個問題我參考了這篇解決
package.json 後面加上

1
2
3
"resolutions": {
"stylus": "^0.57.0"
}

最後變成這樣

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
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "6.1.0"
},
"dependencies": {
"hexo": "^6.1.0",
"hexo-autoprefixer": "^2.0.0",
"hexo-deployer-git": "^2.0.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-feed": "^2.2.0",
"hexo-generator-index": "^2.0.0",
"hexo-generator-json-content": "^4.1.6",
"hexo-generator-search": "^2.4.0",
"hexo-generator-sitemap": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-inject": "^1.0.0",
"hexo-math": "^3.0.4",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-less": "^1.0.0",
"hexo-renderer-marked": "^5.0.0",
"hexo-renderer-stylus": "^2.0.1",
"hexo-server": "^3.0.0",
"hexo-theme-fluid": "^1.8.14"
},
"resolutions": {
"stylus": "^0.57.0"
}
}

最後再 yarn 重新安裝 hexo-renderer-stylus 一次就好

1
2
yarn remove hexo-renderer-stylus
yarn add hexo-renderer-stylus

後記 Afterword

其實我理想狀況是想把這些都丟給 GitHub Action
可以直接 Push 上去後直接 CI/CD 發佈完成
雖然還在 Mac 上面打文章,不過已經把環境初步整理完成
剩下就是 Deploy 的部分了

完成後我應該會再寫一篇文章

Buy Me A Coffee

Hexo 3 升級到 Hexo 6 的各種奇怪踩坑
https://blog.yangjerry.tw/hexo-3-upgrade-to-6/
作者
Jerry Yang
發布於
2022年4月7日
許可協議