基于 Hexo + NexT + GitHub 的静态博客,2020 年 8 月升级过程记录

早在 2017 年,我基于 Hexo + NexT 搭建了 GitHub 托管的静态博客。到现在快 3 年了,发生了很多变化,比如 Hexo 脚手架升级了 2 个大版本「目前最新 5.0 版」,Node.js 也升级了多个大版本,静态博客的功能进行了很多增强,为了赶上时代的潮流,故需要对之前搭建的静态博客底层框架进行全方面的升级。本文记载了完整的升级过程。本文演示在 Mac 系统下的操作过程。

首先展示升级后,主页最终效果:

升级后首页效果图.jpg

本次升级方案如下:

  1. 使用最新版脚手架工具创建新的静态博客项目
  2. 将文章、Next 主题、Hexo 配置等迁移至新版项目中

使用该方案,可确保不会出现新老版本的兼容性问题,在稳定性、效率之间找到最好的平衡点。

日常维护

可以执行下列命令来创建一篇新文章:

hexo new <title>

注意:标题中不能有空格。

此时可以看到,在 source\_posts 目录下,新增了文章模板。文章完成后,在博客根目录下,执行如下命令,即可将文章推送到静态服务器中:

hexo clean
hexo generate
hexo deploy

工具准备

根据 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 主题官网
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,547评论 4 374
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,787评论 2 308
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,175评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,752评论 0 223
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,169评论 3 297
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,056评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,195评论 2 321
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,980评论 0 214
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,724评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,872评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,344评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,667评论 3 264
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,379评论 3 245
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,202评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,992评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,189评论 2 286
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,987评论 2 279