个人博客搭建之六：hexo及next版本更新

Posted on Edited on In , Changyan: Symbols count in article: 6.7k Reading time ≈ 6 mins.

涉及到本博客所用以下工具，皆更新到最新版本：

  • node.js: 16.15.1 (npm 8.11.0)
  • git: 2.36.1
  • hexo: 6.2.0
  • hexo-renderer-stylus: 2.1.0
  • webpack: 5.73.0
  • next: 8.12.1

更新博客框架 HEXO 及相关工具

hexo安转的前提条件：已安装Node.js和Git，而且对Node.js的版本有要求。 官方：强烈建议永远安装最新版本的 Hexo，以及推荐的 Node.js 版本。

更新 git 和 node.js

原版本：

1
2
3
4
5
6
$ git version
git version 2.36.0.windows.1
$ node -v
v16.15.0
$ npm -v
8.5.5

Git 版本更新：2.36.0 --> 2.36.1

https://git-scm.com/download/win 下载，全部默认更新安装

Node.js 版本(LTS)更新：v16.15.0 --> v16.15.1 > 下载，全部默认更新安装

1
2
3
$ npm -v
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
8.11.0

npm的版本随Node.js更新：8.5.5 --> 8.11.0

尝试命令行更新方式

Windows系统，除了常规的安装包下载更新 Node.js 之外，还可通过命令行方式的进行版本检查和更新。 前提是要先安装n模块（Node的版本管理），再用 n lts 或 n stable 来检查并升级到最新 LTS 稳定版。

1
2
3
4
5
6
7
$ npm install -g n
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for n@8.2.0: wanted {"os":"!win32"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS:    !win32
npm ERR! notsup Valid Arch:  undefined
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64

提示操作系统（win32）不支持。有帖子称可强制安装 npm install -g n --force ，我觉得没必要。

更新 Hexo

版本检查：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ hexo version
hexo: 6.1.0
hexo-cli: 4.3.0
os: win32 10.0.19044
node: 16.15.1
v8: 9.4.146.24-node.20
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.4
openssl: 1.1.1n+quic
cldr: 40.0
icu: 70.1
tz: 2021a3
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

注：Hexo 与 Hexo-cli 的关系

Hexo-cli is a cli (command-line-interface) service for create a project. When project was created, all the things doing with hexo module.

hexo-cli 最新版 4.3.0，无需更新。 https://github.com/hexojs/hexo-cli/releases

hexo 最新版 6.2.0，需更新。 https://github.com/hexojs/hexo/releases

更新操作借鉴：

  1. 进入 Hexo (blog) 的目录，npm outdated检查一下有哪些 Package 已经过期了：

    1
    2
    3
    4
    5
    JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
    $ npm outdated
    Package               Current  Wanted  Latest  Location                     Depended by
    hexo                    6.1.0   6.2.0   6.2.0  node_modules/hexo                  Blog
    hexo-renderer-stylus    2.0.1   2.1.0   2.1.0  node_modules/hexo-renderer-stylus  Blog

  2. npm update更新之：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $ npm update
    added 2 packages, removed 14 packages, changed 44 packages, and audited 253 packages in 29s

    3 moderate severity vulnerabilities

    To address all issues (including breaking changes), run:
      npm audit fix --force

    Run `npm audit` for details.

    似乎不仅仅更新了hexo 和 hexo-renderer-stylus；其与警告信息暂忽略。

  3. 检查，hexo版本已更新：6.1.0-->6.2.0

  4. npm outdated -g检查其它 Package 是否过期，更新

    1
    2
    3
    4
    5
    6
    $ npm outdated -g
    Package  Current  Wanted  Latest  Location              Depended by
    webpack   5.72.0  5.73.0  5.73.0  node_modules/webpack  global

    $ npm install webpack -g
    added 7 packages, removed 6 packages, changed 69 packages, and audited 77 packages in 11s

  5. npm view webpack version检查，webpack 版本已更新：5.72.0 --> 5.73.0

    1
    2
    $ npm view webpack version
    5.73.0

    注：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).

更新主题 next

版本更新

误用的旧版本：v7.8.0

目标新版本：v8.12.1

历史原因，next主题不同版本对应仓库如下：

以下更新参考 theme-next 的官方文档：

https://theme-next.js.org/docs/getting-started/
https://theme-next.js.org/docs/getting-started/installation.html
https://theme-next.js.org/docs/getting-started/upgrade.html

NexT suggest to upgrade from version 5 or 7 to version 8 in this way:

  1. You need to do some copies of old NexT files:
    1. _config.yml or next.yml (if you used Alternate Theme Config).
    2. Custom CSS files placed in next/source/css/_custom/* and next/source/css/_variables/* directories.
    3. Custom layout files placed in next/layout/_custom/*.
    4. Any another possible custom additions which can be finded by compare tools between repositories.
  2. Then rename the old NexT folder, for example, rename next to next-old.
  3. Install the new version according to the method provided in this article: installation instructions. Run hexo clean and hexo s to check whether the site works correctly.
  4. Update Hexo and Hexo plugin If after completing the above steps, an error occurs when executing hexo s or hexo g, it means that there may be a conflict between the old version of Hexo / Hexo plugin and the new version of the theme NexT. We recommend upgrading Hexo and Hexo plugins to the latest version. You can run npm outdated to see all the upgradeable plugins.
  5. If you see any bugs or you simply does not like this version, you can switch back to the old version at any time.

  1. 安装 Next Theme：

    1
    2
    3
    4
    $ npm install hexo-theme-next
    added 1 package, and audited 254 packages in 2s
    $ npm view hexo-theme-next version
    8.12.1

    安装位置：Blog_modules-theme-next，版本8.12.1为最新版。 > 注：原v7版安装，是从github复制整个主题仓库到theme\next，手动改yml配置文件。

  2. v7版本文件Copy：theme\next\_config.yml

    无自定义的css、layout等；

  3. v7版主题文件夹（themes\next）更名为next_v7；

  4. 更新安装最新版主题：npm install hexo-theme-next@latest

    提示：up to date

  5. 博客配置文件 Blog\_config.yml 设置主题：theme: next

    实际无更改，因next主题名称未变；

  6. 检查，本地服务启动：http://localhost:4000 无问题。

1
2
3
hexo clean
hexo g
hexo s

基于新版主题的设置优化

After the installation of Hexo and NexT, you may found that there are two configuration files using by Hexo and both called _config.yml:

  1. The first one is under site root directory, which contains Hexo's config.
  2. The second one is under theme root directory (e.g. thems/next/_config.yml or node_modules/hexo-theme-next/_config.yml), which is provided by NexT and contains theme's config.

Let's call the first one – Hexo config file [hexo配置文件], and the second one – NexT config file [next配置文件].

Alternate Theme Config

官方不主张直接修改 NexT 配置文件，因升级时易产生冲突。方法是采用 Alternate Theme Config。

Hexo themes are independent projects, with separate _config.yml files. Hexo 主题是独立项目，拥有自己的 _config.yml 配置文件。

Instead of forking a theme, and maintaining a custom version with your settings, you can configure it from somewhere else:

from a dedicated _config.[theme].yml file

Supported since Hexo 5.0.0 The file should be placed in your site folder, both yml and json are supported. theme inside _config.yml must be configured for Hexo to read _config.[theme].yml

1
2
# _config.yml
theme: "my-theme"
1
2
3
4
# _config.my-theme.yml
bio: "My awesome bio"
foo:
  bar: 'a'
1
2
3
4
5
# themes/my-theme/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
  foo:
    baz: 'b'

Resulting in theme configuration:

1
2
3
4
5
6
7
8
{
  bio: "My awesome bio",
  logo: "a-cool-image.png",
  foo: {
    bar: "a",
    baz: "b"
  }
}

优先级：站点配置文件中theme_config > 指定主题配置文件_config.next.yml > 主题文件夹下的_config.yml > The theme_config inside site's primary configuration file has the highest priority during merging, then the dedicated theme configuration file. The _config.yml file under the theme directory has the lowest priority.

操作

参考：https://theme-next.js.org/docs/getting-started/configuration.html

  1. 拷贝next主题配置文件d到博客根目录，并重命名为_config.next.yml

    1
    2
    # Installed through npm
    cp node_modules/hexo-theme-next/_config.yml _config.next.yml

  2. 对照备份的v7版主题的_config.yml，修改完善_config.next.yml中相应项；额外给代码段增加 copy_button：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    codeblock:
      # Code Highlight theme
      # All available themes: https://theme-next.js.org/highlight/
      theme:
        light: default
        dark: stackoverflow-dark
      prism:
        light: prism
        dark: prism-dark
      # Add copy button on codeblock
      copy_button:
        enable: true
        # Available values: default | flat | mac
        style:

  3. 将个人头像文件avatar.png复制到node_modules\hexo-theme-next\source\images\

  4. 净化站点配置文件：将_config.yml中symbols_count_time的分散配置项统一转移到_config.next.yml。

  5. 以下指令重新发布，效果OK！

    1
    hexo clean && hexo g && hexo d