EZLippi-浮生志

Jekyll迁移到Hexo搭建个人博客

个人博客以前由jekyll搭建,主要问题是目录、Rss、sitemap无法自动生成,根据DRY的原则在网上找了下答案,最终发现了用Hexo来搭建博客的方法,配置完之后一劳永逸,目录、Rss和sitemap都是自动生成,解决了我之前的困惑。

从Jekyll迁移到Hexo

安装Hexo

  • 安装
1
2
3
4
mkdir hexo  #创建一个文件夹
cd hexo
npm install -g hexo-cli
npm install hexo --save
  • 部署Hexo:在Git shell 中输入
1
hexo init
  • 安装Hexo 插件:自动生成sitemap,Rss,部署到git等,建议安装
1
2
3
4
5
6
7
8
9
10
11
12
13
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

Hexo常用的几个命令

创建新博文

执行new命令,生成指定名称的文章至hexo\source_posts\postName.md。

1
hexo new [layout] "postName" #新建文章

其中layout是可选参数,默认值为post。有哪些layout呢,请到scaffolds目录下查看,这些文件名称就是layout名称。当然你可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的layout,比如post的layout默认是hexo\scaffolds\post.md

1
2
3
4
title: { { title } }
date: { { date } }
tags:
---

请注意,大括号与大括号之间我多加了个空格,否则会被转义,不能正常显示。

我想添加categories,以免每次手工输入,只需要修改这个文件添加一行,如下:

1
2
3
4
5
title: { { title } }
date: { { date } }
categories:
tags:
---

更多信息参考: Writing

运行服务器

1
$ hexo server

参考: Server

生成静态站点文件

1
$ hexo generate

参考: Generating

部署到Git

部署到Github前需要配置_config.yml文件

添加如下内容:

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

然后输入:

1
$ hexo deploy

参考: Deployment

fancybox

可能有人对这个Reading页面中图片的fancybox效果感兴趣,这个是怎么做的呢。
很简单,只需要在你的文章*.md文件的头上添加photos项即可,然后一行行添加你要展示的照片:

1
2
3
4
5
title: Jekyll迁移到Hexo建立个人博客
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
---

主题设置

本博客采用了iissnan的Next主题,他的博客有详细的安装教程,这里贴下链接next,有需要的朋友直接参考他写的教程,一气呵成~

下载主题

1
2
$ cd hexo目录
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

应用Hexo主题

在hexo目录下找到_config.yml配置文件,找到 theme 字段,并将其值更改为 next,如下所示:

1
theme: next

设置RSS

在上面的步骤中已经安装了Rss插件,只要要在themes\next_config.yml配置文件中添加如下一行即可:

1
rss:

添加标签tags页面

定位到 Hexo 站点目录下,使用 hexo new page 新建一个页面,命名为 tags,布局格式为page:

1
2
$ cd hexo目录
$ hexo new page tags

内容如下所示,如果要关闭tags页面的评论可以设置comments为false:

1
2
3
4
5
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

这样以后tags页面在每次执行hexo generate后自动更新。

添加分类页面

和上面的一样,在hexo目录下执行下面命令:

1
$ hexo new page categories

内容为:

1
2
3
4
5
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

添加404页面

新建一个404.html文件,放到themes\next\source目录下,内容你自己定。

代码高亮

以前jekyll代码高亮需要用到pygments插件,Hexo下更加简单,只需要按照下面的格式:

效果如下:

1
System.out.println("hello hexo!");

你也可以更改代码高亮的主题,一共有五种,可选的值有 normal,night, night blue, night bright, night eighties,修改themes\next_config.yml文件,如下所示:

1
highlight_theme: normal

第三方服务

多说评论

登录多说官网,登录后点我要安装,然后填写站点相关信息,最主要的是duoshuo_shortname这个字段,设置后之后修改themes\next_config.yml文件,把duoshuo_shortname改成你的,如下所示:

1
duoshuo_shortname: ezlippi

百度统计

登录百度统计,转到获取代码截面,找到百度统计脚本id,然后把themes\next_config.yml文件下的baidu_analytics字段改成你的id,如下所示:

1
baidu_analytics: 340874ba9357cbe81570aa4ac1185941

站内搜索

next主题集成了swiftype搜索,你需要到swiftype配置一个搜索引擎, 而后编辑 站点配置文件, 新增 swiftype_key 字段,值为你的 swiftype 搜索引擎的 key。 详细的配置请参考:swfitype教程

其他设置

其他设置比如侧边栏、友情链接、菜单栏等请参考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
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Lippi-浮生志
subtitle:
description: Easy Lippi
author: EZLippi
language: zh-Hans
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.ezlippi.com
root: /
permalink: /blog/:year/:month/:title.html
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :year-:month-:day-: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
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
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
pagination_dir: page

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next
#since: 2014
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:EZLippi/EZLippi.github.io.git
coding.net: git@git.coding.net:ezlippi/ezlippi.git,coding-pages

主题配置文件:

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
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Place your favicon.ico to /source directory.
favicon: /favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "Hexo, NexT"

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

# Specify the date when the site was setup
since: 2014




# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu:
home: /
categories: /categories
archives: /archives
tags: /tags
about: /about
# commonweal: /404.html


# 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:
enable: true
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat




# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces



# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------


# Social links
social:
GitHub: https://github.com/EZLippi
weibo: http://weibo.com/ouyanglip
zhihu: http://www.zhihu.com/people/lippi-ouyang
#Others:


# Social Icons
social_icons:
enable: true
# Icon Mappings
GitHub: github
Twitter: twitter
weibo: weibo
zhihu: 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: /images/avatar.jpg


# TOC in the Sidebar
toc:
enable: true

# Automatically add list number to toc.
number: true


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

# Baidu Analytics ID
baidu_analytics: 340874ba9357cbe81570aa4ac1185941


# Duoshuo ShortName
duoshuo_shortname: ezlippi

# Disqus
#disqus_shortname:

# Share
#jiathis:
#add_this_id:

# Share
duoshuo_share: true
# 多说热评文章 true 或者 false
duoshuo_hotartical: true

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:


# Google Analytics
#google_analytics:


# 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: false
user_id: 0
#admin_nickname: ROOT


# 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: false
app_id: #<app_id>
app_key: #<app_key>


# Tencent analytics ID
# tencent_analytics:






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

# title, chinese available
links_title: 友情链接
# # links
links:
MacTalk: http://macshuo.com/

我的hexo主题托管在Github上面,有需要的可以下载下来使用,修改里面的一些配置即可。

参考文献:

Hexo
如何利用GitHub Pages和Hexo快速搭建个人博客
Next主题

🐶 您的支持将鼓励我继续创作 🐶

热评文章