By

文章目录
  1. 1. 整体构架
  2. 2. 基本配置
  3. 3. 主题
  4. 4. 评论管理
  5. 5. 搜索
  6. 6. 日常操作

好多盆友对本站是如何搭建起来的感兴趣。今天就来自我解剖一下，说说这个站点是如何搭建起来的。

先回顾一下历史吧。其实这个博客最早是跑在GoDadday的WordPress主机上的，正如想象的那样，WordPress让一切都变得那么“简单”，在线更新，评论管理等等，都一手包办了……以至于我都觉得“简单”的没有挑战性。同时，随着GoDadday托管费用像抢钱一样越涨越高，我深深感觉这里的坑太深，迫切需要换一种方式折腾一下。

整体构架

于是乎，趁着Node.js的东风，我找到了Hexo，一个基于Node.js的静态博客引擎。Hexo的工作方式很简单，就是将写好的Markdown格式的文本转换成静态的HTML文件。同时Hexo提供了一个基于Node.js的Web服务器，让你可以在本地运行静态博客。

当然，只能在本地运行是没有多少实际意义的，hexo最NB的地方就是和Github集成，将生成的静态资源打包部署到Github仓库上。这样，通过 http://xxx.github.io 的方式，就可以将静态博客托管到Github上了。

如果你不知道我在讲什么的话，就看看下面这个示意图吧。

基于hexo静态博客

基本配置

可以在[blog_folder]/_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
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: 夕阳下的奔跑
subtitle: 不积跬步 无以至千里
description: 个人总结, 工作日志, 技术原创
author: K.X
language: zh-CN
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://xintq.net
root: /
permalink: :year/:month/:day/:title/
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: true # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 1
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
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
pagination_dir: page
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: jacman
#theme: yilia
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-footnotes
# Server
port: 40000
server_ip: 0.0.0.0
logger: false
logger_format:
# Markdown
## https://github.com/chjj/marked
markdown:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: false
  smartpants: true
# Sitemap
sitemap:
  path: sitemap.xml
# Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 50
rss: /atom.xml
# Markdown-toc
##https://github.com/bubkoo/hexo-toc
toc:
  maxDepth: 2
  class: toc
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/xintq/xintq.github.com.git
  branch: master

主题

Hexo提供了很多漂亮的主题，本站是基于jacman这个主题的。jacman是一款扁平化，有着响应式设计的 Hexo 主题。通过修改配置文件[blog_folder]/themes/jacman/_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
##### Menu
menu:
  Home: /
  Archives: /archives
  About: /about
## you can create `tags` and `categories` folders in `../source`.
## And create a `index.md` file in each of them.
## set `front-matter`as
## layout: tags (or categories)
## title: tags (or categories)
## ---
#### Widgets
widgets:
- category
#- tag
- tagcloud
- links
- rss
## provide seven widgets:category,tag,rss,archive,tagcloud,links,weibo,douban
#### RSS
rss: /atom.xml ## RSS address.
#### Image
imglogo:
  enable: true             ## display image logo true/false.
  src: img/logo.png        ## `.svg` and `.png` are recommended,please put image into the theme folder `/jacman/source/img`.
favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/jacman/source/img`.
apple_icon: img/jacman.jpg ## size:114px*114px,please put image into the theme folder `/jacman/source/img`.
author_img: img/author.jpg ## size:220px*220px.display author avatar picture.if don't want to display,please don't set this.
banner_img: img/banner.jpg ## size:1920px*200px+. Banner Picture
### Theme Color
theme_color:
    theme: '#7f7f7f'    ##the defaut theme color is blue, but I make it black
###    theme: '#2ca6cb'    ##the defaut theme color is blue
#### index post is expanding or not
index:
  expand: false           ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: Read More
close_aside: false  #close sidebar in post page if true
mathjax: false      #enable mathjax if true
### Creative Commons License Support, see http://creativecommons.org/
### you can choose: by , by-nc , by-nc-nd , by-nc-sa , by-nd , by-sa , zero
creative_commons: none
#### Author information
author:
  intro_line1:  "Hi there, I'm K.X, a tech guy trying to survive in the IT jungle..."    ## your introduction on the bottom of the page
  intro_line2:  "This is my blog. Hope you find something useful here."  ## the 2nd line
  weibo:      ## e.g. wuchong1014 or 2176287895 for http://weibo.com/2176287895
  weibo_verifier:  ## e.g. b3593ceb Your weibo-show widget verifier ,if you use weibo-show it is needed.
  tsina:      ## e.g. 2176287895  Your weibo ID,It will be used in share button.
  douban:     ## e.g. wuchong1014 or your id for https://www.douban.com/people/wuchong1014
  zhihu:      ## e.g. jark  for http://www.zhihu.com/people/jark
  email:      "test@abc.com" ## e.g. imjark@gmail.com
  twitter:    ## e.g. jarkwu for https://twitter.com/jarkwu
  github:     "test" ## e.g. wuchong for https://github.com/wuchong
  facebook:   ## e.g. imjark for https://facebook.com/imjark
  linkedin:   "test" ## e.g. wuchong1014 for https://www.linkedin.com/in/wuchong1014
  google_plus:    ## e.g. "111190881341800841449" for https://plus.google.com/u/0/111190881341800841449, the "" is needed!
  stackoverflow:  ## e.g. 3222790 for http://stackoverflow.com/users/3222790/jark
## if you set them, the corresponding  share button will show on the footer
#### Toc
toc:
  article: true   ## show contents in article.
  aside: true     ## show contents in aside.
## you can set both of the value to true of neither of them.
## if you don't want display contents in a specified post,you can modify `front-matter` and add `toc: false`.
#### Links
links:
  LinkedIn: https://cn.linkedin.com/in/xintq
  开源中国: http://my.oschina.net/xintq/blog
#### Comment
duoshuo_shortname: ## e.g. wuchong   your duoshuo short name.
disqus_shortname:     ## e.g. wuchong   your disqus short name.
#### Share button
jiathis:
  enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display.
  id:    ## e.g. 1889330 your jiathis ID.
  tsina: ## e.g. 2176287895 Your weibo id,It will be used in share button.
#### Analytics
google_analytics:
  enable: false
  id:        ## e.g. UA-46321946-2 your google analytics ID.
  site:      ## e.g. wuchong.me your google analytics site or set the value as auto.
## You MUST upgrade to Universal Analytics first!
## https://developers.google.com/analytics/devguides/collection/upgrade/?hl=zh_CN
baidu_tongji:
  enable: false
  sitecode:  ## e.g. e6d1f421bbc9962127a50488f9ed37d1 your baidu tongji site code
cnzz_tongji:
  enable: false
  siteid:    ## e.g. 1253575964 your cnzz tongji site id
#### Miscellaneous
ShowCustomFont: true  ## you can change custom font in `variable.styl` and `font.styl` which in the theme folder `/jacman/source/css`.
fancybox: true        ## if you use gallery post or want use fancybox please set the value to true.
totop: true           ## if you want to scroll to top in every post set the value to true
#### Custom Search
google_cse:
  enable: false
  cx:   ## e.g. 018294693190868310296:abnhpuysycw your Custom Search ID.
## https://www.google.com/cse/
## To enable the custom search You must create a "search" folder in '/source' and a "index.md" file
## set the 'front-matter' as
## layout: search
## title: search
## ---
baidu_search:     ## http://zn.baidu.com/
  enable: false
  id:   ## e.g. "783281470518440642"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search  ## your can change to your site instead of the default site
tinysou_search:     ## http://tinysou.com/
  enable: false
  id:  ## e.g. "4ac092ad8d749fdc6293" for your tiny search id
swift_search:
  enable: true

评论管理

可以参考本站的 《用Gitment替换多说来为基于hexo的静态网站提供评论功能》 进行配置。

搜索

本站使用的是swiftype进行站内搜索的，具体配置方法请参考 这篇 教程。

日常操作

  1. 创建新文章： hexo new "My Post Title"
  2. 更新静态资源（将有改动的markdown文件转换成html）： hexo g
  3. 运行本地站点： hexo s
  4. 部署到Github上： hexo d， 这一步需要Git配合，而且在Windows环境下，最好在Git Bash中执行。

上面的2和3可以使用hexo s -g来同时进行。
同样，上面的2和4可以使用hexo d -g来同时进行。

== THE END ==

文章目录
  1. 1. 整体构架
  2. 2. 基本配置
  3. 3. 主题
  4. 4. 评论管理
  5. 5. 搜索
  6. 6. 日常操作