Hexo和Github搭建Blog

3-minute read
Hexo • github • MathJax • Next • Pandoc

Hexo

Hexo是一个很简洁好用的静态Blog框架，第一次看到是在始终的博客，当时觉得主题很漂亮，速度也还不错，在页面底下看到了Hexo，于是就去看了一下介绍，结果发现好简单啊。加上去年写了一学期Latex，觉得Markdown肯定只会更简单，于是就按照这个教程也搭了一个，于是这篇日志基本就参(zhao)考(chao)这篇教程写了。

准备工作

教程用的windows，我用的Mac，其实差不多，Mac还简单一些，正好给了我个机会证明这篇日志是原创不全是照抄的。

Homebrew

Mac下缺的东西都可以用Homwbrew来装，很方便。打开就是安装命令。

Node.js 

$ brew install npm

hexo

然后就可以安装hexo了

$ npm install hexo-cli -g
$ npm install hexo --save

Hexo配置

初始化

执行以下命令

# 安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install

# 新建完成后，指定文件夹的目录如下
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|      ├── _drafts
|      └── _posts
└── themes

安装插件

这个我是按照教程来的，但是有几个明显用不到的就可以不装了，比如git之外的几个deployer， 还有好几个generator。

$ npm install hexo-generator-index --save
$ npm install hexo-generator-archive --save
$ npm install hexo-generator-category --save
$ npm install hexo-generator-tag --save
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save
$ npm install hexo-deployer-heroku --save
$ npm install hexo-deployer-rsync --save
$ npm install hexo-deployer-openshift --save
$ npm install hexo-renderer-marked@0.2 --save
$ npm install hexo-renderer-stylus@0.2 --save
$ npm install hexo-generator-feed@1 --save
$ npm install hexo-generator-sitemap@1 --save

预览 

$ hexo g #生成public静态文件
$ hexo s #本地发布预览效果
INFO  Start processing
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

本地做的所有更改都会实时的更新，可以随时看到刚刚所做的修改，非常方便，平时也可以另外开一个进程一直跑，然后再修改。

新文章和新页面 

hexo new "文章标题"
hexo new page "关于"

这两个命令其实都是生成的Markdown文件，如果想要修改文章或者编辑页面，编辑相应的.md文件就可以了。

Github配置和自动部署

Github Pages是一个Github开发的给用户托管静态网页的功能，自由度和稳定性都非常高，十分良心。

github

  1. 新建项目，名字必须和用户名一致，格式为username.github.io；

  2. 稍等几分钟之后就能访问静态主页了http://username.github.io；

  3. 编辑_config.yml

    deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

    ``

  4. 命令hexo d就会自动把public里的文件全部同步到github上，并且访问主页就能看到所做的修改。

域名设置

  1. 在source目录下创建CNAME文件，里面填写自己的域名；
  2. 给自己的域名添加CNAME记录，推荐DNSPod，配置页有详细的介绍；
  3. 将CNAME文件同步到Github上，很快就能通过自己的域名访问网站了。

Hexo主题设置

目前用的是Next，链接有详细的安装和设置教程。

参考其中头像的设置，可以用类似的方法设置favicon，平时在文章中插入图像的链接也是一样的。

关于Markdown编辑器

其实我一直用Sublime Text写代码，我相信它也一定能够写Markdown，不过我估计它不支持所见即所得，所以我也没有去配置它。

目前我用的是MacDown，基本我能想到的它都支持，包括代码高亮，而且效果基本和Hexo生成的一样，目前看来是我用过的最好的Markdown编辑器，唯一的遗憾在于不支持文档管理，不过这个功能有没有都有一定道理。

目前发现的和Hexo的区别有：

  1. Hexo文件前面有一块配置区域Macdown解析不了；
  2. 插入图片的文件路径不一致；
  3. #开头的标题要空格，不然Hexo不会解析成标题，而Macdown没有这个问题；
  4. 父标题和子标题的#数目要连续，不然生成的目录可能会有bug；
  5. 使用MathJax的时候，_前面要加\，不然解析不正确；
  6. 使用MathJax的时候，行内公式使用单个$，MacDown默认使用两个$, 设置中可以更改；

使用MathJax

参考Next的官方文档

编辑 主题配置文件， 将 Mathjax 下的 enable 设定为 true 即可。 cdn 用于指定 MathJax 的脚本地址，默认是 MathJax 官方提供的 CDN 地址。

# MathJax Support
mathjax:
  enable: true
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

备份源文件

来源：Tips for Hexo configuration 之前采用新建一个repo的方法备份文件，然后发现使用hexo d的时候，会部署所有的文件，然后也没有找到办法恢复。

其实，只需要新建一个分支就可以备份源文件了

$ git init
$ git checkout -b source
$ git add .
$ git commit -m "init"
$ git remote add origin git@github.com:saukymo/saukymo.github.io.git
$ git push origin source

部署后自动备份源文件

来源: 自动备份Hexo博客源文件

安装shelljs

$ npm install --save shelljs

在Hexo根目录的scripts文件夹下新建一个js文件，文件名随意取， 如果没有scripts目录，请新建一个。

然后在脚本中，写入以下内容：

require('shelljs/global');

try {
	hexo.on('deployAfter', function() { //当deploy完成后执行备份
		run();
	});
} catch (e) {
	console.log("产生了一个错误<(￣3￣)> !，错误详情为：" + e.toString());
}

function run() {
	if (!which('git')) {
		echo('Sorry, this script requires git');
		exit(1);
	} else {
		echo("======================Auto Backup Begin===========================");
		cd('~/Documents/mkdef');    //此处修改为Hexo根目录路径
		if (exec('git checkout source').code !== 0){
			echo('Error: Git checkout branch source failed');
			exit(1);
		}
		if (exec('git add --all').code !== 0) {
			echo('Error: Git add failed');
			exit(1);

		}
		if (exec('git commit -am "From auto backup script\'s commit"').code !== 0) {
			echo('Error: Git commit failed');
			exit(1);

		}
		if (exec('git push origin source').code !== 0) {
			echo('Error: Git push failed');
			exit(1);

		}
		echo("==================Auto Backup Complete============================")
	}
}

注意修改为自己的远程仓库名和相应的分支名。

此时，运行hexo d后的结果如下：

$ hexo d
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
[master d747a0d] Site updated: 2016-05-29 01:22:33
 5 files changed, 7 insertions(+), 13 deletions(-)
To git@github.com:saukymo/saukymo.github.io.git
   bb4cdbd..d747a0d  HEAD -> master
Branch master set up to track remote branch master from git@github.com:saukymo/saukymo.github.io.git.
INFO  Deploy done: git
======================Auto Backup Begin===========================
Already on 'source'
M	"source/_posts/Hexo\345\222\214Github\346\220\255\345\273\272Blog.md"
M	themes/next
[source 1786b36] From auto backup script's commit
 1 file changed, 5 insertions(+)
To git@github.com:saukymo/saukymo.github.io.git
   49ab33a..1786b36  source -> source
==================Auto Backup Complete============================

压缩静态资源

安装hexo-all-minifier

$ npm install hexo-all-minifier --save

然后 hexo g时就会自动压缩静态资源

使用pandoc解析

pandoc是一个比markdown更加强大的解析工具，使用它可以避免MathJax和markdown冲突的问题，而且二者的语法也大同小异。

首先安装pandoc：

brew install pandoc

然后用npm安装hexo-renderer-pandoc：

npm install hexo-renderer-pandoc --save

这里我不知道怎么设置Hexo使用哪一个解析器，所以我直接删掉了另一个解析器hexo-renderer-marked

此时，新生成的页面里，所有的公式应该都不需要转义下划线了。

但是，pandoc对表格的支持没有markdown那么智能，-的数目和表格的宽度严格相关，两端也需要用|闭合，才能正常显示。坏处自然是设置更加麻烦了，好处则是有利于微调。不过暂时还不清楚什么时候表格里的内容会溢出，什么时候会自动换行。

据说pandoc可以用来写论文，之后可以尝试一下。

设置侧边栏头像

参考Next wiki