基于 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 主题官网