基于 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

NexT 是 Hexo 下一个优雅且强大的主题，详见官网：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 服务，可自行搜索。