alexpdh's blog

基于hexo+GitHub搭建个人博客

github+hexo

本博客是基于Hexo+GitHub在Windows 10(64位)环境下搭建的,搭建前默认有GitHub账号并会基本的Git命令,如果没有请先自行了解学习。

环境准备

  • Windows 10(64位)
  • Git-2.11.0-64-bit.exe
  • node-v6.9.3-x64.msi

安装Git

Git是连接本地和GitHub的桥梁,你可以直接在本地将代码上传到GitHub,下载地址:https://git-for-windows.github.io/。验证是否安装成功,输入:

1
git --version

安装node

hexo是用node.js写的,所以需要安装node,下载地址:https://nodejs.org/en/,验证是否安装成功,输入:

1
node -v

安装Hexo

  安装hexo前要注意一点,我在这里被坑了不少时间,npm全称Node Package Manager,是node.js的模块依赖管理工具。由于npm的源在国外,所以国内用户使用起来各种不方便,我在安装下载hexo时甚至出现链接断开的现象,我们可以使用国内的镜像源,常用的就是淘宝的npm镜像,如何使用呢?

  • 一个一劳永逸的方法

打开Git bash,输入:

1
2
3
4
5
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express

参考 国内优秀npm镜像

安装hexo命令

在本地新建一个文件夹随便命名,如:hexo,打开git bash,切换到新建的文件夹下面输入:

1
2
3
npm install hexo-cli -g ###安装hexo命令
hexo init ###部署hexo,初始化命令
npm install ###安装插件命令
  • 几个常用的hexo插件
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命令
1
2
3
4
5
6
7
8
9
10
11
12
hexo new "postName" ###新建文章
hexo new page "pageName" ###新建页面
hexo clean ###清理目录
hexo generate ###生成静态页面至public目录
hexo server ###开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy ###将.deploy目录部署到GitHub
###以上命令对应的简写”
hexo n
hexo clean
hexo g
hexo s
hexo d

到这里我们本地hexo就安装完成了,接下来就是见证奇迹的时刻了,Git bash中切换到刚才的hexo目录执行下面命令:

1
2
hexo g
hexo s

然后用浏览器访问 http://localhost:4000/ ,此刻你就可以在本地预览到你的博客了,是不是很easy,很炫酷。

  • 如何用hexo创建发表文章

1.1、打开Git bash里输入如下命令回车就可以创建一篇新文章

1
hexo new "new post"

1.2、在hexo\source_posts下编辑对应的.md文件内容,hexo支持Markdown语法,语法很简单,markdown 中文文档,Windows 下推荐工具 markdownpad,下载地址:http://markdownpad.com/

1.3、输入

1
2
hexo g ###生成静态文件
hexo s ###本地部署

1.4、浏览器打开 http://localhost:4000 进行预览

安装主题

  hexo 3.0默认的主题是landscape,hexo也有很多的主题,这里有很多主题,我选择Next主题,上面有详细的设置。注意:hexo配置语法中标准的是: 冒号后跟个空格

2.1 Git bash 下cd 到hexo目录,输入:

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

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

1
theme: next

2.3 设置RSS
在上面第一步中已经安装了Rss插件,只要在themes_config.yml配置文件中添加一行:

1
rss:

2.4 添加标签tags页面
在hexo目录下输入 hexo new page 新建一个页面,命名为 tags,布局格式为page:

1
hexo new page tags

内容如下,如果要关闭tags页面的评论可以设置comments为false,这样以后tags页面在每次执行hexo generate后自动更新:

1
2
3
4
5
title: 标签
date: 2017-01-07 00:00:00
type: "tags"
comments: false
---

2.5 添加分类页面
在hexo目录下输入 hexo new page 新建一个页面,命名为 categories,布局格式为page:

1
2
3
4
5
title: 分类
date: 2017-01-07 00:00:00
type: "categories"
comments: false
---

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

2.7 代码高亮
在themes\next_config.yml 更改:

1
highlight_theme: normal

2.8 hexo 中各个目录说明:
hexo目录说明

添加第三方服务

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

1
duoshuo_shortname: alexpdh

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

1
baidu_analytics: xxxxxxxxx

3.3 站内搜索
next主题集成了swiftype搜索,你需要到swiftype配置一个搜索引擎, 而后编辑 站点配置文件, 新增 swiftype_key 字段,值为你的 swiftype 搜索引擎的 key:

1
swiftype_key: xxxxxxxxx

其他第三方设置请参考:第三方服务集成

托管到GitHub和coding

1、创建一个Github Pages

  • Github Pages免费的静态站点,每个GitHub账户有300M的空间可以用来搭建自己的个人站点,其特点:免费托管、自带主题、支持自制页面等。创建 Github Pages 比较简单,只要你有一个github账号在创建一个仓库就行了,但是这个仓库是有规则的,其格式必须为: yourusername.github.io 。然后根据提示一直下一步即可,非常简单。命名格式中的yourusername 是你自己的github账号。

  • 国内coding平台请参考Coding Pages 帮助

2、_config.yml配置
打开hexo/_config.yml文件最下面的deploy设置为如下,记得账号替换成自己的:

1
2
3
4
5
deploy:
type: git
repo:
github: git@github.com:alexpdh/alexpdh.github.io.git,master
coding: git@git.coding.net:alexpdh/myblog.git,master

3、部署到git

输入如下命令就可以上传到两个平台部署了:

1
hexo deploy

每次部署GitHub一般就是如下三步就完事(部署三步骤):

1
2
3
4
5
hexo clean
hexo generate
hexo deploy

附 _config.yml配置

根目录下_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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
#网站
# Site
title: alexpdh's blog # 网站标题
subtitle: # 网站副标题
description: 你的时间在哪里,你的成就就在那里 # 网站描述
author: alexpdh # 作者
language: zh-Hans # 网站使用的语言
timezone: Asia/Shanghai # 网站时区。Hexo 预设使用您电脑的时区。时区列表
# 网址
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://alexpdh.com # 网址
root: / # 网站根目录
permalink: /blog/:year/:month/:day/:title/ # 文章的 永久链接 原格式 :year/:month/:day/:title/ 我放blog目录下
permalink_defaults: # 永久链接中各部分的默认值
# 目录
# Directory
source_dir: source # 资源文件夹,这个文件夹用来存放内容。 source
public_dir: public # 公共文件夹,这个文件夹用于存放生成的站点文件。 public
tag_dir: tags # 标签文件夹 tags
archive_dir: archives # 归档文件夹 archives
category_dir: categories # 分类文件夹 categories
code_dir: downloads/code # Include code 文件夹 downloads/code
i18n_dir: :lang # 国际化(i18n)文件夹 :lang
skip_render: # 跳过指定文件的渲染,您可使用 glob 来配置路径。
# 新建文章
# Writing
new_post_name: :title.md # File name of new posts # 新文章的文件名称 :title.md
default_layout: post # 预设布局 post
titlecase: false # Transform title into titlecase # 把标题转换为 title case false
external_link: true # Open external links in new tab # 在新标签中打开链接 true
filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts: false # 显示草稿 false
post_asset_folder: false # 启动 Asset 文件夹 false 设置为true时会默认在新建文章时会创建一个和.md文件同名的文件夹
relative_link: false # 把链接改为与根目录的相对位址 false
future: true # 显示未来的文章 true
# 代码块的设置
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag
default_category: uncategorized # 默认分类 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 = 关闭分页功能) 10
pagination_dir: page # 分页目录 page
# 主题
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# 部署托管配置
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:alexpdh/alexpdh.github.io.git,master
coding: git@git.coding.net:alexpdh/hexoblog.git,master

主题目录下 _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
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
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# Put your favicon.ico into `hexo-site/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: 2017
# icon between year and author @Footer
authoricon: heart
# Footer `powered-by` and `theme-info` copyright
copyright: true
# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remeber set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true
# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: false
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
categories: /categories
archives: /archives
tags: /tags
about: /about
#sitemap: /sitemap.xml
#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. Key is case-senstive.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
schedule: calendar
tags: tags
archives: archive
sitemap: sitemap
commonweal: heartbeat
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
# light, light italic, normal, normal intalic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host:
# Global font settings used on <body> element.
global:
# external: true will load this font family from host.
external: true
family: Lato
# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
headings:
external: true
family:
# Font settings for posts
# Fallback to `global` font settings.
posts:
external: true
family:
# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
logo:
external: true
family:
size:
# Font settings for <code> and code blocks.
codes:
external: true
family:
size:
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links
social:
GitHub: https://github.com/alexpdh
weibo: http://weibo.com/alex1988520
zhihu: http://www.zhihu.com/people/alexpdh-1988
#Others:
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
#social:
#LinkLabel: Link
# Social Links Icons
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
# When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
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
avatar: /images/itdog.jpg
# Table Of Contents 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 toggler.
display: post
#display: always
#display: hide
#display: remove
# Blogrolls
#links_title: Links
#links_layout: block
#links_layout: inline
#links:
#Title: http://example.com/
# title, chinese available
links_title: 友情链接
# # links
links:
MacTalk: http://macshuo.com/
liaoxuefeng: http://www.liaoxuefeng.com/
# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
# Use Lato font
use_font_lato: true
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at: false
categories: true
# Wechat Subscriber
#wechat_subscriber:
#enabled: true
#qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
#description: ex. subscribe to my blog by scanning my public wechat account
# ---------------------------------------------------------------
# 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
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# MathJax Support
mathjax:
enable: false
per_page: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# Swiftype Search API Key
swiftype_key: SELpQxw29CqCcMWn6235
# Baidu Analytics ID
baidu_analytics: 9dc06432cf936b467fbc1592bb73673d
# Duoshuo ShortName
duoshuo_shortname: alexpdh
# Disqus
#disqus_shortname:
# Hypercomments
#hypercomments_id:
# Gentie productKey
#gentie_productKey:
# Support for youyan comments system.
# You can get your uid from http://www.uyan.cc
#youyan_uid: your uid
# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
#baidushare:
## type: button
# Share
#jiathis:
# Warning: JiaThis does not support https.
#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:
# CNZZ count
#cnzz_siteid:
# Application Insights
# See https://azure.microsoft.com/en-us/services/application-insights/
# application_insights:
# 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: Author
# 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
# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
enable: false
num_of_posts: 10 # min posts num is 1
width: 100% # default width is 550px
scheme: light # default scheme is light (light or dark)
# 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>
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: false
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:
# 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: false
# Google Calendar
# Share your recent schedule to others via calendar page
#
# API Documentation:
# https://developers.google.com/google-apps/calendar/v3/reference/events/list
calendar:
enable: false
calendar_id: <required>
api_key: <required>
orderBy: startTime
offsetMax: 24
offsetMin: 4
timeZone:
showDeleted: false
singleEvents: true
maxResults: 250
# Algolia Search
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------
# Motion
use_motion: true
# Fancybox
fancybox: true
# Canvas-nest
canvas_nest: false
# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib
# Internal version: 2.1.3
jquery:
# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
fancybox:
fancybox_css:
# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
fastclick:
# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload:
# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity:
# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity_ui:
# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser:
# Internal version: 4.6.2
# See: http://fontawesome.io/
fontawesome:
# Internal version: 1
# https://www.algolia.com
algolia_instant_js:
algolia_instant_css:
# Internal version: 1.0.0
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
# Assets
css: css
js: js
images: images
# Theme version
version: 5.1.0

参考文献

HEXO中文文档
http://www.ezlippi.com/

alexpdh wechat
欢迎扫一扫关注 程序猿pdh 公众号!