基于 Hexo 快速构建个人静态博客系统

Hexo 是一个快速、简洁且高效的博客框架。

基于 Markdown 解析出文章内容,快速生成静态页面文件。

本文以当前博客为例,介绍 Hexo 如何快速建立一个静态博客,并部署在 Github Pages 上(如果是部署在 Gitee 或 Coding 上,可自行修改本文中不一样的地方)。

关于 Hexo 的更多信息,详见官网:https://hexo.io/zh-cn

1. Hexo

1.1. 安装

依赖:

安装:

1
2
# 全局安装
$ npm install hexo-cli -g

1.2. 初始化

新建一个目录,用于存放 Hexo 初始化之后的所有文件,之后安装主题、写文章、网站配置等都在这个目录下。

目录名称建议取博客地址,比如:xxxxx.github.io(因为我的博客是部署在 Github Pages 上的,xxxxx 对应 Github 用户名,详见 3.1. 创建 Github 仓库)。

1
$ hexo init xxxxx.github.io

1.3. 个性配置

1
2
3
4
5
# 进入上一步初始化好的主目录
$ cd xxxxx.github.io

# 打开配置文件
$ vim _config.yml

文件 _config.yml 对应整个站点的配置,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
# Site
title: whoru
subtitle: '学习、分享、交流、沉淀'
description: 'Talk is cheap, just do IT.'
keywords:
author: whoru.S.Q
language: zh-CN
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.sqiang.net
root: /
permalink: :year/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 代码高亮设置
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace: ''
wrap: true
hljs: false

# 首页分页设置
index_generator:
path: ''
per_page: 5
order_by: -date

# 归档页分页设置
per_page: 20
pagination_dir: page

# 主题
theme: landscape

# 博客发布地址(对应 Github 上创建的 Pages 仓库)
deploy:
type: git
repo: https://github.com/whorusq/xxxxx.github.io.git

1.4. 启动本地预览

1
2
3
$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

1.5. 浏览器访问

地址栏输入 http://localhost:4000 访问,如下图:

2. 主题 NexT

NexTHexo 下一个优雅且强大的主题,详见官网:https://theme-next.org/docs/

2.1. 安装

方式一:Git
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 1. 进入初始化好的 Hexo 根目录
$ cd whorusq.github.io

# 2. 拉取 NexT 最新代码(默认分支 master)
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

# 查看所有分支
$ cd themes/next
$ git tag -l
...
v7.5.0
v7.6.0
v7.7.0
v7.7.1

# 切换主题到不同版本
$ git checkout tags/v7.5.0

# 切回最新的 master
$ git checkout master
方式二:直接下载
1
2
3
4
5
6
7
8
# 1. 进入初始化好的 Hexo 根目录
$ cd whorusq.github.io

# 2. 手动创建主题目录
$ mkdir themes/next

# 3. 下载主题源码并解压
$ curl -L https://api.github.com/repos/theme-next/hexo-theme-next/tarball | tar -zxv -C themes/next --strip-components=1

2.2. 个性配置

1
2
3
4
5
# 进入主题目录
$ cd themes/next

# 打开配置文件
$ vim _config.yml

⚠️ 注意:主题下的 _config.yml 文件是当前主题定制的配置项,涉及页面样式、单页面、菜单等具体展示层的东西,与 Hexo 根目录下的 _config.yml 功能和适用范围不同,要区别开。

详细的主题配置说明见官网,下面是当前博客的一份示例配置,同样只摘取了部分配置,只用于举例说明各主要配置项

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
49
50
51
52
53
54
55
56
57
58
# 页面底部设置
footer:

# 文章版权展示设置
creative_commons:

# 主题的四种风格
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

# 菜单设置
# 对应的单页需使用 hexo new page "about" 创建
menu:
home: / || home
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
# commonweal: /404/ || heartbeat

# 侧边栏设置
sidebar:

# 侧边栏头像
avatar:

# 侧边栏底部社交链接
social:

# 友情连接
links:

# 文章索引设置
toc:

# 首页展示「阅读全文」链接
read_more_btn: true

# 文章尾部赞赏设置
reward_settings:

# 展示相关文章
related_posts:

# 标签云样式
tagcloud:

# Multiple Comment System Support
# 是否开启多评论切换
comments:

# 开启本地搜索
local_search:

2.3. 本地预览

1
2
3
4
5
# 返回根目录
$ cd xxxxx.github.io

# 启动服务
$ hexo s

启动后,地址栏再次输入 http://localhost:4000 访问。

3. 发布

3.1. 创建 Github 仓库

在 Github 创建一个新仓库,名称为 xxxxx.github.io,其中 xxxxx 是你的 Github 用户名。如果要开启 Pages 服务,则必须遵守这个规则。

创建好之后,浏览器直接输入 xxxxx.github.io 访问。

进入仓库设置,找到 GitHub Pages 部分,可自定义域名和开启 HTTPS 支持。

3.2. 安装插件

1
$ npm install hexo-deployer-git --save

3.3. 修改配置

1
2
3
# 进入根目录,打开 Hexo 全局配置文件
$ cd xxxxx.github.io
$ vim _config.yml

修改如下配置:

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/xxxxx/xxxxx.github.io.git

关于该该插件的更多详细配置,参见 https://github.com/hexojs/hexo-deployer-git

3.4. 执行命令

1
2
3
4
5
6
7
$ hexo clean && hexo deploy

# 或者直接执行这条命令(常用)
# 相当于为文章生成静态文件,然后部署到指定的仓库
# g ---> generate
# d ---> deploy
$ hexo g -d

3.5. 浏览器访问

输入地址:https://xxxxx.github.io

4. 附录

4.1. Hexo 常用命令

完整的命令列表及说明参见官网指令部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 以指定目录初始化 Hexo,不指定到话则使用当前目录
$ hexo init xxxxx.github.io

# 创建单页
$ hexo new page "about"

# 创建文章
$ hexo new post "一篇新文章的标题"

# 启动本地服务
$ hexo s

# 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
# 在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,可能需要运行该命令。
$ hexo clean

# 为文章生成静态文件
$ hexo g

# 为文章生成静态文件,然后部署到指定仓库
$ hexo g -d

4.2. 推荐插件

为每篇文章生成一个唯一 ID,详见https://github.com/Rozbo/hexo-abbrlink#readme

1
2
3
4
5
6
# 1. 安装
$ npm install hexo-abbrlink --save

# 2. 添加 Hexo 配置
$ cd xxxxx.github.io
$ vim _config.yml
1
2
3
4
5
6
7
8
# 注释掉默认配置
# permalink: :year/:title/

# 修改、添加以下内容
permalink: post/:abbrlink.html
abbrlink:
alg: crc32 # 算法: crc16(default) and crc32
rep: dec # 进制: dec(default) and hex
hexo-filter-nofollow

为外链添加 rel="external nofollow noreferrer",详见https://github.com/hexojs/hexo-filter-nofollow

1
2
3
4
5
6
# 1. 安装
$ npm install hexo-filter-nofollow --save

# 2. 添加 Hexo 配置
$ cd xxxxx.github.io
$ vim _config.yml
1
2
3
4
5
6
# 添加以下配置
nofollow:
enable: true
field: site
exclude:
# - 'exclude1.com'
hexo-generator-searchdb

开启 NexT 主题的本地搜索需要此插件,详见https://github.com/theme-next/hexo-generator-searchdb

1
2
3
4
5
6
# 1. 安装
$ npm install hexo-generator-searchdb --save

# 2. 修改 NexT 主题配置
$ cd xxxxx.github.io/themes/next/
$ vim _config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 修改如下部分
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false
hexo-generator-sitemap

部署的时候自动生成 sitemap.xml 文件,便于爬虫抓取或手手动提交,插件的使用详见:

1
2
3
4
5
6
7
# 1. 安装
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

# 2. 添加 NexT 主题配置
$ cd xxxxx.github.io/themes/next/
$ vim _config.yml
1
2
3
4
5
# 添加如下部分
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

⚠️ 注意:百度爬虫由于操作生猛,已经被 Github 屏蔽,所以部署在 Github Pages 上的网站无法被收录,需要借助其它平台的 Pages 服务,可自行搜索。