繁华落尽

Hexo-构建博客详解

Hexo - 快速、简洁且高效的博客框架
英文官网 https://hexo.io/
中文官网 https://hexo.io/zh-cn/

Hexo的安装

利用基于 Node.js 的 Hexo 可以快速搭建一个博客网站。搭建前必须安装 Node.js 和 Git。Node.js 是一款开源且跨平台的服务器端和网络应用,使用 JavaScript 开发。Git 是一款免费、开源的分布式版本控制系统。安装过程中全点下一步即可。之后,请参照官方中文文档进行 Hexo 的安装。

Hexo的使用

初始化

选择一个目录作为Hexo站点的根目录,执行初始化命令:

1
hexo init .

命令中的.表示的是当前目录,也可以指定到其他的目录。

启动服务

在站点的根目录中执行启动服务的命令:

1
hexo server

浏览博客

服务启动后在浏览器中输入博客的地址 http://localhost:4000/ 即可进行浏览。

Hexo的发布

绑定域名

绑定域名后,不能立即生效,需要等域名解析的服务器刷新缓存,刷新的时间视服务器而定,一般在48小时内。

github绑定域名

[1] 域名解析中添加如下配置:

1
2
3
@ A 192.30.252.153
@ A 192.30.252.154
www CNAME username.github.io

[2] 项目根目录添加 CNAME 文件,文件名大写无后缀,文件内容为自己的域名。
[3] 设置好后,等待域名生效。

coding绑定域名

coding绑定域名的详细操作见官方文档,已经很详细了。

Hexo发布

[1] 安装发布的插件,执行以下命令:

1
npm install hexo-deployer-git --save

如果不安装插件直接使用命令发布,会提示错误:

1
ERROR Deployer not found: git

[2] 修改站点配置文件_config.yml,设置发布的信息。配置信息如下:
Hexo发布到github
配置内容如下:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/lyyybz/blog.git
branch: gh-page

Hexo发布到coding
配置内容如下:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://git.coding.net/lyyybz/blog.git
branch: master

Hexo同时发布到github和coding
配置内容如下:

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
coding: https://git.coding.net/lyyybz/blog.git,master
github: https://github.com/lyyybz/blog.git,master

[3] 文件配置好后,使用命令进行发布,如下:

1
2
3
hexo clean
hexo g
hexo d

[4] 发布成功,此时在github或者coding中就可以看到刚刚发布的博客。

Hexo的进阶

修改主题为Next

[1] 使用命令下载Next主题到themes目录中

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

[2] 修改站点配置文件_config.yml中的theme标签:

1
theme: next

[3] 修改成功后,重新启动Server就能够看到修改后的效果。
[4] Next主题一共有三种样式,可以通过修改Next主题的配置文件_config.yml来修改:

1
2
3
4
5
6
7
8
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces

显示阅读全文按钮

在文章中添加more标签即可,形式如下:

1
<!--more-->

标签以上的内容将以摘要的形式在首页显示,并出现阅读全文的按钮。

添加本地搜索

[1] 安装 hexo-generator-search,在站点根目录下执行以下命令:

1
npm install hexo-generator-search --save

[2] 在主题的配置文件themes/next/_config.yml中添加:

1
2
3
search:
path: search.xml
field: post

[3] 但是这个本地搜索只能搜英文,不能搜索汉字。

文章中添加图片

[0] 在 hexo 中使用本地图片是件非常让人纠结的事情,在 markdown 里的图片地址似乎永远无法和最后生成的网页保持一致。这些问题使得我一度放弃使用本地图片而选择用图床,但被移动运营商无耻的横条广告逼得打算上https,但是图床只支持http就成了问题。

hexo 下插入图片现在大概有2中方案:

  • 放在根目录,早期大部分的方案是把图片放在 source/img 下,然后在 markdown 里写 ! [img] (/source/img/img.png)显然这样在本地的编辑器里完全不能正确识别图片的位置。
  • asset-image,在 hexo 2.x 时出现的插件,后来被吸纳进 hexo 3 core,用法的介绍见资源文件夹 | Hexo 。比较尴尬的是,这种方法直接放弃了 markdown 原来的语法,使用类似的语法。markdown 本来有插入图片的语法不好好支持,专门用一个新的语法来插入本地图片,让我这种强迫症不太能接受。

本文推荐使用的是 CodeFalling/hexo-asset-image,使用方法如下:
[1] 修改站点配置文件_config.yml中post_asset_folder标签,该标签的值默认为false。

1
post_asset_folder: true

[2] 站点目录中执行命令。

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

[3] 创建与文章文件同名的文件夹,将图片放到该文件夹中。

1
2
3
4
Hexo
├── 1.jpg
└── 2.jpg
Hexo.md

[4] 在Hexo.md中使用Hexo文件夹中的图片。

1
2
![“图片1的描述信息”](1.png)
![“图片2的描述信息”](2.png)

[5] 可以根据自己的需求修改图片的大小,修改主题目录下source\css_common\scaffolding\文件夹中的base.styl文件的第63行。

1
2
3
4
5
6
img {
display: block;
margin: left;
max-width: 50%;
height: auto;
}

[6] 图片添加成功,至于添加效果嘛,本文中随处可见,不是吗 ^_^!

文章中添加音乐

[0] 添加音乐需要找一个在线音乐的网站,本站使用的是网易云音乐。
[1] 在网易云音乐,搜索想要的歌曲,点击歌曲名字进入播放器页面,点击生成外链播放器;复制代码,直接粘贴到博文中即可。
""
""
[2] 文章中插入的代码如下:

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=347230&auto=1&height=66"></iframe>

其中auto=0表示不自动播放,若需要进入页面后自动播放则设置为1即可。
[3] 添加成功,添加效果如下,有的时候添加上后显示正常,但是歌就是播放不了,可能是网易服务器的原因,只能等他自己好了。。

文章中添加视频

[1] 寻找视频,获取视频的代码。
[2] 插入视频的代码:

1
2
3
4
5
<iframe
height=249 width=255
src="http://player.youku.com/embed/XNjcyMDU4Njg0"
frameborder=0 allowfullscreen>
</iframe>

[3] 效果如下(广告也跟着过来了- -!):


还有个问题是,发布到coding中,有时候视频不能显示,显示一片空白,可能是coding服务器的问题。

Hexo的定制

修改底部的logo栏

文件位置:\themes\next\layout_partials\footer.swig文件,可以根据自己的需求增删东西。

Hexo常用命令

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

Hexo常见问题

提示 fatal: Not a git repository (or any of the parent directories): .git

提示说没有.git这样一个目录,解决办法执行以下命令:

1
git init

部署后主题显示异常

本地Server主题正常,Deploy部署到github或者coding后,主题样式显示异常,图片都无法显示。如下图所示:
“本地Server正常”
“部署到github后”
导致这种现象的原因是发布的时候项目的根目录设置错误。修改站点配置文件_config.yml中的root标签,值设置为github或coding中的项目名,如下:

1
root: /blog

错误 ERROR Plugin load failed: hexo-server

错误原因:Besides, utilities are separated into a standalone module. hexo.util is not reachable anymore . 解决方法,执行命令:

1
sudo npm install hexo-server

执行 hexo server,提示:Usage: hexo ….

错误原因可能是没有生成本地服务。解决方法,执行命令:

1
npm install hexo-server --save

执行命令后提示:hexo-server@0.1.2 node_modules/hexo-server …. 表示成功了。参考官方文档

站点配置文件详解

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 网站
title: 为学 #网站标题
subtitle: 天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。 #网站副标题
description: 天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。 #网站描述
author: lyyybz #您的名字
language: zh-CN #网站使用的语言
timezone: #网站时区。Hexo 默认使用您电脑的时区
# URL 网址
## 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://willxue.top
permalink: :year/:month/:day/:title/ #生成文件名字的格式我改成blog/:title:year:month:day/
permalink_defaults:
# Directory 目录配置
source_dir: source #源文件夹,这个文件夹用来存放内容。
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件。
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #nclude code 文件夹
i18n_dir: :lang #国际化(i18n)文件夹
skip_render: #跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
# Writing 文章
new_post_name: :title.md # 新建文章默认文件名
default_layout: post # 默认布局
titlecase: false # Transform title into titlecase
external_link: true # 在新标签中打开一个外部链接,默认为true
filename_case: 0 #转换文件名,1代表小写;2代表大写;默认为0,意思就是创建文章的时候,是否自动帮你转换文件名,默认就行,意义不大。
render_drafts: false #是否渲染_drafts目录下的文章,默认为false
post_asset_folder: false #启动 Asset 文件夹
relative_link: false #把链接改为与根目录的相对位址,默认false
future: true #显示未来的文章,默认false
highlight: #代码块的设置
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag 分类和标签的设置
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名
# Date / Time format
## 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 分页
## Set per_page to 0 to disable pagination
per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
feed:
type: atom #feed 类型 (atom/rss2)
path: atom.xml #rss 路径
limit: 20 #在 rss 中最多生成的文章数(0显示所有)
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/imwillxue/imwillxue.github.com.git
branch: master

Next配置文件详解

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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# Place your favicon.ico to /source directory.
favicon: /favicon.ico #站标 可以放在hexo文件夹下的/source里
# Set default keywords (Use a comma to separate)
keywords: "为学,willxue,willxue.top" #网站关键字
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: #rss这里不设置 引文站点配置文件已经配置了 需要安装插件
# Specify the date when the site was setup
since: 1990 #网站时间 从xx开始 类似 1990-2016
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu: #菜单路径设置 如果hexo在二级目录放置要去掉/
home: /
archives: /archives #归档
tags: /tags #标签
categories: /categories #分类
about: /about #关于我
commonweal: /404.html #公益404
# Enable/Disable menu icons.
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of menu item and value is the name of FontAwsome icon.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons: #icon图标
enable: true
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes #next的三个scheme
#scheme: Muse
#scheme: Mist
scheme: Pisces
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social links #社交链接
social:
GitHub:
Weibo:
Others:
# Social Icons #社交的图标
social_icons:
enable: true
# Icon Mappings
GitHub: github
Twitter: twitter
Weibo: weibo
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
# default : /images/default_avatar.jpg
avatar: http://7xrz9n.com1.z0.glb.clouddn.com/logo.png #头像
# TOC in the Sidebar #文章自动显示目录
toc:
enable: true
# Automatically add list number to toc. #目录是否自动显示数字序号
number: false
# Creative Commons 4.0 International License.
# http://creativecommons.org/ #自由协议
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:
sidebar:
# Sidebar Position, available value: left | right
position: left
#position: right
# Sidebar Display, available value:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggle icon.
display: post
#display: always
#display: hide
#display: remove
# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------
# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
# enabled: [true/false] - Replace with specific image
# image: url-of-image - Images's url
custom_logo:
enabled: false
image:
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically Excerpt
auto_excerpt:
enable: false
length: 150
# Use Lato font
use_font_lato: true
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# MathJax Support
mathjax:
# Swiftype Search API Key
#swiftype_key:
# Baidu Analytics ID
#baidu_analytics:
# Duoshuo ShortName
duoshuo_shortname: imwillxue
# Disqus
#disqus_shortname:
# Baidu Share
# Available value:
# button | slide
#baidushare:
## type: button
# Share
#jiathis:
#add_this_id:
# Share
duoshuo_share: true
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:
# Google Analytics
#google_analytics:
# CNZZ count
#cnzz_siteid:
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: true
user_id: 6262178932196377345
admin_nickname: 神
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
enable: false
app_id: #<app_id>
fb_admin: #<user_id>
like_button: #true
webmaster: #true
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: QImiFijLSOHYufsazlBVlwLg-gzGzoHsz
app_key: AMcYaNHy9Y5OdH42k0d4uSED
# Tencent analytics ID
# tencent_analytics:
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
## 文章末尾是否显示打赏按钮
donate:
enable: true
text: Enjoy it ? Donate me ! 欣赏此文?求鼓励,求支持!
alipay:
wechat:
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------
# Motion
use_motion: true
# Fancybox
fancybox: true
# Static files
vendors: vendors
css: css
js: js
images: images
# Theme version
version: 0.5.0