使用 Hexo 和 Github Pages 搭建一个独立博客

不积跬步,无以至千里;不积小流,无以成江海。

摘要:这是一篇结合我搭建本博客的过程,总结出的使用 Hexo 和 Github Pages 搭建独立博客的教程,既是给自己的“备忘录”,也希望能够给想拥有自己独立博客的朋友一点帮助。

为什么要搞一个独立博客

现在 BSP(Blog Service Provider) 很多,注册一个帐号就可以开始写东西,有必要自己搞一个独立博客吗?我看有。
在 BSP 你拥有的只是写的权利跟一个 Profile 页面,其他的都是别人的,并且你还要忍受平台的广告等等。而独立博客就是你自己的,你选择使用什么域名,什么主题,什么字体、字号,全文输出还是截断输出,从哪里截断,都由你自己决定。你也不用担心自己辛辛苦苦写的文章被删除。
一言以蔽之:独立的才是自己的。

为什么选择GitHub Pages

GitHub 是一个伟大的产品,GitHub Pages 是他伟大的一部分,不仅可以方便的为项目建立介绍站点,也可以用来建立个人博客。

GitHub Pages 有以下几个优点:

  • 空间免费,服务较为稳定
  • 无需自己搭建服务器
  • 轻量级的博客系统,没有麻烦的配置
  • 使用标记语言,比如 Markdown
  • 可以绑定自己的域名

当然它也有缺点:

  • 使用 Jekyll 模板系统,相当于静态页发布,适合博客,文档介绍等。
  • 动态程序的部分相当局限,比如没有评论,不过还好有第三方社会化评论系统(多说Disqus等)。
  • 基于 Git,有学习成本,很多东西需要动手,不像 WordPress 有强大的后台
  • 访问速度有时不是太理想

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Hexo 有以下优点:

  • 速度快
  • 支持 Markdown
  • 一键部署
  • 丰富的插件

安装、注册

安装 Node.js

推荐的安装 Node.js 的方式是使用 nvm
cURL:

1
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

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

安装完成后,重启终端并执行下列命令即可安装 Node.js。

1
$ nvm install 0.10

或者也可以下载 应用程序 安装
p.s. Mac 上也可以用 BrewHome 安装

安装 Git

  • Windows:下载并安装 Git
  • Mac:自带。如果没有的话请使用 BrewHome, MacPorts 或下载 安装程序 安装
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

注册 GitHub

配置和使用 GitHub

部署到 GitHub 的时候有两种方式:

  • HTTPS 库(repository)地址
  • SSH
    第一种比较方便,这里我们 deploy 的时候就直接用 HTTPS 库(repository)地址提交,下面的就可以略过了,直接跳到第二部分

要是用第二种的话,就跟着下面的步骤配置 Git 吧 ↓↓↓
Mac 可以直接安装 GitHub For Mac,安装后用 GitHub 帐号登录,会自动将 SSH Key 关联到 GitHub,可以直接跳到 5.6.测试一下
Windows 也可以下载GitHub For Windows,但不知能否像 Mac 客户端那样自动关联 SSH Key 到 GitHub。

Git

Git 是一款免费、开源的分布式版本控制系统。要使用 Git,需要安装它的客户端(下载地址)。
下载安装客户端之后,各个系统的配置类似,我在这里使用 Mac 作为例子,Linux 和 Windows 与此类似。

检查 SSH Key

首先需要检查电脑上现有的ssh key:

1
$ cd ~/.ssh

如果显示“No such file or directory”,直接跳到第三步,否则继续。

备份和移除原来的 SSH Key

因为已经存在key文件,所以需要备份旧的数据并删除:

1
2
3
4
$ ls
config id_rsa id_rsa.pub known_hosts
$ mkdir key_backup
$ mv id_rsa* key_backup

生成新的 SSH Key

输入下面的代码,就可以生成新的key文件,我们只需要默认设置就好,所以当需要输入文件名的时候,回车就好。

1
2
3
$ ssh-keygen -t rsa -C "your@email.com" //之后一路回车即可
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa): //直接回车

然后系统会要你输入加密串(Passphrase),可以不设置,直接回车:

1
2
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>

最后看到这样的界面,就成功设置ssh key了:
ssh-key

添加 SSH Key 到GitHub

在本机设置 SSH Key 之后,需要添加到 GitHub 上,以完成 SSH 链接的设置。
用文本编辑工具打开 id_rsa.pub 文件,如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。
在 GitHub 的主页上点击设置按钮:
github-settings
选择 SSH Keys 项,把复制的内容粘贴进去,然后点击 Add Key 按钮即可:
github-addkey
如果需要配置多个 GitHub 账号,可以参看这个多个 GitHub 帐号的 SSH key 切换,不过需要提醒一下的是,如果你只是通过这篇文章中所述配置了 Host,那么你多个账号下面的提交用户会是一个人,所以需要通过命令git config --global --unset user.email删除用户账户设置,在每一个 repo 下面使用git config --local user.email 'your@email.com'命令单独设置用户账户信息

测试一下


可以输入下面的命令,看看设置是否成功,`git@github.com`的部分不要修改:
1
$ ssh -T git@github.com

如果是下面的反应:

1
2
3
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要紧张,输入yes就好,然后会看到:

1
Hi yibo! You've successfully authenticated, but GitHub does not provide shell access.

设置个人账号信息

现在你已经可以通过 SSH 链接到 GitHub 了。还有一些个人信息需要完善。
Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的。

1
2
$ git config --global user.name "yourname"
$ git config --global user.email "your@email.com"

创建 Repository

与 GitHub 建立好链接之后,就可以方便的使用它提供的 Pages 服务,GitHub Pages 分两种,一种是以你的GitHub用户名建立的username.github.io这样的用户&组织页,另一种是依附项目的 Pages。
想建立个人博客是用的第一种,形如username.github.io这样的可访问的站,每个用户名下面只能建立一个。

创建好username.github.io项目之后,随便提交一个index.html文件,然后push到 GitHub 的master分支(也就是普通意义上的主干)。第一次页面生效需要一些时间,大概10分钟左右。生效之后,就可以通过访问username.github.io就可以看到你上传的页面了。

至此,GitHub 就配置完了。若有问题,请尝试重新配置。
常见错误请参考:
GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)

Hexo

安装 Hexo

安装好 Node.js 后,通过 npm 安装 Hexo(这里安装的是最新的版本3.1.1):

1
$ npm install hexo-cli -g

p.s.如果不能安装,可以尝试把官方源替换为淘宝npm源,再执行安装 Hexo:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

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

hexo-init
执行完上面的命令后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
├── _config.yml
├── node_modules
│   ├── hexo
│   ├── hexo-generator-archive
│   ├── hexo-generator-category
│   ├── hexo-generator-index
│   ├── hexo-generator-tag
│   ├── hexo-renderer-ejs
│   ├── hexo-renderer-marked
│   ├── hexo-renderer-stylus
│   └── hexo-server
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
└── themes
└── landscape

Hexo 全局配置

Hexo 的大部分配置都在_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
# Hexo Configuration

# Site
title: Hexo #博客标题
subtitle: #博客副标题
description: #博客的描述
author: #你的名字
language: zh #网站使用的语言,使用 ISO-639-1,默认 en (这个选项貌似跟主题是否国际化了有关)
timezone: Asia/Shanghai #网站时区 像 America/New_York, Japan, UTC 这种

# URL
url: http://windmt.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 #预设布局
titlecase: false # 把标题转换为单词首字母大写
external_link: true # 在新标签中打开链接
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: false #启动 Asset 文件夹,为 true 时,每次建立文件时,Hexo 会自动建立一个与文章同名的文件夹
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
date_format: YYYY-MM-DD #日期格式
time_format: HH:mm:ss #时间格式

# Pagination
per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录

# Extensions
theme: yilia #当前主题名称

# Deployment
deploy: #部署
type: git
repo: https://github.com/username/username.github.io.git #库(Repository)地址
branch: master #分支名称

写文章

Hexo 使用 Markdown 语法的纯文本存放文章,后缀为.md,你可以在_post文件夹里面新建这个后缀的.md文件(UTF-8 编码),不过我更推荐使用命令来新建。

1
$ hexo new [layout] <title>

可以在命令中指定文章的布局(layout),默认为post,可以通过修改_config.yml中的default_layout参数来指定默认布局。更多布局可参看 Hexo Writing
看一下刚才生成的<title>.md,内容如下:

1
2
3
4
title: title #文章标题
date: 2015-10-25 19:10:55 #文章生成时间
tags: #文章标签 可以省略
--- #Front-matter 分隔符

多标签的话需要注意语法格式,比如我的这篇的tags如下:

1
2
3
tags:
- Hexo
- GitHub

更多的的 Front-matter 参数参见这里
然后就可以在---下边开始愉快地写文章了。
正文中可以使用<!--more-->设置文章摘要 如下:

1
2
3
以上是文章摘要
<!--more-->
以下是余下全文

<!--more-->以上的内容即是文章摘要,在主页显示,more以下内容点击more链接打开全文才显示。

本地服务器测试、预览

是骡子是马,先拉出来溜溜。
虽然 Hexo 官网说
Hexo 3.0 把服务器独立成了个别模块,您必须先安装hexo-server才能使用。
但是我在没有安装hexo-server的情况下,也能启动hexo server。如果你那里不行,运行以下命令安装hexo-server

1
$ npm install hexo-server --save

然后输入以下命令以启动服务器,你就可以通过在浏览器中访问http://localhost:4000这个地址预览你的博客了。

1
$ hexo server //可简写为 hexo s

在服务器启动期间,Hexo 会监视文件变动并自动更新,无须重启服务器。

更换主题

在浏览器里看到了自己的博客,是不是感觉忙这一会儿的忙活没有哦白费,心情瞬间美丽了很多?
不过默认的主题比较丑(最起码我这么觉得),我们可以很轻松的换一个好看的主题。
首先先找到自己喜欢的主题,可以在 Hexo 官网 上边找。
yilia 主题为例:

  1. 先进入 Hexo 所在的目录,然后把这个主题 clone 下来:

    1
    2
    $ cd ~/hexo
    $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
  2. 打开_config.yml,修改如下:

    1
    theme: yilia

好了,就这么两步,主题就改好了~在浏览器里刷新一下,是不是漂亮了不少?

主题配置

主题的配置都在对应的主题目录下的_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
# Header
menu: #导航栏连接
Home: /
Archives: /archives
rss: /atom.xml #rss地址 默认即可

# Content
excerpt_link: Read More #阅读更多的文字显示
fancybox: true #开启fancybox效果

# Sidebar #侧边栏设置
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts

# Miscellaneous #社交网络和统计连接地址
google_analytics: #google analytics ID
favicon: /favicon.png #网站的favicon
twitter:
google_plus:
fb_admins:
fb_app_id:

部署到 GitHub

Hexo 支持一键部署。一键部署到 GitHub 需要先安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

然后配置 Hexo 的_config.yml中的deploy

1
2
3
4
deploy:
type: git
repo: https://github.com/username/username.github.io.git #库(Repository)地址
branch: master #分支名称

之后输入以下命令即可部署到 GitHub 中:

1
2
3
$ hexo clean #清除缓存 网页正常情况下可以忽略此条命令
$ hexo g #hexo generate 生成静态网页
$ hexo d #hexo deploy 开始部署

在浏览器中打开 http://username.github.io 看看你的博客吧!
p.s.第一次部署到 GitHub 上可能需要等个几分钟才能生效。

插件

Hexo 的各种插件可在其官网找到。
这里以常用的两个官方插件 Sitemap for SEO 站点地图RSS Feed 文章订阅 为例。

1
2
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-feed --save

然后配置_config.yml

1
2
3
4
5
6
sitemap:
path: sitemap.xml
feed:
type: atom
path: atom.xml
limit: 20

是不是简单到没朋友?其他插件的安装类似,并且 GitHub 上都有详细的配置说明。

一些 Hexo 的其他的配置(域名、评论、统计、404等)请移步另一篇:Hexo 其他的一些配置

最后

虽然之前没用 Hexo 的时候,我也基于 Jekyll 和 GitHub Pages 搭建一个博客,并写了几篇文章(主要是作为备忘录而写的),但是当我接触 Hexo 后,感觉这真的是一个很快捷、方便的搭建静态博客的工具,所以想把它的搭建过程总结一下,让大家都能方便的搭建起自己的独立博客。
好久没写过这么多字了(记得上一次应该是毕业论文的时候吧),我也是第一次在网上写这么长的博文,可能有些地方用词不当或描述有误,希望大家能批评指正。

最后的最后,感谢这些博主及他们的文章,让我在搭建和写作的过程中有了很好的参考资料: