Hexo 博客搭建记录

发表于 更新于 分类于

前言

为什么不选择 WordPress

众所周知，WordPress 有很多优点，如：

  • 非常多的插件和主题，几乎一个博客想要拓展的功能都可以在其上轻松实现；
  • 非常简单的插件和主题安装方式；
  • 完善的社区生态
  • …

但是经过折腾 WordPress 一段时间后，下面的问题对我来说是难以解决的

  • 对 Markdown 及其扩展支持不佳
  • 迁移和备份比较麻烦

为什么选择 Hexo

  • 轻量级
  • 使用 Git 可以轻松备份和迁移
  • 原生支持 markdown

Hexo 的缺点

  • 无在线编辑器，但是这本来需求就不高，使用本地的 Typora 可以达到更好的编辑体验；
  • 具有一定的使用门槛
  • Hexo 是基于静态网页的，功能上有局限

但是 Hexo 的工作方式，让我不用担心博客会因为服务器到期而消失，也可以在买不起服务器的情况下部署在 Gitee 或者 Github 上，而且评论功能对于个人来说不是非常需要，而且不经审核的评论有违规风险。

Hexo 博客搭建

所处环境

Ubuntu 服务器、Windows 本地

可以使用 Gitee 和 Github 进行部署，网上有很多教程，暂不介绍

框架安装

Hexo 官方文档

安装 hexo-cli

1
npm install -g hexo-cli

建立一个 hexo 项目

1
2
3
hexo init <folder>
cd <folder>
npm install

NexT 主题安装

NexT 官方文档

Next 主题优点：

  • 支持数学公式
  • 支持大纲
  • 对第三方扩展有广泛的支持
  • 支持深色模式

为了方便迁移，这里用 npm 安装的方式

1
npm install hexo-theme-next@latest

修改博客根目录下的 _config.yml

1
theme: next

安装后，查看 node_modules/hexo-theme-next/_config.yml，在博客根目录下创建文件 _config.next.yml ，将前者需要修改的配置项复制到 _config.next.yml 这样子配置就会纳入 Git 版本管理，在不同的机器上有相同的效果。

如修改其 scheme，也就是该主题的不同样式

1
2
3
4
5
# Schemes
# scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

执行以下命令让 Hexo 按照新的主题生成我们需要的文件

1
2
hexo clean
hexo g

你也可以直接使用

1
hexo clean && hexo g

使用下面的命令可以在本机查看最终效果

1
hexo s
image-20220106123049582

数学公式支持（与 Typora 渲染效果一致）

网上的教程大部分是启用 mathjax，但实测后发现很多 Latex 的解析与 Typora 的解析并不相同，而且 Typora 中可以开启的用 \\ 换行其也并不支持，所以这里将启用 Katex，以达到与 Typora 相同的渲染效果。

NexT 主题支持解析数学公式，但需要改变 Hexo 的默认 Markdown 渲染器

NexT 数学公式文档

首先卸载原有渲染器，然后安装新的渲染器

1
2
3

 npm un hexo-renderer-marked
npm i hexo-renderer-markdown-it-plus

然后从 node_modules/hexo-theme-next/_config.yml复制以下内容至 _config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Math Formulas Render Support
# Warning: Please install / uninstall the relevant renderer according to the documentation.
# See: https://theme-next.js.org/docs/third-party-services/math-equations
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex script EVERY PAGE.
  every_page: true

  mathjax:
    enable: false
    # Available values: none | ams | all
    tags: none

  katex:
    enable: true
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: true

注意启用其中的

1
2
3
4
katex:
  enable: true
  # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
  copy_tex: true

再次执行

1
hexo clean && hexo g

推送静态网页至 Gitee

_config.yml

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: git
  repo: #仓库地址
  branch: master

以后执行 hexo g 的时候添加 -d 参数，即可以实现生成网页的同时推送至 Gitee

1
hexo g -d

静态网页推送至 Gitee/Github 后，可以使用平台的功能直接搭建出网站，这里暂不介绍。

使用 Git hooks 轻松部署

使用 Git Hook 自动部署 Hexo 到个人 VPS