张先生的深夜课堂
0%

Hexo个人博客系统的搭建和使用

发表于 分类于
为了填补个人在升级之前Hugo博客系统造成的坑，将Hexo的部署形成教程方便大家

Hexo个人博客系统的搭建和使用

前言

之前本人博客采用Hugo进行安装部署，在更新Hugo版本后发现原来的LoveIt主题与最新版本Hugo无法兼容，导致博客出现故障

由于原来博客部署在阿里云ESC云平台上，操作系统采用的是Centos7版本，统筹考虑将云主机操作系统进行升级并对博客进行翻新改造

最终采用Rocky Linux 9.1 以及Hexo博客系统

image-20230527153317245

1 Hexo安装部署

Hexo是一款基于Nodejs的，快速、简洁且高效的博客框架，只需要安装Node.js和Git即可

Hexo本质是是将Markdown文件(或其他支持格式)按照自定义主题方式输出为标准化静态文件，这些静态文件才是真正意义上所需要的输出物

静态文件可以部署在类似在阿里云ESC，通过Apache或者Nginx对外提供Web服务器从而实现个人博客站点的内容实现

也可以直接部署在类似Github上直接完成Web实现，前者存在域名解析和TLS证书的问题

基本的Hexo工作流详见下图

1.1 环境介绍

本文使用阿里云ESC云主机，操作系统采用：linux 5.14.0-162.23.1.el9_1.x86_64 Rocky Linux 9.1 (Blue Onyx)

注意：本文站点根目录为/root/mysite

1.2 安装Node.js

Hexo是基于Node.js技术，因此需要安装Node.js，官网对于版本的依赖如下：

Hexo 版本 最低版本 (Node.js 版本) 最高版本 (Node.js 版本)
6.2+ 12.13.0 latest
6.0+ 12.13.0 18.5.0
5.0+ 10.13.0 12.0.0
4.1 - 4.2 8.10 10.0.0
4.0 8.6 8.10.0
3.3 - 3.9 6.9 8.0.0
3.2 - 3.3 0.12 未知
3.0 - 3.1 0.10 或 iojs 未知
0.0.1 - 2.8 0.10 未知

Rocky Linux采用yum源安装,Git用系统默认自带版本

1
2
yum install -y nodejs
npm install -g hexo-cli

验证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
[root@ethan mysite] hexo version
INFO  Validating config
hexo: 6.3.0
hexo-cli: 4.3.1
os: linux 5.14.0-162.23.1.el9_1.x86_64 Rocky Linux 9.1 (Blue Onyx)
node: 20.2.0
acorn: 8.8.2
ada: 2.4.0
ares: 1.19.0
base64: 0.5.0
brotli: 1.0.9
cjs_module_lexer: 1.2.2
cldr: 43.0
icu: 73.1
llhttp: 8.1.0
modules: 115
napi: 8
nghttp2: 1.52.0
nghttp3: 0.7.0
ngtcp2: 0.8.1
openssl: 3.0.8+quic
simdutf: 3.2.9
tz: 2023c
undici: 5.22.0
unicode: 15.0
uv: 1.44.2
uvwasi: 0.0.16
v8: 11.3.244.8-node.9
zlib: 1.2.13

至此Hexo博客系统就完成了部署

1.3 建立站点

基本的建站步骤，这里采用手动创建站点目录

1
2
cd /root
mkdir mysite

初始化站点根目录

1
hexo init

此时/root/mysite将作为后续Hexo博客系统的站点根目录

相关站点的目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
[root@ethan mysite]# tree -L 1
.
├── _config.landscape.yml             
├── _config.yml             # 最重要的全局站点配置文件
├── db.json
├── node_modules
├── nohup.out
├── package.json
├── package-lock.json
├── public									# 存放最终生成的静态文件，用于Apach或者Ngnix进行Document Root的设置进行读取，对外提供Web服务
├── scaffolds
├── source                  # 这里存放需要发布的MD文件
└── themes                  # 这里存放主题文件

这里一个文件和三个文件夹最重要：

1、_config.yml文件：全局配置文件，包括页面标题、页面介绍等基本信息，这里配置的信息最重要就是主题的设置，例如设置theme: next

2、source：这里存放需要发布的MD文件，后续可以直接将MD文件存放在这里，Hexo通过--wathc参数会实时监视该文件夹，生成静态文件

3、themes：这里存放主题文件

4、public：存放最终生成的静态文件，用于Apach或者Ngnix进行Document Root的设置进行读取，对外提供Web服务

1.4 Hexo全局参数配置

这里简单介绍几个必须修改的字段，供参考

1、title: 张先生的深夜课堂，这里作为网页打开标题

2、language: zh-CN，如果选择中文

3、timezone: ‘Asia/Shanghai’时区建议

4、theme: next，主题的配置，这里为了使用next主题，增加一行

特别注意，默认配置文件最后有一行，主题默认为landscape，建议作为注释，否则运行Hexo进程会报错

#theme: landscape

5、url: https://www.ethanzhang.xyz/，修改为实际的网页地址，注意这里的`http或者https`前缀

如果GitHub Page, 参考修改为 ‘https://username.github.io/project‘

2 主题

类似Hugo，Hexo支持大量主题，这里非常推荐一款主题Next，开箱即用

官网链接：https://github.com/theme-next/hexo-theme-next

2.1 安装

直接采用Git安装或者手动安装方式，前者的好处是在于建立了本地Git仓库并保持远程仓库信息，将来可以使用git pull进行更新

1
2
cd /root/mysite
git clone https://github.com/theme-next/hexo-theme-next themes/next

此时next主题安装完成

这里查看next主题的整个文件框架

1
2
3
4
5
6
7
8
9
10
11
12
13
[root@ethan mysite]# tree themes/next/ -L 1
themes/next/
├── _config.yml
├── crowdin.yml
├── docs
├── gulpfile.js
├── languages
├── layout
├── LICENSE.md
├── package.json
├── README.md
├── scripts
└── source

同样这里最重要的文件仍然是_config.yml主题参数配置文件

2.2 主题参数配置

可参考：https://theme-next.org/docs/theme-settings/

基本上next主题开箱即用，可定义的参数特别多，可玩性较高

2.2.1 备案号

个人博客都应主动向公安主管部门进行备案，因此需要在网站上主动显示备案信息号

在配置参数中footer:下的copyright: 字段信息，可以填入该备案信息号

2.3 升级主题

进入当前主题文件目录下，使用git pull命令进行升级

1
2
cd themes/next
git pull

3 实际使用生成内容

一般使用Typora、Obsidian等写作文件，生成Markdown文件后，直接上传至站点根目录的source目录下

关键步骤，使用hexo二进制文件对source目录下的Markdown文件进行扫描，通过主题文件生成格式化静态文件

hexo具体命令参数如下：

1
2
3
hexo generate
- 简写
hexo g

其他可以使用参数

1
2
3
4
5
-w, --watch	监视文件变动
-b, --bail	生成过程中如果发生任何未处理的异常则抛出异常
-f, --force	强制重新生成文件
Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。
使用该参数的效果接近 hexo clean && hexo generate

3.1 最佳实践

实际上我们习惯更关注与博客内容的创作，创作后的内容文件希望直接上传至规定目录后，系统自动实时创建更新，刷新页面后将立即获得所见即所得的效果

因此Hexo程序应在后台运行，形成一个后台运行的进程，并实时监测source目录下内容的变化，因此建议使用一下命令：

1
nohup hexo g --w 2>&1 &

3.2 内容创作

这里还有一个非常重要的提示，就是对于内容文件Markdown文件中一些预定义的关键字的说明

例如Hexo如何知道你对于分类和标签等内容的识别？

这些预定义的关键字，官网称之为Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量

官网参数定义如下：

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章的永久链接，永久链接应该以 / 或 .html 结尾 null
excerpt 纯文本的页面摘要。使用 该插件 来格式化文本
disableNunjucks 启用时禁用 Nunjucks 标签 {{ }}/{% %} 和 标签插件 的渲染功能 false
lang 设置语言以覆盖 自动检测 继承自 _config.yml

一般使用title、date、tags、categories、description五个参数即可

特别注意是关于description参数，建议最好使用，这样在首页中就能够以省略方式，通过description参数内容去在首页进行展示，而不是将该文章全部进行显示