美文网首页
基于 Hexo + NexT + GitHub 的静态博客,20

基于 Hexo + NexT + GitHub 的静态博客,20

作者: 雪中亮 | 来源:发表于2020-08-09 12:46 被阅读0次

    早在 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 主题官网

    相关文章

      网友评论

          本文标题:基于 Hexo + NexT + GitHub 的静态博客,20

          本文链接:https://www.haomeiwen.com/subject/lhyldktx.html