https://yuluhuang.com

Hexo使用攻略

转载:http://ijiaober.github.io/categories/hexo/

（一）Hexo简介

你可能需要一个方便的工具来记录思想、整理笔记、表述观点，并且传播给更多的人。Hexo就是一个不错的工具。
Hexo,是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。
引用官方的话，hexo：

1
2
快速、简单且功能强大的 Node.js 博客框架。
A fast, simple & powerful blog framework, powered by Node.js.

我们可以用hexo创建自己的博客，托管到github或Heroku上，绑定自己的域名，用markdown写文章。本博客即使用hexo创建并托管在github上。

为什么要用Hexo

不可思议的快速 ─ 只要一眨眼静态文件即生成完成
支持 Markdown
仅需一道指令即可部署到 GitHub Pages 和 Heroku
已移植 Octopress 插件
高扩展性、自订性
兼容于 Windows, Mac & Linux

谁能使用Hexo

这是一个免费开源的博客程序，任何人都可以使用和修改。但是不同于wordpress，hexo由于需要使用Github,Git,Markdown,Node.js这样的工具，好多插件、widget都需要自己安装、设置。所以适合那些有一定计算机基础，喜欢折腾的人。但是，不要担心，只要跟着本教程走，就能很方便地让你熟练的使用起来。
Hexo

（二）Hexo安装和部署

详见：hexo搭建转载

（三）Hexo的配置和使用

基本配置

在Hexo中，有两个配置文件，一个是用来配置整站信息的，位于项目更目录下的_config.yml文件。另外一个是对主题的配置，位于themes目录下你所采用的主题目录里，文件名同样是_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
# Hexo Configuration

1. Docs: http://hexo.io/docs/configuration.html
2. Source: https://github.com/hexojs/hexo/
# Site 这里的配置，哪项配置反映在哪里，可以参考我的博客
title: GoonX #站点名，站点左上角
subtitle: 我走的很慢，但我从不后退。 #副标题，站点左上角
description: GoonX #给搜索引擎看的，对站点的描述，可以自定义
author: ijiaober #默认在站点左下角可以看到
email: ijiaober@qq.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://ijiaober.github.io #访问域名
root: /
permalink: :year/:month/:day/:title/ #具体内容页的存储路径结构
tag_dir: tags #标签目录名
archive_dir: archives #归档目录名
category_dir: categories #分类目录名
# Directory #默认文章和生成目录设置
source_dir: source
public_dir: public
# Writing 文章布局、写作格式的定义
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
max_open_file: 100
filename_case: 0
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
logger: false
logger_format:
# 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: 5
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: light
exclude_generator:
# Deployment 站点部署到github要配置

1. Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github
  repository: https://github.com/ijiaober/ijiaober.github.io.git
  branch: master

当你根据自己的需要修改了配置以后，就可以依次使用hexo g和hexo s命令，然后通过localhost:4000来查看效果了。
我们再来看看主题下的配置文件：

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
menu: #右上角导航菜单，冒号前面是菜单名，后面是访问路径。
  Home: /
  Archives: /archives
  About: /about

widgets: #站点右边栏，可以调整顺序和增减内容，会自动调用主题layout/_widget目录下的同名文件。
- search
- category
- tagcloud
excerpt_link: Read More #列表页里Read more链接名称，可以替换成’查看更多‘等。
plugins:
twitter: #右边栏要显示twitter展示的话，需要在此设置
  username:
  show_replies: false
  tweet_count: 5
addthis: #分享设置
  enable: true
  pubid:
  facebook: true
  twitter: true
  google: true
  pinterest: true
fancybox: true #图片效果，默认
google_analytics: #google_analytics统计ID
rss:  #生成RSS路径

使用

详见：本地创建博客

（四）Hexo的分类和标签设置

到这里，我们已经了解了如何配置一个Hexo博客，并且通过

1
2
3
4
$ hexo n ‘name’
$ hexo g
$ hexo s
$ hexo d

几个常见命令来新建、更新、预览、同步你的博客。
这一节，我们来分享一下Hexo里关于分类和标签的设置技巧。
新建一个页面
首先，我们通过hexo n “name”命令来新建一个页面，在source/_posts目录下找到刚才新建的name.md文件，用记事本或者sublime text打开。
我们看到默认的页面是这样的：

1
2
3
4
title: name
date: 2014-08-05 11:15:00
tags:
---

可以编辑标题、日期、标签和内容，但是没有分类的选项。我们可以手动加入categories:项，或者打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，重新执行hexo n ‘name’命令，会发现新建的页面里有categories:项了。
scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，所以可以在这里根据你自己的需求添加一些默认值。
设置分类列表
在我们编辑文章的时候，直接在categories:项填写属于哪个分类，但如果分类是中文的时候，路径也会包含中文。
比如分类我们设置的是：
categories: 编程
那在生成页面后，分类列表就会出现编程这个选项，他的访问路径是：
*/categories/编程
如果我们想要把路径名和分类名分别设置，需要怎么办呢？
打开根目录下的配置文件_config.yml，找到如下位置做更改：

1
2
3
4
5
6
7
# Category & Tag
default_category: uncategorized
category_map:
	编程: programming
	生活: life
	其他: other
tag_map:

在这里category_map:是设置分类的地方，每行一个分类，冒号前面是分类名称，后面是访问路径。
可以提前在这里设置好一些分类，当编辑的文章填写了对应的分类名时，就会自动的按照对应的路径来访问。
设置标签
在编辑文章的时候，tags:后面是设置标签的地方，如果有多个标签的话，可以用下面两种办法来设置：

1
2
3
4
5
6
7
tages: [标签1,标签2,...标签n]
or
 tages:
- 标签1
- 标签2
...
- 标签n

（五）Hexo导航菜单设置

在Hexo里，默认的导航菜单只有Home和Archives两项，那么我们怎么来增加其他的导航菜单进去呢？
首先打开主题的配置文件_config.yml：

1
2
3
4
menu:
  Home: /
  Archives: /archives
  About: /about

我们看到的menu:部分是设置菜单的，我们在下面加了一项设置About: /about
象上一节设置分类一样，前面部分是名称，后面部分是访问路径，当然名称神马的你可以用中文,访问路径你也可以直接设置到其他站点的任何页面。
我们这个示例里，设置About的访问路径为：/about。
下面我们来建立这个about，运行命令：
hexo n page ‘about’
会在source目录里生成一个对应的_posts目录，该目录下的about.md，就是你访问About时的页面。

（六）Hexo主题安装

嘿，我们搭建好了Hexo,设置好了导航菜单和分类，写了一些文章并且同步到GitHub上了，可我们不满足，我们想要页面看起来更好看一些。
我们可以通过安装主题的方式来快速选择喜欢的样式！
打开Hexo的Themes;
找到你心仪的主题并且点击主题名称进入详细页面；
找到install这一项，复制下面的内容，比如Light主题的安装内容为：

1
git clone https://github.com/hexojs/hexo-theme-light.git themes/light

在Hexo目录下运行上面复制的内容，就会自动下载该主题到你的Themes目录。
下载完毕后，在站点配置文件_config.yml里设置对应的主题名称：

1
theme: light

根据自己的需要，配置主题的配置文件_config.yml;
OK，我们成功的安装了一个主题

（七）设置Hexo里的评论和分享

现在我们的Hexo安装了漂亮的主题，并且设置了导航菜单，也发布了几篇文章，是不是急不可耐的想和大家一起分享你的内容了？
在和朋友们分享文章的时候，有两个必不可少的功能，评论 和 分享，这一节我们就来了解一下这两个设置。

评论设置

在Hexo中，默认使用的评论是国外的Disqus,不过因为国内的”网络环境”问题，我们改为国内的“多说”评论系统。

注册多说账户

访问多说网站，点击登录，根据自己的习惯选择一个登录方式。
登录后根据提示填写一些基本信息，下一步就跳转到 工具 —- 获取代码 这页了。复制这里的通用代码备用。
修改comment文件
打开themes/主题名/layout/_partial/comment.ejs这个文件 ，在下面位置粘贴刚才复制的代码：

1
2
3
4
5
<% if ( page.comments){ %>
<section id="comment">
此处粘贴通用代码
</section>
<% } %>

记得粘贴完后，替换代码里的标题、网址、ID三项信息。
标题可以用<%= item.title %>来替换，
网址可以用<%- config.url %><%- config.root%><%- item.path %>来替换,
ID可以用<%- item.path %>来替换。

分享设置

访问百度分享,复制代码备用。
找到themes/light/layout/_partial/post/share.ejs页面，用刚才复制的代码替换里面的内容，搞定。
如果想要调换分享图标可参考百度分享的说明来修改。

1
2
3
4
5
6
7
我使用了disqus

_config.yml 添加
disqus_shortname: 你自己申请的shortname

themes> _config.yml 添加
comment_provider: disqus

（八）为Hexo添加RSS和Sitemap

添加RSS

用npm安装插件：

npm install hexo-generator-feed
在配置文件里引用插件。在hexo/_config.yml添加代码：

1
2
plugins:
- hexo-generator-feed

在导航上添加RSS链接。打开themes/light/_config.yml文件，rss:部分修改为rss: /atom.xml,然后在menu部分添加Rss: /atom.xml。完成后代码类似下面的效果：

1
2
3
4
menu:
  Home: /
  Archives: /archives
  Rss: /atom.xml

###　添加Sitemap
和RSS一样，需要下载个插件。
安装插件：

npm install hexo-generator-sitemap
引用插件，同样在hexo/_config.yml中添加代码：

1
2
3
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

访问/sitemap.xml就能看到站点地图了。