Hexo 博客升级

升级原因

1. 模版 theme-next 最后版本是 7.8.0，几月未更新。现在迁移到 hexo-theme 最后版本是 8.13.2，目前为止。
2. hexo-theme 可以模版可以放在 themes 文件下面，也可以使用 npm 安装。
3. hexo 从版本 5.0.0 升级到 6.3.0。

升级步骤

1. 升级 node 和 hexo 到当前新版本

升级 node 版本，目前是 18.12.1

$ nvm install --lts
$ nvm use --lts

升级 hexo 版本，目前是 6.3.0

$ npm uninstall -g hexo-cli
$ npm install -g hexo-cli

官网 有 hexo 需要的最低 node 版本要求。

2. 初始化博客目录

在这里，我没有在旧仓库中基础上开发升级，而是创建一个新的项目，升级完成后进行覆盖。因为包依赖版本有所不同，模版文件也不同。
博客项目初始化。

$ hexo init <folder>
$ cd <folder>
$ npm install

3. 安装 hexo-theme 模版

使用 npm 安装 hexo-theme 模版。

$ npm install hexo-theme-next

或者存放在仓库中，安装到 hexo-theme 模版到 themes 目录。

$ git clone https://github.com/next-theme/hexo-theme-next themes/next

4. 复制已创作的博客文章 source

删除新目录自带的 Hello World 文章，复制之前的博客文章到新的目录下。

$ rm -rf source
$ cd ..
$ cp -r <old-folder>/source

5. 修改个人配置，添加模版配置

修改博客网站配置文件 _config.yml， 大部分内容没有变化，有些自定的配置需要修改。

# Site
title: 宿命
subtitle: 如果它不应该发生，它就不会发生
description: 宿命 - 个人博客网站，涵盖领域包括IT技术、区块链技术、技术观点等
keywords: Blog, HTML, CSS, JavaScript, Python, PHP, Java, Go, Redis, MySQL, Node.js, React, Vuejs, Git, Programming, Web Development, Blockchain
author: Slagga
language: zh-CN
timezone: Asia/Shanghai

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://gitslagga.github.com

......

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:gitslagga/gitslagga.github.io.git
  branch: master

添加模版配置文件 _config.next.yml。

footer:
  since: 2015

scheme: Pisces

menu:
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  about: /about/ || fa fa-user

menu_settings:
  icons: true
  badges: true

avatar:
  url: https://avatars.githubusercontent.com/u/19620432
  rounded: true
  rotated: true

social:
  GitHub: https://github.com/gitslagga || fab fa-github
  E-Mail: mailto:957766762@qq.com || fa fa-envelope

codeblock:
  copy_button:
    enable: true
    style: mac

back2top:
  enable: true
  scrollpercent: true

github_banner:
  enable: true
  permalink: 'https://github.com/gitslagga'
  title: 'Follow me on GitHub'

font:
  enable: true
  global:
    external: true
    family: Monda

comments:
  active: gitalk

gitalk:
  enable: true
  github_id: gitslagga
  repo: gitslagga.github.io
  client_id: ******
  client_secret: ******
  admin_user: gitslagga 
  language: zh-CN

local_search:
  enable: true

6. 安装博客功能插件

• 安装文章搜索插件

$ npm install hexo-generator-searchdb

• 安装远程仓库推送插件

$ npm install hexo-deployer-git

• 安装 gitalk 文章评论插件

$ npm install gitalk

Hexo 官方插件列表。

7. 更换仓库，提交代码

$ cp ../<old-site>/.git .
$ git add -A
$ git commit -m "update hexo and next version"
$ git push

8. Github Page 推送

$ hexo clean
$ hexo generate
$ hexo deploy

9. 博客网站优化

1. 页面局部刷新使用 pjax: true。
2. 图像和视频支持使用 fancybox: true。
3. 为汉字和英文数字之间添加空格使用 pangu: true。
4. 更多 Next 官方配置帮助文档
5. 部署后在 Github 中出现 ReferenceError: velocity is not defined 错误，网站无法访问。
   需要在 _config.next.yml 中配置以下内容：

......

motion:
  async: true

vendors:
  internal: cdnjs
  plugins: cdnjs

总结

1. 整个过程还是比较繁琐，坚持就是胜利。
2. Next 的配置有一些变化，增加了些配置，消减了些配置，比如：codeblock: highlight_theme。
3. 我的 Github，欢迎 Follow。

Have a nice day, Happy Coding.