Hexo Blog 搭建

Hexo 安装及配置

安装

本地环境要求:nodejs 6.9+、git

1
$ npm install -g hexo-cli

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

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

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

配置 _config.yml

您可以在 _config.yml 中修改大部分的 配置 。另外有几点需要注意:

  • 需要填写多个值的属性可以用类似数组的形式填写,例如 keywords: [前端, 科技, 读书, 终身学习]

  • 将文章从 Jekyll 迁移至 Hexo ,只需把 _posts 文件夹内的所有文件复制到 source/_posts 文件夹,把 _drafts 文件夹内的所有文件复制到 source/_drafts 文件夹,并在 _config.yml 中修改 new_post_name 参数,new_post_name: :year-:month-:day-:title.md

  • 您可以将 Hexo 生成的静态文件部署到 GitHub Page

    1
    2
    3
    4
    deploy:
    type: git
    repository: https://github.com/AustinXT/AustinXT.github.io.git
    branch: master

scaffolds

当您新建文章时,Hexo 会根据 模版 文件夹(scaffold)来建立文件。您可以在模板中的 Front-matter 预定义参数。

参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址

分类具有顺序性和层次性,标签没有顺序和层次。例如,并列+子分类如下:

1
2
3
4
5
6
7
8
categories:
- [Linux, Hexo]
- [Tools, PHP]
# 其分类层级为
# - Linux
# - Hexo
# - Tools
# - PHP

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

此外,可以在 source 目录下添加标签页面,运行以下命令

1
$ hexo new page "tags"

同时,在 source 目录下会生成一个tags文件夹,里面包含一个index.md文件

由于每次将博客部署到 GitHub Page,GitHub Page Setting 里设置好的域名会被刷新为空,因此需要在 source 目录下新建一个文件,命名为 CNAME ,里面填写域名,例如 austinxt.com

themes

Hexo 会根据主题来生成静态页面。您可以在 GitHub 检索「hexo-theme」,按 start 数排序,来筛选主题。我大致看了二十几个主题,其中,特别喜欢 hexo-theme-cactus 的风格,配色好看,又极其简约,可惜功能不符合要求。符合「首页文章摘要」和「正文有目录结构且定位当前标题」两项要求有如下五个主题:

前三个略显花哨,最后选择了 start 数最高的 NexT 主题(一开始只看到 GitHub 仓库提供的 Pisces 主题示例,不太喜欢,所以继续去点其他主题了)。

安装 NexT 主题,在更目录下运行命令

1
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

根目录的配置文件的 theme 属性

1
theme: next

如何写博客

在根目录下输入一下命令,会在 source/_post 目录下生成一个按照模板构建的 Markdown 文件

1
$ hexo new [layout] <title>

标签插件(Tag Plugins)

Hexo 的 Markdown 还能插入标签插件,使文章渲染得更加优雅。

引用块

引用书上的句子

1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

引用 Twitter

1
2
3
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

反引号代码块

\

[title] [url] [link text] code snippet ```
1
2
3

```javascript test.js http://austinxt.com blog
code snippet

Gist

在文章中嵌入 Gist。

1
{% gist gist_id [filename] %}

iframe

在文章中插入 iframe。

1
{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

1
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

Youtube

在文章中插入 Youtube 视频。

1
{% youtube video_id %}

常用命令

1
2
3
4
5
6
hexo new "postName" #新建文章
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

NexT 主题配置

themes/next 目录下的 _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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
# 菜单
menu:
about: /about/ || user
tags: /tags/ || tags
archives: /archives/ || archive

# 主题
scheme: Mist

# 社交网站
social:
GitHub: https://github.com/AustinXT || github
E-Mail: mailto:164640966@qq.com || envelope
FB Page: https://www.facebook.com/100012833825444 || facebook

# 友情链接
links_icon: link
links_title: 友情链接
links_layout: inline
links:
阳志平: https://www.yangzhiping.com

# 头像
avatar:
url: http://images.stanine.top/20190522170101.png
rounded: true

# 首页摘要
excerpt_description: true
auto_excerpt:
enable: true
length: 150
read_more_btn: true

# 赞赏
reward_settings:
enable: true
comment: 「谢谢您支持」
reward:
wechatpay: http://images.stanine.top/Donate.JPG

# 代码高亮
highlight_theme: night

# 数学公式
math:
enable: true
per_page: true # 在文章的Front-matter 配置 mathjax: true 即可使用
engine: mathjax
mathjax:
cdn: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML

# pangu 插件
pangu: true
vendors:
pangu: //cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js

# gitalk
gitalk:
enable: true
github_id: AustinXT # Github repo owner
repo: austinxt.github.io # Repository name to store issues
client_id: 7bb306012bddd706324d # Github Application Client ID
client_secret: # Github Application Client Secret
admin_user: AustinXT
distraction_free_mode: true

# 访问统计
busuanzi_count:
enable: true
post_views: true
post_views_icon: eye

# 搜索
# 需要 npm install hexo-generator-searchdb --save
local_search:
enable: true
trigger: auto
top_n_per_article: 1
unescape: false

local_search 功能还需在根目录的 _config.yml 末尾添加如下配置

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 500

ChangeLog

  • 2019-07-17 添加 CNAME 文件
  • 2019-05-24 初稿
「谢谢您支持」