早在 2017 年办悟，我基于 Hexo + NexT 搭建了 GitHub 托管的靜態(tài)博客。到現(xiàn)在快 3 年了嫩码，發(fā)生了很多變化誉尖，比如 Hexo 腳手架升級(jí)了 2 個(gè)大版本「目前最新 5.0 版」，Node.js 也升級(jí)了多個(gè)大版本铸题，靜態(tài)博客的功能進(jìn)行了很多增強(qiáng)，為了趕上時(shí)代的潮流琢感，故需要對(duì)之前搭建的靜態(tài)博客底層框架進(jìn)行全方面的升級(jí)丢间。本文記載了完整的升級(jí)過程。本文演示在 Mac 系統(tǒng)下的操作過程驹针。
首先展示升級(jí)后烘挫，主頁最終效果：
本次升級(jí)方案如下：
- 使用最新版腳手架工具創(chuàng)建新的靜態(tài)博客項(xiàng)目
- 將文章、Next 主題柬甥、Hexo 配置等遷移至新版項(xiàng)目中
使用該方案饮六，可確保不會(huì)出現(xiàn)新老版本的兼容性問題，在穩(wěn)定性苛蒲、效率之間找到最好的平衡點(diǎn)卤橄。
日常維護(hù)
可以執(zhí)行下列命令來創(chuàng)建一篇新文章：
hexo new <title>
注意：標(biāo)題中不能有空格。
此時(shí)可以看到臂外，在 source\_posts 目錄下窟扑，新增了文章模板喇颁。文章完成后，在博客根目錄下嚎货，執(zhí)行如下命令橘霎，即可將文章推送到靜態(tài)服務(wù)器中：
hexo clean
hexo generate
hexo deploy
工具準(zhǔn)備
根據(jù) Hexo 官網(wǎng)的介紹，進(jìn)行工具的準(zhǔn)備殖属，首先確保系統(tǒng)中已安裝如下工具：
- node.js「演示版本13.12.0」
- git
而后在終端依次執(zhí)行如下 bash 指令：
# 國內(nèi)執(zhí)行 cnpm 命令更快更方便
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
初始靜態(tài)博客項(xiàng)目已經(jīng)可以在本地運(yùn)行起來了姐叁，接下來集成最新版 NexT 主題，根據(jù) NexT 官網(wǎng)的指導(dǎo)洗显，直接執(zhí)行如下指令：
git clone https://github.com/theme-next/hexo-theme-next themes/next
打開 Hexo 配置文件七蜘，更改主題：
theme: next
安裝 git 部署插件
npm install hexo-deployer-git --save
接下來可以開始準(zhǔn)備數(shù)據(jù)的遷移工作了。
配置及文章遷移
只需要進(jìn)行如下兩步墙懂，即可完成遷移工作：
- 將 Hexo 目錄下的 _config.yml 配置橡卤，以及主題目錄下的 _config.yml 配置遷移至新的項(xiàng)目中
- 將 Hexo 目錄下的 source 目錄整體遷移至新的項(xiàng)目中
新版功能變更
- 在新版 NexT 主題的配置文件中，新增了很多基于 jsdelivr.net 的可選 CDN 服務(wù)损搬，打開后可以保證三方資源文件的極快加載碧库，建議打開。
- Hexo 的官方文檔中巧勤，介紹了文章中插入圖片的三種方法嵌灰，不過無論是哪種方法，在使用本地 Markdown 編輯器進(jìn)行文章編寫時(shí)颅悉，都無法預(yù)覽圖片沽瞭。為了解決此問題，可以安裝一個(gè)圖片路徑轉(zhuǎn)換的插件 hexo-asset-image剩瓶，但是該插件目前處于廢棄狀態(tài)驹溃。目前未找到好的解決方法，暫時(shí)實(shí)用官網(wǎng)推薦的「相對(duì)路徑的標(biāo)簽引用」延曙。
- icon 資源的引用格式出現(xiàn)了變化豌鹤，詳情可以參考配置示例，需要注意變更枝缔。
感受
雖然 Hexo + NexT 整體升級(jí)了 1 到 2 個(gè)大版本布疙，細(xì)節(jié)功能明顯增加了很多「從配置的規(guī)模就可以看出來」，頁面細(xì)節(jié)更加現(xiàn)代化愿卸，但是主體功能并無變化灵临。首次遷移后，出現(xiàn)部分圖片趴荸、圖標(biāo)找不到的情況儒溉，后續(xù)通過研究后都得到了解決，并無其他問題赊舶，體驗(yàn)相比原來達(dá)到了 105% 的水平睁搭，推薦升級(jí)赶诊。
