缘起

本来使用jekyll，倒腾了半天才在github上建好博客。
由于jekyll默认的主题太丑，我在网络上寻找资源的时候恰好遇到了hexo，默认的主题十分的清爽大气，就尝试了一下，没想到配置起来远比jekyll方便，就转而是用hexo建立博客了。

在尝试了多种主题又修改了一些配置之后，博客配置也算是弄好的。这里记录下折腾过程中的一些经验。

Github Page

Github为用户提供了一个静态的网站空间Github Page，用户可以通过username.github.io来访问自己的网站。

不过Github Page上只能存放静态网页，不能用数据库之类的玩意。建立网站的方法很简单，在github上建立一个username.github.io的仓库，往里面塞一些html文件，外部就可以通过username.github.io/xx.html来访问了。

不过如果是建立博客的话，index页面是要经常更新的，手动编写是很麻烦的，所以有了一些工具，给定一组文章后，可以生成一个静态的博客网站，有index页面，有文章页面。不过整个网站仍然是静态的，没有后台，每次上传新的文章，都要重新生成整个网站。

我知道的工具有jekyll，octopress，hexo。其中jekyll是Github官方推荐的。

简单开始

安装node.js

hexo是基于node.js构建的，所以要先安装node.js。

前往node.js官网下载node.js安装包，然后安装即可。

安装hexo

打开命令行输入以下命令即可。

npm install -g hexo

建立博客

你需要在本地找到一个地方存放博客文件。

假设这个位置叫hexoblog好了，在他的父目录中打开命令行，输入以下命令：

hexo init hexoblog

现在hexoblog目录已经被初始化成了博客文件夹。

hexoblog文件夹里会生成如下的文件结构：

.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中_config.yml用于配置博客信息，source目录放置文章，themes目录存放主题，其它文件一般来说都不会用到。

发布文章

hexo使用Markdown格式来发布文章。source目录中存放的是博客里的文章。在_post中存放的是用户发表的文章。我们可以通过命令行在这里面建立Markdown文件，不过我倾向于手动建立文件，比较直观。

Markdown格式是一种简易的标记语言，易读易写，Markdown格式写成的文件可以直接转换成HTML格式。

这里我们并不需要一个Markdown编辑器，只需要一个文本编辑器建立后缀名为md的文本即可。如果需要Markdown的语法高亮和预览功能，windows下我推荐MarkdownPad，可以自定义Markdown生成的CSS。

用户书写的Markdown文件只需要在文件头部加入一行YAML信息就可以被hexo识别成文章。

title: Hello World
date: 2014/8/2 17:18:39 
---

---是YAML的结束标志，前面的属性就是YAML信息了。

下面的表格是可能的属性和属性值。

上面表格列出的只是hexo默认需要用到的属性，事实上你还可以添加其他属性段和属性值，在主题中自己写程序处理它们。

生成网站

写完文章后，在hexoblog目录打开命令行，输入以下命令：

hexo generate

hexo就会建立一个public文件夹，里面存放了生成的静态博客文件，把整个目录拷贝到username.github.io仓库中，博客就完成了。

本地运行

不过在把文件上传到Github之前，我们还是想在本地看看网站的运行效果。hexo内置了一个小型服务器，在hexoblog目录中输入以下命令就可以启动服务器了。

hexo server

打开浏览器，访问http://localhost:4000就可以看到生成的网站的效果了。

服务器的运行过程中，你可以撰写新文章，重新生成网站，在浏览器中看到新的结果。不过如果你修改了_config.yml文件，那可能就得重启服务器让这些配置生效了。

其实hexo的服务器上运行的网站并不依赖于public文件夹中的内容。服务器上的内容是动态根据hexoblog目录中的内容解析的。你修改完_post目录中的文章之后，服务器上网站里的文章就会自动更新了。

部署到Github

上面的章节已经阐述了如何使用hexo建立静态网站的过程了。不过发布新文章的过程有一些麻烦，你必须重新生成网站，然后上传到Github上，输入一堆命令。

事实上hexo提供了一键部署网站到Github上的功能。

首先要让Github信任本地主机。

下载Github的客户端，这样你就拥有Github命令行了。

打开Git命令行输入以下命令，生成本地密钥:

cd ~/.ssh
ssh-keygen -t rsa -C "github邮件地址"

之后出现的内容不用管，一路回车。

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

打开.ssh目录下的id_rsa.pub文件，复制里面的密钥。

然后到Github上登记这个密钥。

打开Github，点击右上角的Account Settings。

点击左侧面板中的SSH keys，然后点击Add SSH key，将本地生成的密钥添加进去。。

接着打开hexoblog目录下的_config.yml找到deploy部分，配置部署信息:

deploy:
  type: github
  repo: git@github.com:username/username.github.io.git
  branch: master
  message: hexoblog #更新信息，可以自定义

打开Git命令行，在hexoblog目录下输入以下命令，你的网站就自动更新到Github上了，过一会你就能通过username.github.io访问你的新网站了。

hexo deploy

配置修改

上面的内容都是关于如何用hexo建立博客的。不过默认或者第三方的主题（hexo主题列表）总是有一些地方让人不满，我们有时候需要去修改它们。

我个人是不懂网页技术的，不过不断的摸索之后，还是找到了一些修改配置的地方。

下面的修改都是以pacman主题为例，说明如何修改博客样式。

安装pacman主题
在themes文件夹底下建立pacman文件夹，将Github上的pacman主题仓库里的文件全部复制进去。
修改hexoblog目录下的_config.yml文件，将里面的theme字段属性改为pacman。

hexo的主题其实控制了博客生成的大部分过程。主题的文件主要分为两部分：

• 样式控制 样式控制控制了网页中每个部分的模样与大小。样式控制文件都放在pacman\source\css中。

• 结构控制 结构控制控制了网页中有哪几个部分，他们放置的顺序是如何的。结构控制文件都放置在pacman\layout中

另外主题本身也自带有配置文件，放在pacman\_config.yml中，里面可以控制主题的大部分参数，不过要修改具体的样式，就要进入底层的样式文件中修改了。

代码高亮

代码高亮的样式存放在hexoblog\themes\pacman\source\css\_base\code.styl中。
里面可以修改代码的高亮的具体样式。

默认的高亮程序对C++的解析并不是很彻底，并不能单独高亮某些部分，无法达到Sublime中的效果，修改时有大概的效果就可以了。

Markdown样式

Markdown渲染引擎只是将Markdown语言转换成HTML标记，所以要修改生成的Markdown样式，比如blockquote的样式，quote的样式，只要修改HTML的CSS中对应的HTML标签的样式即可。

在hexoblog\themes\pacman\source\css\_partial\article.styl中存放了文章内容中的各个标签的样式，直接修改既可。

要想知道Markdown标记对应的HTML标签，可以先自己写一个Markdown文件，转换成HTML文件后对照标签即可。另外在修改样式文件中标签的属性时要注意标签的嵌套。

网页布局

hexoblog\themes\pacman\layout中存放了网页的布局样式，直接修改即可。