LITREILY

搭建hexo站点-2024

2024-03-21计算机

Hexo 是基于 Node.js 的静态博客框架，可以方便生成静态网页托管在 GitHub 上。

Hexo 也是发布在GitHub上的开源项目，可见 hexojs/hexo 。

0. 安装依赖

  1. 安装 Git 官网

  2. 创建 GitHub 仓库，为使用 Pages 服务，仓库名需要设置为 用户名.github.io ，并设置好与 Git 的 SSH 通讯

  3. 安装 Node.js 官网下载 

    1
    2
    3
    4
    5
    # 验证安装成功的指令
    >> node -v
    v20.11.1
    >> npm -vc # 会随着 node 自动安装
    10.2.4

1. 安装 & 本地使用 Hexo

Hexo 以 npm 包的形式安装，所以推荐的方式就是在指定目录中安装使用，比如，创建一个名为 Blog 的目录，然后在终端中进入这个目录，执行下列命令安装 Hexo：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# npm命令安装Hexo
npm install -g hexo-cli

# 初始化博客，这里会创建一个文件夹blog，在当前目录下
hexo init blog

	# 常用指令
# 生成本地网站静态文件
hexo generate # 或 hexo g

# 启动本地服务预览，访问地址通常为 http://localhost:4000/
hexo server # 或 hexo s

# 创建一篇新博库，会在 /source/_posts 目录中生成相应的.md文件
hexo new test_blog

# 清除本地缓存
hexo clean

# 自动部署，需要配置
hexo deploy # 或 hexo

示例输出：

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
40
41
42
43
44
45
46
47
48
>> npm install -g hexo-cli

added 54 packages in 9s

14 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.5.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
npm notice Run npm install -g npm@10.5.0 to update!
npm notice
>> hexo init blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!
>> cd blog
>> tree
.
├── _config.yml		# 配置文件
├── package.json	
├── scaffolds		# 存放一些模板类文件
├── source			# 存放博客源文件
|   ├── _drafts
|   └── _posts
└── themes			# 存放主题
>> hexo generate
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 129 ms
INFO  Generated: archives/2024/03/index.html
INFO  Generated: archives/2024/index.html
INFO  Generated: archives/index.html
INFO  Generated: index.html
INFO  Generated: css/style.css
INFO  Generated: js/script.js
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: js/jquery-3.6.4.min.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: 2024/03/01/hello-world/index.html
INFO  11 files generated in 287 ms
>> hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

Ctrl+C >> 
INFO  Catch you later

2. 发布到 GitHub

在 blog 根目录下有配置文件：_config.yml ，在这个文件中配置网站相关信息，比如网页head信息，网站链接信息，博客名称格式，自动部署信息，配置主题等

通常需要修改如下内容：

1
2
3
4
5
6
7
8
9
# 设置访问站点的连接，也是启用 GitHub Pages 服务的仓库的访问链接
url: https://git.github.io/
root: /

# 自动部署信息，配置 GitHub 仓库的访问信息，包括访问类型（Git），仓库链接，分支
deploy:
    type: git
    repo: https://github.com/zzx/zzx.github.io.git
    branch: master

再次部署：

1
2
3
hexo clean
hexo g
hexo d

成功上传后，即可在 GitHub Pages 服务的链接访问到博客页面。

3. 博客模板

博客文件的标题写在 head 信息部分，这一部分还包括了时间、分类与标签。

  • 分类是顺次的包含关系，如果写了两个分类，那么后分类就是前分类的子分类。
  • 标签是并列的不包含关系，如果写了多个标签，那么就是多个标签。
1
2
3
4
5
6
7
8
9
10
---
title: Your Blog Title
date: YYYY-MM-DD HH:MM:SS
categories:
  - Category1
  - Category2
tags:
  - Tag1
  - Tag2
---

4. 关于主题

可以在官网或 GitHub 寻找适合的主题，不同主题需要的组件一般不同，但大多可以使用 npm 安装，根据描述进行替换即可。

主题最主要的逻辑就是将主题文件放入根目录下的 themes 目录下，并在 _config.yml 文件中配置主题名称，以替换主题。

5. 关于 LaTeX 的支持

目前有两种方式可以实现 Hexo 中的 $\LaTeX$ 支持：

  1. 使用 $KaTeX$
1
2
3
4
5
# 卸载原有markdown渲染器
npm un hexo-renderer-marked --save

# 安装包含katex的渲染器
npm i hexo-renderer-markdown-it-katex

然后在 _config.yml 文件中进行配置：

1
2
3
4
5
6
7
8
9
10
11
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
  plugins:
  anchors:
    level: 1
    collisionSuffix: ''

修改完之后，清除缓存，开启服务查看即可。

  1. 使用 MathJax.js

好像也有对应的渲染器，不过没搜到详细信息，使用引入 js 的方式使用。

选定博客主题，编辑模板文件，通常为 .ejs 或 .pug 文件，不同主题可能有不同的编排，需要找到对应网页 head 标签的部分，然后在其中添加如下内容：

1
2
3
4
5
6
7
<!-- 在 </head> 之前添加 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
  });
</script>

然后渲染重开一条龙即可。

上面的添加方式可能跟随不同类型的模板文件而改变，比如在 .pug 文件中的语句如下，应该有缩进：

1
2
3
4
5
6
7
8
9
10
11
12
script.
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']] // 添加这行来支持行间公式
    },
    svg: {
      fontCache: 'global'
    }
  };

script(async, src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js", id="MathJax-script")

所以具体到主题使用的方式去查询即可。

6. 其他

关于图片的存储，在博库中使用的图片，虽然相对路径是在同目录下，但博客的文本文件在 source/posts_ 目录下，而相应的图片需要存储在 source 下，而不是与博客文件同路径，原因未知。也有其他专门用于处理这个问题的插件，不过未尝试。

本文作者：WX
本文链接：https://wxdespair.github.io/2024/03/21/搭建hexo站点-2024/
版权声明：本博客所有文章除特殊声明外，均采用 CC BY-NC 4.0 许可协议。转载请注明出处 WX的博客！
hexo