使用Hexo搭建博客

发表于   |   分类于   |  

两年前使用octopress开始写博客，中途由于繁忙和其他事由，中断了写作。工作四年后，越来越觉得该好好沉淀一下，把工作中遇到的问题和解决方案总结出来，所以又开始写博客了。由于从Windows系统换成了Mac OSX，加之当时搭建octopress遇到了种种问题，考虑放弃octopress，衡量再三，决定使用hexo继续写作之路。本文就将使用hexo搭建博客的整个过程记录之。

安装Hexo

Hexo安装前提需要Git和Node.js，请先安装这两种软件。

Mac用户可能会遇到一些编译错误，请先安装Xcode，启动并进入Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

安装Git

－ Windows：下载并安装git.
－ Mac：使用 Homebrew, MacPorts 或下载安装程序安装。
－ Linux (Ubuntu, Debian)：sudo apt-get install git-core
－ Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安装Node.js

先安装nvm。

1
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令安装

1
$ nvm install 0.10

安装Hexo

Node和Git都安装好后，可执行如下命令安装hexo。

1
$ npm install -g hexo-cli

配置Hexo

建站初始化

执行init命令初始化Hexo到指定的目录并安装相关组件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

初始化成功后，指定文件夹下的目录如下：

1
2
3
4
5
6
7
8
9
.
├── _config.yml  //网站的配置信息，大部分参数在此配置，后续介绍
├── package.json //应用程序的信息 
├── scaffolds    //模版文件夹
├── scripts      //脚本文件夹，在此文件夹下的js文件会被自动执行
├── source       //资源文件夹，存放用户资源的地方
|   ├── _drafts  //草稿所在目录
|   └── _posts   //文章所在目录
└── 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
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Javan's Blog #站点名
subtitle: Still Waters Run Deep. #副标题
description: Still Waters Run Deep. #站点描述，给搜索引擎看的
author:  #您的名字
language: zh-Hans #网站使用的语言

# URL #这项暂不配置，绑定域名后，欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
#url: http://yoursite.com
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    #Include code 文件夹
i18n_dir: :lang             #国际化（i18n）文件夹
# skip_render:      #跳过指定文件的渲染，您可使用 glob 来配置路径

# Writing
new_post_name: :year-:month-:day-:title.md #新文章的文件名称
default_layout: post    #预设布局
auto_spacing: true      #在中文和英文之间加入空格
titlecase: false        #把标题转换为 title case
external_link: true #在新标签中打开链接
filename_case: 0    #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #是否显示草稿
post_asset_folder: false #启动 Asset 文件夹
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: 20 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: hexo-theme-next #当前主题名称

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy: #部署
  type: git #部署类型
  repo: #你的Blog的Git地址
  branch: master #部署分支

主题安装

Hexo提供了多种多样的主题，读者可以从Hexo Themes中选择喜爱的主题进行安装，我选择的是主题是NexT。
首先，将主题clone到themes目录下。

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

其次，在_config.yml文件中配置主题。

1
theme: hexo-theme-next

最后，根据自己的喜好对主题进行修改，打开themes/hexo-theme-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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# when running hexo in a subdirectory (e.g. domain.tld/blog), 
# remove leading slashes ( "/archives" -> "archives" )
menu: #配置页头显示哪些菜单
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  #about: /about
  #commonweal: /404.html

# 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:

# Icon fonts
# Place your font into next/source/fonts, specify directory-name and font-name here
# Avialable: default | linecons | fifty-shades | feather
icon_font: default
#icon_font: fifty-shades
#icon_font: feather
#icon_font: linecons

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal #代码高亮方案

# MathJax Support
mathjax:

# Schemes
scheme: Mist

# Sidebar, available value:
#  - post    expand on posts automatically. Default.
#  - always  expand for all pages automatically
#  - hide    expand only when click on the sidebar toggle icon.
sidebar: post
#sidebar: always
#sidebar: hide

# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true #文章摘要

# Automatically add list number to toc.
toc_list_number: true #为toc列表自动添加数字

# Automatically Excerpt
auto_excerpt:
  enable: false
  length: 150

# Use Lato font
# Note: this option is avialable only when the language is not `zh-Hans`
use_font_lato: true

# 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

## DO NOT EDIT THE FOLLOWING SETTINGS
## UNLESS YOU KNOW WHAT YOU ARE DOING

# Use velocity to animate everything.
use_motion: true

# Fancybox
fancybox: true #是否开启fancybox效果

# Static files
vendors: vendors
css: css
js: js
images: images

# Theme version
version: 0.4.5.1

NexT提供了很多主题设定项和第三方服务设定，比如评论、站内搜索、分享等，请参见NexT使用文档。

开始写作

常用命令

1
2
3
4
5
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub

写作

执行new命令，生成的文章位于${hexo_path}\source_posts\postnName.md。

1
hexo new "postName" #新建文章

使Markdown语法编辑文章，完成后执行：

1
2
hexo g
hexo s

之后，在浏览器输入http://localhost:4000 就可以看到效果。
如果需要将文章发布到Github Pages，需要完成git等相关配置，具体参见参考文献[3]，之后执行hexo d。

多Git账号切换

有可能在机器上会同时向多个类Git的代码库提交代码，比如我一方面需要配置公司的私有Git库的ssh key用于日常工作，另一方面我会在Github上搞一些小东西，就需要配置使用多个SSH Key来连接不同的代码库。这样的问题，就是多个SSH key切换
的问题。解决方案如下：

新建second SSH Key

1
2
3
4
5
6
7
# 新建 SSH key：
$ cd ~/.ssh
$ ssh-keygen -t rsa -C "example2@email.com"
# 设置 SSH Key 的名字为 id_rsa_second
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/xxx/.ssh/id_rsa): 
$ id_rsa_second

把新密钥添加到SSH Agent中

1
2
$ ssh-agent bash
$ ssh-add ~/.ssh/id_rsa_second

修改config文件

在 ~/.ssh 下找到 config 文件，如果没有就创建

1
2
3
4
5
6
7
8
9
Host gitxxx.com
HostName gitxxx.com
IdentityFile ~/.ssh/id_rsa
User xxx

Host git2
HostName github.com
IdentityFile ~/.ssh/id_rsa_second
User ${user.name}

其中的规则是：从上至下读取 config 的内容，在每个Host下寻找对应的私钥。这里将 GitHub SSH 仓库地址中的 git@github.com 替换成新建的 Host 别名如：git2，即将 git@github.com:${user.name}/${user.name}.github.com.git替换成git@git2:${user.name}/${user.name}.github.com.git。

修改Hexo的_config.yml

1
2
3
deploy:
  type: git
  repo: git@git2:${user.name}/${user.name}.github.com.git

octopress迁移到Hexo

把 Octopress source/_posts 文件夹内的所有文件转移到 Hexo 的 source/_posts 文件夹，并修改 _config.yml 中的 new_post_name 参数。

1
new_post_name: :year-:month-:day-:title.md

参考文献

[1] 如何搭建一个独立博客——简明Github Pages与Hexo教程
[2] hexo你的博客
[3] hexo系列教程
[4] Hexo官方文档
[5] Hexo进阶折腾