Hexo使用

前边一篇文章介绍了如何利用Github Page和Hexo搭建一个简单的独立博客，但是该怎么修改网站样式，更新博客内容，则是这篇文章要讲的。


总的来说，分为3步骤：

  1. 修改网站主题与样式
  2. 利用markdown语法编写文章
  3. 利用Hexo命令发布文章

1. 修改网站主题与样式

Hexo的主题模板有很多，我选择了jacman。如果你喜欢其他的也可以选择。具体主题的配置方法如下：
在git shell中输入如下命令，拉取主题模板

1
G:\Hexo> git clone https://github.com/wuchong/jacman.git themes/jacman

这一步骤完成后，在Hexo目录的themes中会有jacman文件夹
在Hexo目录中，编辑_config.yml，将主题选为jacman(注意冒号后边必须有个空格)：

1
2
3
4
5
# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: jacman
exclude_generator:

你现在处理的这个_config.yml文件，就是整个Hexo的配置文件，具体的配置指南如下(注意冒号后边必须有个空格)：

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
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 这里的配置，哪项配置反映在哪里，可以参考我的博客
title: Yang xiaolei's blog#站点名
subtitle:      ——让知识成为信仰，让优秀成为习惯
description: 啦啦啦 #给搜索引擎看的，对站点的描述，可以自定义
author: Lance Yang #默认在站点左下角可以看到
email: chinayangxiaolei@163.com #你的邮箱
language: zh-CN #语言包设置。
# URL #访问地址等信息设置，可根据需要自己修改。
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yangxiaolei.me #访问域名
root: /
permalink: :year/:month/:day/:title/ #具体内容页的存储路径结构，一般不用更改
tag_dir: tags #标签目录名
archive_dir: archives #归档目录名
category_dir: categories #分类目录名
code_dir: downloads/code
permalink_defaults:
# Directory #默认文章和生成目录设置
source_dir: source
public_dir: public
# Writing 文章布局、写作格式的定义
new_post_name: :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
highlight:
enable: true
backtick_code_block: true
line_number: true
tab_replace:
# Category & Tag 分类和标签设置
default_category: uncategorized
category_map:
tag_map:
# Archives 默认值为2，如果这里都修改为1，相应页面就只会列出标题，而非全文
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1
# Server 本地预览服务信息，默认端口是4000，有需要的话可以自己修改
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: localhost
logger: false
logger_format: dev
# 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: MMM D YYYY
time_format: H:mm:ss
# Pagination 每页显示文章数，可以自定义
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Disqus Disqus 插件，我们会替换成“多说”
disqus_shortname:
# Extensions 这里配置站点所用主题和插件
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: jacman
exclude_generator:
# Deployment 之前设置过部署到github的具体网址
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: github
repository: https://github.com/ijiaober/ijiaober.github.io.git
branch: 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
##### 菜单
menu:
主页: /
归档: /archives
关于: /about
#### 控件
widgets:
- category
- tag
- links
- rss
#### RSS
rss: /atom.xml
#### 图片相关
imglogo:
enable: true ## 是否显示网站 logo
src: img/logo.png
favicon: img/favicon.ico ## 网站图标
apple_icon: img/jacman.jpg ## 苹果设备上的图标，背景不要透明
author_img: img/author.jpg ## 网站底部的博主头像
#### 首页相关
index:
expand: true ## 首页文章是否展开。默认为展开式，显示 Read More。
excerpt_link: Read More
#### 作者信息
author:
intro_line1: "Hello ,I'm Larry Page in Google." ## 网站底部的个人介绍
intro_line2: "This is my blog,believe it or not."
weibo_verifier: ## 微博秀的验证码
tsina: ## 用于微博秀和微博分享
weibo: ## 用于显示网站底部社交按钮，下同
douban:
zhihu:
email:
twitter:
github:
facebook:
linkedin:
google_plus:
stackoverflow:
#### 目录
toc:
article: true ## 是否在文章中显示目录
aside: true ## 是否在侧边栏显示目录
#### 友情链接
links:
#### 评论
duoshuo_shortname:
disqus_shortname:
#### 分享按钮
jiathis:
enable: false ## 默认使用主题内建分享
id:
tsina:
#### 网站统计
google_analytics:
enable: false
id: ## google analytics ID.
site: ## 网站地址.
baidu_tongji:
enable: false
sitecode: ## 百度统计站点特征码
cnzz_tongji:
enable: false
siteid: ## CNZZ统计站点ID
#### 杂项
ShowCustomFont: true
fancybox: true
totop: true
#### 自定义搜索
google_cse:
enable: false
cx:
baidu_search:
enable: false
id:
site: http://zhannei.baidu.com/cse/search

此处如果对于内容有不清楚的地方，可以参照主题的作者wuchong的配置说明文档。
此时页面的基本样式就都有了，我们来讲Hexo命令。

2. 利用markdown语法编写文章

命令行，新建文章：

1
hexo new page "pageName" #新建页面

在source/_post目录下会生成pageName.md，hexo用markdown语法编辑。点开文件，具体的编辑方式如下：

1
2
3
4
5
6
7
title: postName #文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: example #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内。
---
以下正文

正文中的具体markdown的语法可以参照文章：markdown语法入门
markdown的语法非常简单，5min足以掌握基本内容，剩下的遇到了搜索一下就好。
此处推荐一个在线编辑器，可以实时看效果，在此处编辑完成后复制到本地的文件中就可以。

3. 利用Hexo命令发布文章

Hexo的命令非常简单，之前其实都已经用过了。这里专门讲一下，在Hexo目录下：
利用markdown语法写好.md文件后，在命令行，输入如下命令来生成静态页面至public目录：

1
hexo generate

Hexo可以在自己的浏览器上预览效果（默认端口4000，’ctrl + c’关闭server），命令为：

1
hexo server

将文章发布到github网站上的命令为：

1
hexo deploy

如果之前的操作有了问题，可以使用clean命令去除多余的内容：

1
hexo clean

这些命令都可以简写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

一般使用过程中，会将命令复合到一行：

1
2
hexo s -g #生成加预览
hexo d -g #生成加部署

最后再安利一个方便的插件hexo-livereload，可以编辑完本地的md文件后，实时在浏览器浏览效果，省去很多操作：
在命令行安装hexo-livereload:

1
npm install hexo-livereload --save

安装浏览器插件：http://dwz.cn/BL1tZ
此时在hexo s -g 后，启动浏览器的插件，就可以了。

总的来说，Hexo大大降低了建立博客的成本，整体操作也是十分简便。

整个活动的感悟

善用搜索

整个建站过程遇到了一些困难，但是利用网上资源都能解决。

注重官方文档

对于有官方文档的，耐下心来过一遍，很多常见的问题都可以避免。所以凡事还是要注重基本，耐心一点，也许一开始会慢一些，但是后边会避免更多的坑。