使用Hexo搭建博客之基础篇

发表于 | 更新于 | 评论数： | 阅读次数：
本文字数： 11k | 阅读时长 ≈ 10 分钟

简介

  • Hexo：A fast, simple & powerful blog framework，即一个快速、简单且强大的博客框架。
  • 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="8.11.3"
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
14
npm install --no-optional --save hexo-generator-sitemap
npm install --no-optional --save hexo-generator-baidu-sitemap
npm install --no-optional --save hexo-generator-feed
npm install --no-optional --save hexo-generator-search
npm install --no-optional --save hexo-generator-searchdb
npm install --no-optional --save hexo-generator-index
npm install --no-optional --save hexo-generator-archive
npm install --no-optional --save hexo-generator-tag
npm install --no-optional --save hexo-generator-category
npm install --no-optional --save hexo-tag-dplayer
npm install --no-optional --save hexo-tag-aplayer
npm install --no-optional --save hexo-deployer-rsync
npm install --no-optional --save hexo-deployer-git
npm install --no-optional --save hexo-symbols-count-time

博客介绍

启动服务

  • 切换到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
154
155
156
157
158
159
160
161
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html, 允许自行更换页面语言
## Source: https://github.com/hexojs/hexo/

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

# URL: 网址配置
## 如果网站是放在子目录中，将url设置成'http://yoursite.com/child'，将root设置成'/child/'
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.xiaocoder.com
root: /
## 文章链接地址格式, 即文章存放的目录
permalink: :year/:month/:day/:title/
permalink_defaults:

# 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:

# Writing: 写作配置
## 新建博文的默认名称
new_post_name: :title.md # File name of new posts
## 默认布局模板
default_layout: post
## 是否将标题转换成标题形式（首字母大写）
titlecase: false # Transform title into titlecase
## 在新标签页面中打开网页
external_link: true # Open external links in new tab
## 把文件名称转换为(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: false
  ### 是否将tab替换为空格
  tab_replace: true

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

# Date / Time format: 日期与时间格式
## Hexo 使用 Moment.js 来解析与显示时间
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination: 分页配置
## 设置 per_page 值为 0 则禁用分页
## Set per_page to 0 to disable pagination
## 分页路径, 在public中可以看到
pagination_dir: page
## 首页的分页设置
## 需要插件: npm install --no-optional --save hexo-generator-index
index_generator:
  ### 页面个数
  per_page: 5
  order_by: -date

## 归档页的分页设置
## 需要插件: npm install --no-optional --save hexo-generator-archive
archive_generator:
  ### 页面个数
  per_page: 20
  ### 按照年份归档
  yearly: true
  ### 按照月份归档
  monthly: true

## 标签页的分页设置
## 需要插件: npm install --no-optional --save hexo-generator-tag
tag_generator:
  ### 页面个数
  per_page: 10

# Extensions: 拓展配置
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## 主题
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

# 统计文章字数及阅读时长
## 需要插件: npm install --no-optional --save hexo-symbols-count-time
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

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

# Deployment: 部署配置
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: rsync
  host: 172.18.10.2
  user: root
  root: /data/www
  port: 22

package.json文件

  • 此文件中描述了Hexo的基本参数及依赖插件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.7.1"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-baidu-sitemap": "^0.1.2",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }
}

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
3
themes
|-- landscape
|-- next
  • 以上一个是默认主题(landscape)和一个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则是图片描述(可选参数)。
页面
  • 当我们想创建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 -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: 172.18.10.2
  user: root
  root: /data/www
  port: 22

ALL

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

域名解析

  • 入手1个域名，将其解析到你的GitHub或者云服务器上都是可以的。
  • 将1个域名解析到自己的云服务器上：
  • 将1个域名通过CNAME的方式，解析到之前的域名上：
  • 此处，我购买了2个域名，将1个域名解析到云服务器上，将另1个解析到之前的域名上，读者只需入手1个域名即可。

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
有你就有世界，感谢有你，昕！
0%