重做博客记录

前因

这个博客是2020年建的，一开始是拿家里的电脑，托管到GitHub Pages上，后来把文件挪到了自己的电脑上，也租用了云服务器。但中间大概两年没新增什么文章，就是单纯的更新mission，也就没怎么管网站这块，本着一个能跑、能看就行。直到年初实在受不了win10系统的卡顿了，干脆一不做二不休升级了win11，正好也把环境重新配置一下，之后跟着自己博客之前的教程重新安装了hexo,想着就是重装了遍机子就没有server本地检查直接deploy部署了。后续不知道因为什么问题，所有图片没有转换路径，打开网站所有图片都是404.

于是趁着这个机会重新部署一下Hexo，也更新一下各个插件。

本文仅涉及本地部署，不涉及云服务器部署及服务器上的git设置。

后果

首先安装Node.js，和Git。之后安装Hexo。通过win+s搜索Git Bash，将Hexo安装到Git默认路径，使用命令：

npm install -g hexo-cli --force

安装，因为我之前安装过所以附加了--force强制安装。

之后新建一个空白文件夹当作博客的目录，进入空白文件夹，使用命令初始化：

hexo init

如果不是空白目录进行初始化时会报错。

Hexo初始化完成后文件夹会有以下文件

/
├── _config.yml # Hexo配置文件
├── package.json  # Node.js包管理文件
├── scaffolds # 模板文件夹
├── source  # 静态资源文件夹
│   └── _posts  # 文章文件夹
└── themes  # 主题文件夹

此时就可以运行

hexo grenerate
hexo server

进入浏览器输入http://localhost:4000即可访问博客。

之后可以根据个人喜好下载主题和插件。

目前个人使用的插件有三个：一个是全文搜索的hexo-generator-search,另一个是实现文章短链接的hexo-abbrlink，最后一个是通过修改文件得到的highlight代码高亮插件。

以下是我配置插件的时候遇到的两个坑，其他的可以直接参照官方模板进行配置。

hexo-generator-searchdb

安装后需要在_config.yml中添加以下配置：

search:
  path: search.json
  field: post
  content: true
  format: striptags

上面的是README中的配置，我无法正常使用，所以自己修改了一下。如果以上配置无法正常搜索可以尝试以下配置：

search:
  path: search.xml
  field: all
  content: true
  format: html

Hexo插入Markdown相对引用图片

之前Hexo无法插入Markdown相对引用照片，所以需要使用hexo-asset-image插件进行转换。但现在Hexo已经支持相对引用照片，不再需要插件辅助。只要在_config.yml中修改配置即可实现。

在_config.yml中的# Writing部分找到以下配置：

post_asset_folder: false

修改为以下内容：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

hexo-prism-plugin

在写本文的时候发现Hexo自带的highlight.js高亮匮乏，于是转头去网上寻找新的高亮插件，发现了4个月前更新了一次的hexo-prism-plugin。然而安装后无法正常使用。检查一番并结合对于使用hexo-prism-plugin插件代码无法渲染问题的解决方法推测可能是该高亮插件与主题的某些部分不兼容，因此我尝试了文中的方法进行调整。

1.首先进入prism官网下载js和css文件，上方的主题、支持语言和插件根据需要选择，之后下载下两个文件。

2.将两个文件保存至\node_modules\使用主题文件夹\source\js\prism（新版本）、\theme\使用主题文件夹\source\js\prism（旧版本）中，然后去使用主题文件夹\layout\_partial下找两个文件head.ejs、footer.ejs。

3.在head.ejs最下面添加以下代码：

<link rel="stylesheet" href="/js/prism/prism.css">

在footer.ejs最下面添加以下代码：

<script src="/js/prism/prism.js"></script>

4.在_config.yml中修改高亮设置：

syntax_highlighter: prism.js

之后重新生成即可。

theme配置

另外还有一个主题的设置，在老版本Hexo中需要将主题下载并放到主题文件夹theme中，并修改配置文件。但在最新版本的Hexo中，较新的主题下载方式由wget改为npm install。如此下载后主题变为npm包的形式，路径就变为.\node_modules\hexo-theme-<theme_name>。相应的主题_config.yml也变成了.\node_modules\hexo-theme-<theme_name>\_config.yml。与旧版本的主题配置说明不同。

至于主题配置，按照各主题的_config.yml配置说明修改，各主题是不一样的。之后到_config.yml中修改主题配置启用主题即可。