aiven'blog

使用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

如果国内网络不好,可以使用淘宝的npm

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后将上面要装的插件命令中的npm都替换为cnpm

Hexo常用的几个命令

创建新博文

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

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

其中layout是可选参数,默认值为post。有哪些layout呢,请到scaffolds目录下查看,这些文件名称就是layout名称。当然你可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的layout,比如postlayout默认是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 #或者 hexo s

参考: Server

生成静态站点文件

1
$ hexo generate #或者 hexo g

参考: Generating

部署到Git

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

添加如下内容:

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

然后输入:

1
$ hexo deploy #或者 hexo d

参考: Deployment

fancybox

如果想要给添加图片,则可以使用fancybox,这个是怎么做的呢。
很简单,只需要在你的文章*.md文件的头上添加photos项即可,然后一行行添加你要展示的照片:

1
2
3
4
5
title:
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
---

主题设置

本博客采用了iissnanNext主题,他的博客有详细的安装教程,这里贴下链接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页面的评论可以设置commentsfalse

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目录下,内容你自己定。

代码高亮
Hexo下只需要按照下面的格式:

效果如下:

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

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

1
highlight_theme: normal

第三方服务

多说评论

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

1
duoshuo_shortname: aiven

百度统计

登录百度统计,转到获取代码截面,找到百度统计脚本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: aiven's blog
subtitle:
description: aiven
author: aiven
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.aiven.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:cdyangzhenyu/cdyangzhenyu.github.io.git
coding.net: git@git.coding.net:xxx/xxx.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
# ---------------------------------------------------------------
# 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/xxx
weibo: http://weibo.com/xxx
zhihu: http://www.zhihu.com/people/xxx
#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: xxx
# 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/

热评文章