Xiao's Blog

不忘初心, 方得始终

使用Hexo搭建博客之基础篇

发表于 更新于 分类于 Valine：

简介

  • Hexo：一个快速、简单且强大的博客框架。
  • Hexo的简单之处在于你可以用30分钟，甚至更短的时间就可以生成一个属于你自己的博客。
  • Hexo的强大之处在于你对博客界面细节的调整，有可能用上1天的时间。
  • 在基础篇中，我着重介绍如何搭建Hexo的环境以及博客的组成部分。

准备环境

  • 俗话说：巧妇难为无米之炊，接下来我们就Step by Step的准备环境。
  • 因为，以下涉及到软件的安装，故需要提前设置软件源：《CentOS/Ubuntu的国内软件源》。

Git

CentOS系统

  • 命令如下：
1
yum install -y git-core

Ubuntu系统

  • 命令如下：
1
apt install -y git-core

Node.JS

  • 方式一：从官网下载最新LTS Linux Binaries x64包。
  • 方式二：使用以下命令下载指定版本的node.js包：
1
2
NODEJS_VERSION="12.16.1"
wget https://npm.taobao.org/mirrors/node/v${NODEJS_VERSION}/node-v${NODEJS_VERSION}-linux-x64.tar.xz -O node.txz
  • 安装Node.JS，注意修改文件名：
1
2
3
4
mkdir -p /usr/local/node/
tar -Jxf node.txz --strip-components=1 -C /usr/local/node/
ln -s /usr/local/node/bin/* /usr/local/bin/
rm -f node.txz
  • 检查Node.JS的版本：
1
node --version
  • 设置npm的源：
1
npm config set registry https://registry.npm.taobao.org

Hexo

  • 使用npm安装hexo-cli：
1
npm install -g --no-optional hexo-cli
  • 创建软连接：
1
ln -s /usr/local/node/bin/hexo /usr/local/bin/hexo

相关插件

  • 创建blog的根目录：
1
mkdir -p /blog
  • 初始化blog目录：
1
hexo init /blog
  • 切换到blog目录：
1
cd /blog
  • 安装常用的blog插件：
1
2
3
4
5
6
7
8
9
10
11
12
13
npm install --no-optional --save hexo-tag-dplayer
npm install --no-optional --save hexo-tag-aplayer
npm install --no-optional --save hexo-deployer-git
npm install --no-optional --save hexo-generator-tag
npm install --no-optional --save hexo-generator-feed
npm install --no-optional --save hexo-deployer-rsync
npm install --no-optional --save hexo-generator-index
npm install --no-optional --save hexo-generator-search
npm install --no-optional --save hexo-generator-archive
npm install --no-optional --save hexo-generator-sitemap
npm install --no-optional --save hexo-generator-category
npm install --no-optional --save hexo-generator-searchdb
npm install --no-optional --save hexo-generator-baidu-sitemap

博客介绍

启动服务

  • 切换到blog目录：
1
cd /blog
  • 启动服务，-P参数为可选项，指定占用的端口号，默认为4000：
1
hexo server [-p PORT]
  • 启动服务成功后，进入文章预览调试模式，在http://localhost:{PORT}/就可以预览生成的静态页面了。

目录介绍

  • _config.yml：WebSite(博客)的全局配置文件。
  • package.json：Hexo的参数及依赖插件，无需关注。
  • node_modules/：Hexo的扩展插件目录，无需关注。
  • scaffolds/：Hexo存放layout(布局)模板的目录。
  • themes/：Hexo存放博客主题的目录。
  • source/：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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html, 允许自行更换页面语言
## Source: https://github.com/hexojs/hexo/

# Site: 网站配置
## 标题
title: "Xiao's Blog"
## 副标题
subtitle: "不忘初心, 方得始终"
## 网站描述
description: "不忘初心, 方得始终"
## 网站关键字
keywords: "Linux,Python"
## 作者
author: "YuXiao"
## 网站语言
language: "zh-CN"
## 时区
timezone: 'Asia/Shanghai'

# URL: 网址配置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
root: /
## 文章链接地址格式
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true
  trailing_html: true

# Directory: 目录设置
## 资源目录
source_dir: source
## 公共目录, 存放生成的静态文件
public_dir: public
## 标签目录, 默认是tags, 实际存放在source/tags中
tag_dir: tags
## 档案目录, 默认是archives, 实际存放在source/archives中
archive_dir: archives
## 分类目录, 默认是categories, 实际存放在source/categories中
category_dir: categories
## 代码目录, 默认是downloads/code
code_dir: downloads/code
## 国际化目录, 默认跟language相同
i18n_dir: :lang
## 不需要渲染的文件或文件夹
skip_render:
  - 'robots.txt'

# Writing: 写作配置
## 新建博文的默认名称
new_post_name: :title.md
## 默认布局模板
default_layout: post
## 是否将标题转换成标题形式（首字母大写）
titlecase: false
external_link:
  ## 在新标签页面中打开网页
  enable: true
  field: site
  exclude: ''
## 把文件名称转换为禁用(0)、小写(1)、大写(2)
filename_case: 0
## 是否显示草稿
render_drafts: false
## 启用Asset目录, 文章资源目录
post_asset_folder: true
## 将链接改为与根目录的相对路径
relative_link: false
## 显示未来的文章
future: true
## 代码块的配置
highlight:
  ### 是否启用代码块
  enable: true
  ### 是否显示行数
  line_number: true
  ### 是否自动检测语言
  auto_detect: true
  ### 将tab替换为N个空格
  tab_replace: 4
  wrap: true
  hljs: true

# Home page setting: 主页设置
index_generator:
  ### 索引页的根路径
  path: ''
  ### 每页的文章数
  per_page: 5
  ### 排序方式
  order_by: -date

# Category & Tag: 分类与标签
## 默认分类
default_category: uncategorized
category_map:
tag_map:

# Metadata elements: 元数据元素
meta_generator: true

# Date / Time format
## Hexo 使用 Moment.js 来解析与显示时间
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## 若未提供更新日期，则使用发布日期
use_date_for_updated: true

# Pagination: 分页配置
## 设置 per_page 值为 0 则禁用分页
per_page: 5
pagination_dir: page

# 归档页的分页设置
archive_generator:
  per_page: 20
  yearly: true
  monthly: true

# 标签页的分页设置
tag_generator:
  per_page: 10

# Extensions: 拓展配置
## 主题
theme: next

# Sitemap: 站点地图
## 谷歌站点地图
## 依赖插件: npm install --no-optional --save hexo-generator-sitemap
sitemap:
  path: sitemap.xml
## 百度站点地图
## 依赖插件: npm install --no-optional --save hexo-generator-baidu-sitemap
baidusitemap:
  path: baidusitemap.xml

# Local Search: 本地搜索插件
## 依赖插件: npm install --no-optional --save hexo-generator-search
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# Deployment: 部署配置
deploy:
  type: "rsync"
  host: 127.0.0.1
  user: root
  root: /data/www
  port: 22

scaffolds

  • 此目录用于存放Hexo的layout(布局)模板的目录。
  • Hexo使用new命令新建文章、草稿和页面这3种默认layout布局，其中layout为可选参数，默认是post，允许用户自行更改模板文件。
1
hexo new [layout] NAME
布局 释义 路径
post 文章 sorce/_posts
draft 草稿 sorce/_drafts
page 页面 sorce
  • 备注：页面文件需要在themes(主题)的_config.yml文件中配置后才能正常显示。
  • layout(布局)模板文件放在scaffolds/目录下，文件名称就是layout的名称，每次新建时，Hexo会尝试在scaffolds/目录下寻找同名文件，并根据其内容建立博文。

themes

  • 此目录用于存放Hexo的博客主题的目录。
  • Hexo有非常好的主题拓展，支持的主题也非常丰富，此目录下每个目录都是一个主题。
1
2
themes
|-- next
  • 选择钟意的Hexo主题。

source

  • 此目录用于存放Hexo的博客资源的目录，目录下又分为不同的子目录或文件，以下将一一介绍。
_data
  • 此目录是用于存放主题的数据文件的，在Hexo的3.0版本引入。
  • 每个主题都会有_config.yml文件，用于配置主题，但是每次想升级主题时，即git pull时，就会发生冲突。
  • 数据文件的作用就是为了解决这一冲突，使主题资源文件和配置文件分离。
  • 此教程以Next主题为例，其他主题仅供参考。
  • 下载好主题后，复制主题的配置文件_config.yml到_data目录并更名为next.yml。
1
2
mkdir -p source/_data
cp themes/next/_config.yml source/_data/next.yml
  • 配置_data/next.yml，其他配置项自定义即可：
1
override: true
  • 博客全局配置文件_config.yml：
1
theme: next
  • 重启博客服务：
1
hexo clean && hexo server
  • 注意：每次修改此配置文件，都必须重启服务才能生效。
_posts
  • 当新创建的博文的布局layout模板选择的是post时，新建的博文会存放在此目录。
  • 此目录中存放着MarkDown格式的博文，即以.md为后缀的文件。
  • 当在博客全局配置文件_config.yml中启用post_asset_folder: true，此时目录中还会存放与博文名称一致的目录，用于存放博文资源。
  • 下面举个例子，以下是目录结构：
1
2
3
4
source
|-- _post
  |-- hello-world.md
  |-- hello-world/
  • 如何在文章中引用博文资源呢，只需在文章中使用如下标签即可：
1
{% asset_img IMAGE_NAME [IMAGE_DESCRIPTION] %}
  • 其中IMAGE_NAME就是博文资源目录中图片的名称(带后缀)，IMAGE_DESCRIPTION则是图片描述(可选参数)。
page
  • 当我们想创建1个页面时，使用命令hexo new page NAME，即可成功创建。
  • 创建完成后，就会在source/目录下生成与之对应的目录。
1
2
3
4
source
|-- categories
|-- tags
|-- about
  • 其中每个目录中包含一个index.md文件，即页面内容。
  • 完成页面内容的编辑工作之后，在_data/next.yml中配置menu即可。
1
2
3
4
5
menu:
  home: / || home
  archives: /archives/ || archive
  tags: /tags/ || tags
  about: /about/ || user
  • 重启博客服务，即可看到博客的导航栏变为如下所示：
images
  • 此目录为自建目录，用于存放博客全局的图片，如博客图标等。
  • 在_config.yml中引用，配置如下：
1
2
3
4
5
favicon:
  small: /images/favicon.png
  medium: /images/favicon.png
  apple_touch_icon: /images/favicon.png
  safari_pinned_tab: /images/favicon.svg

博客部署

GitHub

  • 免费：GitHub提供GitHub Pages服务是免费的，有300MB的空间。
  • 便捷：博客完全托管于GitHub上，无需花过多的时间去管理。
  • 缺点：可能对博客的管理灵活度减少，博客访问速度比较慢。
注册GitHub
  • 作为世界上最大的同性交友平台GitHub，你值得拥有。
  • 在2018年6月4日，Microsoft(微软)收购了GitHub，但是目前看来还没影响到我们的使用。
创建仓库
  • 创建1个新仓库，名称必须是用户名.github.io，比如我的用户名是YuXiaoCoder，我新建的仓库名就是YuXiaoCoder.github.io。
配置Git
  • 主要是配置user.name、user.email及一些优化参数：
1
2
3
4
5
6
git config --global user.name "YuXiaoCoder"
git config --global user.email "xiao.950901@gmail.com"
git config --global core.editor vim
git config --global merge.tool vimdiff
git config --global push.default simple
git config --global color.ui true
配置SSH
  • 配置服务器与GitHub可以通过密钥通信。
  • 若没有密钥，则需要生成密钥：
1
ssh-keygen -t rsa -P "" -C "xiao.950901@gmail.com"
  • 生成的密钥文件在.ssh目录，id_rsa为私钥，id_rsa.pub为公钥。
  • 将公钥添加到GitHub上：
1
头像 ---> Settings ---> SSH and GPG keys ---> New SSH key
  • 测试SSH：
1
ssh -T git@github.com
1
Hi YuXiaoCoder! You've successfully authenticated, but GitHub does not provide shell access.
配置博客
  • 配置博客的全局配置文件_config.yml：
1
2
3
4
5
# 依赖插件: npm install --no-optional --save hexo-deployer-git
deploy:
  type: git
  repo: git@github.com:YuXiaoCoder/YuXiaoCoder.github.io.git
  branch: master
绑定域名
  • 获取GitHub Pages的IP地址：
1
ping YuXiaoCoder.github.io
  • 参照域名解析，将此IP与自己的域名进行绑定。
  • 在博客的source目录下添加CNAME文件，此文件无后缀，内容为自己的域名：
1
xiaocoder.com

VPS

  • 收费：在各大云服务商购买云主机，费用不等。
  • 访问速度大大加快，增加了用户体验。
  • 增加了博客管理的灵活度。
  • 如需购置云主机，我可以给你一个合理的推荐。
配置博客
  • 配置博客的全局配置文件_config.yml：
1
2
3
4
5
6
7
# 依赖插件: npm install --no-optional --save hexo-deployer-rsync
deploy:
  type: rsync
  host: 127.0.0.1
  user: root
  root: /data/www
  port: 22

ALL

  • 部署博客：
1
hexo clean && hexo deploy

域名解析

  • 入手1个域名，将其解析到你的GitHub或者云服务器上都是可以的。
  • 将域名解析到自己的云服务器上：

Hexo命令

  • 获取帮助信息：
1
hexo help
  • 获取版本信息：
1
hexo version
  • 创建新的文章：
1
hexo new NAME
  • 创建新的页面：
1
hexo new page NAME
  • 生成静态文件：
1
hexo generate
  • 清理缓存文件：
1
hexo clean
  • 启动预览服务：
1
hexo server [-p PORT]
  • 生成静态文件并部署：
1
hexo deploy -g
  • 生成静态文件并预览：
1
hexo server -g
  • 命令的简写：
1
2
3
4
5
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
hexo c == hexo clean
请作者喝瓶肥宅快乐水