基於 Hexo + NexT + GitHub 的靜態博客，2020 年 8 月升級過程記錄

早在 2017 年，我基於 Hexo + NexT 搭建了 GitHub 託管的靜態博客。到如今快 3 年了，發生了不少變化，好比 Hexo 腳手架升級了 2 個大版本「目前最新 5.0 版」，Node.js 也升級了多個大版本，靜態博客的功能進行了不少加強，爲了遇上時代的潮流，故須要對以前搭建的靜態博客底層框架進行全方面的升級。本文記載了完整的升級過程。本文演示在 Mac 系統下的操做過程。

首先展現升級後，主頁最終效果：

本次升級方案以下：

1. 使用最新版腳手架工具建立新的靜態博客項目
2. 將文章、Next 主題、Hexo 配置等遷移至新版項目中

使用該方案，可確保不會出現新老版本的兼容性問題，在穩定性、效率之間找到最好的平衡點。

工具準備

根據 Hexo 官網的介紹，進行工具的準備，首先確保系統中已安裝以下工具：

1. node.js「演示版本13.12.0」
2. git

然後在終端依次執行以下 bash 指令：

# 國內執行 cnpm 命令更快更方便
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

初始靜態博客項目已經能夠在本地運行起來了，接下來集成最新版 NexT 主題，根據 NexT 官網的指導，直接執行以下指令：

git clone https://github.com/theme-next/hexo-theme-next themes/next

打開 Hexo 配置文件，更改主題：

theme: next

安裝 git 部署插件

npm install hexo-deployer-git --save

接下來能夠開始準備數據的遷移工做了。

配置及文章遷移

只須要進行以下兩步，便可完成遷移工做：

1. 將 Hexo 目錄下的 _config.yml 配置，以及主題目錄下的 _config.yml 配置遷移至新的項目中
2. 將 Hexo 目錄下的 source 目錄總體遷移至新的項目中

新版功能變動

1. 在新版 NexT 主題的配置文件中，新增了不少基於 jsdelivr.net 的可選 CDN 服務，打開後能夠保證三方資源文件的極快加載，建議打開。
2. Hexo 的官方文檔中，介紹了文章中插入圖片的三種方法，不過不管是哪一種方法，在使用本地 Markdown 編輯器進行文章編寫時，都沒法預覽圖片。爲了解決此問題，能夠安裝一個圖片路徑轉換的插件 hexo-asset-image，可是該插件目前處於廢棄狀態。目前未找到好的解決方法，暫時實用官網推薦的「相對路徑的標籤引用」。
3. icon 資源的引用格式出現了變化，詳情能夠參考配置示例，須要注意變動。

感覺

雖然 Hexo + NexT 總體升級了 1 到 2 個大版本，細節功能明顯增長了不少「從配置的規模就能夠看出來」，頁面細節更加現代化，可是主體功能並沒有變化。首次遷移後，出現部分圖片、圖標找不到的狀況，後續經過研究後都獲得瞭解決，並沒有其餘問題，體驗相比原來達到了 105% 的水平，推薦升級。

參考連接

1. Hexo 中完美插入本地圖片
2. Hexo 腳手架官網
3. NexT 主題官網