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
|
重跑 yarn
或 npm install
(我個人喜歡 yarn,套件管理來說 npm 會比 yarn 好,詳情可以 Google 比較)
原本重新裝好就可以準備
當然怎麼會這麼簡單呢?
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 重新清理產生就好了
不過有個 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 的部分了
完成後我應該會再寫一篇文章