升级博客Hexo版本和Next主题版本踩坑记录

我的博客一直使用Next主题,这个主题简洁大方,而且插件特别多,很多只需要在配置文件里面设置下开关就可以使用。不过不巧的是,当时部署博客的时候,按照教程里面安装的是老版本的Next主题,新版本的迁移到了新的GITHUB仓库地址。最近正好要使用画流程图的插件,新版本默认支持了,借这个机会,直接整体升级下Next主题。

实现准备

备份博客,上传发布所有最新的博客文章,然后把整个git仓库另外放在一个仓库里面上传github备份。

操作步骤

  1. 下载新的Next主题,仓库地址为:https://github.com/theme-next/hexo-theme-next.git
  2. 如果直接用Beyond Compare比较两个主题的化,由于新版本更新快一年了,差异非常大,所以手动更新。
  3. 右键git commit,发现其实我改的东西不多。
    hexo_cur_modified_files
  4. Ok,剩下的就简单了,手工打开文件查看差异,然后BeyondCompare比较两个主题文件夹找到对应文件,手工合入。(不建议直接使用git工具全量更新,冲突大多反而更难处理)。
  5. 修改完后,整个目录替换next主题,然后本地启动测试OK后推送上库。

问题记录

  1. 打赏功能配置的位置变化,之前只改了个样式,直接不管,默认关闭。

  2. 底部的字数统计变化,新版的默认有了,不需要自己添加。

  3. 文章字数统计,新版本变化很大,暂时保持不变。

  4. 阅读时长min2read功能,新版本阉割了,用处也不大。

  5. 不蒜子在末尾的访客统计,只支持按图标而非文字显示了。

  6. 启动报错,YAMLException: bad indentation of a mapping entry at line 233, column 3,修改头像地址后OK

  7. 部分分类菜单没有中文名,最外层hexo的配置文件里language: zh-Hans 改成 language: zh-CN

  8. 底部的全站字数统计显示不出来,需要在全局配置文件里使能,这里才发现Hexo也需要升级,当前版本3.7.1,升级到最新3.9.0,这相当于又要踩一个大坑,操作记录如下:

    1. 全局升级hexo-cli,先hexo version查看当前版本,然后npm i hexo-cli -g,再次hexo version查看是否升级成功。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      // 升级前
      $ hexo version
      hexo: 3.7.1
      hexo-cli: 1.1.0
      os: Windows_NT 6.1.7601 win32 x64
      http_parser: 2.8.0
      node: 10.15.0
      v8: 6.8.275.32-node.45
      uv: 1.23.2
      zlib: 1.2.11
      ares: 1.15.0
      modules: 64
      nghttp2: 1.34.0
      napi: 3
      openssl: 1.1.0j
      icu: 62.1
      unicode: 11.0
      cldr: 33.1
      tz: 2018e

      // 升级后
      $ hexo version
      hexo: 3.9.0
      hexo-cli: 2.0.0
      os: Windows_NT 6.1.7601 win32 x64
      http_parser: 2.8.0
      node: 10.15.0
      v8: 6.8.275.32-node.45
      uv: 1.23.2
      zlib: 1.2.11
      ares: 1.15.0
      modules: 64
      nghttp2: 1.34.0
      napi: 3
      openssl: 1.1.0j
      icu: 62.1
      unicode: 11.0
      cldr: 33.1
      tz: 2018e
    2. 使用npm install -g npm-checknpm-check,检查系统中的插件是否有升级的,可以看到自己前面都安装了那些插件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      hexo
      hexo-abbrlink
      hexo-deployer-git
      hexo-filter-flowchart
      hexo-filter-github-emojis
      hexo-generator-archive
      hexo-generator-baidu-sitemap
      hexo-generator-categor
      hexo-generator-feed
      hexo-generator-index
      hexo-generator-json-content
      hexo-generator-sitemap
      hexo-generator-tag
      hexo-helper-qrcode
      hexo-renderer-ejs
      hexo-renderer-less
      hexo-renderer-marked
      hexo-renderer-stylus
      hexo-server
    3. 使用npm install -g npm-upgradenpm-upgrade,升级系统中的插件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      hexo-deployer-git             ^0.3.1   →   ^1.0.0
      hexo-filter-github-emojis ^1.4.4 → ^2.0.1
      hexo-generator-archive ^0.1.4 → ^0.1.5
      hexo-generator-index ^0.2.0 → ^0.2.1
      hexo-generator-json-content ^3.0.1 → ^4.1.6
      hexo-renderer-ejs ^0.3.0 → ^0.3.1
      hexo-renderer-less ^0.2.0 → ^1.0.0
      hexo-renderer-marked ^0.3.0 → ^1.0.1
      hexo-renderer-stylus ^0.3.1 → ^0.3.3
      hexo-server ^0.2.0 → ^0.3.3
      hexo-wordcount ^3.0.2 → ^6.0.1
    4. 使用npm update -gnpm update --save,不明确为什么,照着操作。

    5. 在另一个位置新建一个博客,以便使用新的hexo版本,hexo init xxx && cd xxx && npm i && hexo s

    6. 在新的博客中再安装插件,比较之前的博客和当前博客的package.json文件,差异如下:
      hexo_plugin_diff

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      npm install hexo-abbrlink --save
      npm install hexo-deployer-git --save
      npm install hexo-generator-baidu-sitemap --save
      npm install hexo-generator-feed --save
      npm install hexo-generator-json-content --save
      npm install hexo-generator-sitemap --save
      npm install hexo-helper-qrcode --save
      npm install hexo-renderer-less --save
      npm install hexo-symbols-count-time --save
      npm install hexo-generator-searchdb --save

      其中hexo-filter-github-emojis,hexo-filter-flowchart之前安装的没用到,这次就不用了。hexo-wordcount在新版已经被hexo-symbols-count-time替代。

    7. 将原来的文章、主题都复制过来,部署OK。

  9. 文章的字数显示不出来,上一步解决后也OK了。

  10. 文章出现两个阅读次数和眼睛图标,上库以后有报错信息 Counter not initialized! More info at console err msg。这是因为升级以后Leancloud要安装插件才能支持安全特性,这里只想统计个阅读次数而已,直接把leancloud_visitors的security置为false。两个眼睛是因为不蒜子的post_views和leancloud的冲突了,可以关掉。

  11. 丢失livere评论,不知道为什么,livere是韩国的,用起来太卡了,刚好上面leancloud也支持评论,切过去了。

  12. 参考文章使用Hexo开源博客系统,轻松搭建你的个人博客(2)- 配置篇

感想

升级的代价还是非常大的,所以一定要先做好完整备份,不行直接丢掉当前的然后把老的再上传一遍。我的这次升级总的来说变化并不大,除了支持最开始说的流程图插件外,其他的外观并没有革命性的变化,前后耗时一整天,还是非常折腾的,没有强烈诉求建议不要升级。