Set up Github Pages with Hexo, migrating from Jekyll

Set up Github Pages with Hexo, migrating from Jekyll.

本文介绍用Hexo创建github pages, 其中包含了从Jekyll迁移过来的过程.
Migrate github pages from Jekyll to Hexo.
Set up github pages using Hexo.
不光是迁移哇, 直接用Hexo setup github pages 看这个也有用哇.

为何要把github pages 从Jekyll实现迁移到Hexo?
前阵子用Jekyll建了github pages(官方推荐), 可是发现添加代码段比较痛苦, markdown的先后三个点并不能标记一个代码块, 须要在代码块先后加上两句特定的语句.
若是一篇文章有不少代码块, 这样一个一个加下来比较费劲, 并且加完了以后代码段的样式也不是很好看.

为此很苦恼的我问了phodal大神, 大神回复: Hexo.

下文记录了个人操做过程.

安装Hexo

必要条件:
Node.js
能够选个pkg,下载后点击安装, 装完以后告诉你路径:

也能够用nvm装的
nvm
Git
这个通常你们都有哒~

上面两个都有以后, 安装Hexo:

$ npm install -g hero-cli
装得也很快.
以后试一下hexo命令,若是有命令介绍(而不是command not found)就表明装好了.

设置和迁移

Setup

备份

首先, 从原先的_posts/目录下将原来的文章都拷贝出来.
另外将.git目录也拷贝出来(这是为了保持github上的历史).
这些文件另外保存.

创建新的目录

在准备好的空目录运行命令:
hexo init .
就创建好了hexo的目录,相关介绍能够去网站看.
npm install 下载依赖包.

Hexo会自动忽略下划线开头的目录和文件名,可是_posts目录除外.
这时候能够运行
$ hexo server
而后访问http://localhost:4000/预览一下.

配置

网站的设置文件是_config.yml
打开能够配置一些新东东, 好比title url之类的.
具体设置参照这个: configuration

内容迁移

这是内容迁移的介绍:
migration

因此首先在_config.yml文件里把 new_post_name字段改成:
new_post_name: :year-:month-:day-:title.md
不然就要修改以前每个文章的文件名,太麻烦,并且我以为加个日期也比较好.

而后把原来备份的博客文章移到source/_posts/目录下.

比较bug的是之前jekyll文章里的代码段先后加的那两句还得手动移除.
用Hexo后 先后各加三个` 便可标记代码段.
若是想要代码高亮, 好比是java, 代码段首的```后加个java.
这里能够查看代码高亮的各类语言: highlightjs

完成以后能够运行hexo server 命令在本地看一下样子.

而后把.git目录拷贝回来放在根目录. 能够看到repo地址啊, 历史记录啊还在.
最后提交, 本次提交即为迁移提交, push.

Deployment

部署Deployment

我原本觉得跟Jekyll同样本地运行好了, push上去就生效了, 结果并无.
访问原地址, github pages并不生效,竟然仍是原来的那个样子.

查了一下是由于deploy没有设置.

打开_config.yml文件,找到deploy字段, 设置一下.
个人是这样写的:

deploy:
  type: git
  repo: https://github.com/mengdd/mengdd.github.io
  branch: master

而后执行一下这条命令:
npm install hexo-deployer-git --save
这条命令执行后package.json会有一条改动, 新添加了一个插件.
把这个提交了.

而后generate和deploy:
$ hexo generate --deploy
$ hexo deploy --generate
这两条命令是同样的.
运行这条命令的时候可能会要求你输入github的帐户名和密码(若是你没有配置SSH key的话).
这个须要等待比较长的时间, 实际上最后它是给master分支作了一个git push -f
因此它其实是不用你本身push的.

以后就能够访问啦: http://mengdd.github.io/
哒哒!

网站代码和静态网页管理

在知乎上看到这个问题: 使用hexo, 若是换了电脑怎么更新博客?
乍一看感受很奇怪, 换一台电脑难道不是clone下来就好了吗? 仔细看了一下恍然大悟.
前面提到刚刚的部署命令执行了一次强制push, 但是当咱们查看github上的repo(https://github.com/mengdd/mengdd.github.io),
发现push上去的文件和咱们本地的这些彻底不一样.
如今在origin master上的全是一些静态html文件.
而咱们本地master分支上是一些配置, 还有source文件等.
也就是等于咱们把母鸡留在了本地电脑, 执行deploy以后只把鸡蛋push到了origin. (我这个形象的比喻).

那么怎么解决呢? 该问题下排名第一的 [CrazyMilk] 大哥已经给出了答案.
他的博文
因此解决办法就是新建一个分支把网站代码(母鸡)放上去咯~哈~

首先在本地, 基于当前本地的master新建一个hexo分支:
git checkout -b hexo
而后push到origin上去:
git push origin hexo
耗时比较久, 请耐心等待.

最后在github的settings页面把hexo分支设置为default.
DONE!

Theme

以后想设置一个好看的主题, 知乎上竟然还有这么个问题:
有哪些好看的Hexo主题?
我打算选这个试试: https://github.com/wuchong/jacman
在本地hexo分支根目录下运行:
git clone https://github.com/wuchong/jacman.git themes/jacman
就会clone到themes目录下面叫jacman的目录下.
而后在根目录下的_config.yml中把theme名改成jacman.

而后用命令hexo server就能够在本地查看效果.
改主题大概就酱, 两步就能够完成, 能够多试几个选一选.
选完了在hexo分支提交保存,而后运行hexo d -g生成部署便可.

Future

须要用到的命令: commands 随时查看哇.