使用 GitHub Pages 搭建 Blog

网上流行这样的一段话

第一阶段，刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。
第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。
第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。

我觉得很有道理，因为我每个阶段都经历过了，一开始我使用网易博客来写东西（那时候还没学编程），后来发现里面的模板不好看，有广告，又不能改，于是通过一个寒假的时间学习了wordpress，并搭建一个属于自己的个人博客，主题也是自己设计的。但后来主题看起来有点落后时代了，想改也有心无力，而且垃圾评论很多，基本都是广告，站点变迁很烦，那时候新浪云很便宜基本免费，但慢慢开始涨价了，我转到更强大的阿里云，但博客还在那边，意味着域名要重新备案，系统要重新搭建，数据库要变迁…于是我放弃了，重新做了这个网站。

GitHub Pages

准备工作：在GitHub上创建一个名为username.github.io的项目，其中username是您在GitHub上的用户名（或组织名称），如果用户名不匹配是无法正常使用的。这样就有了一个免费的域名和空间。
选择博客框架：GitHub Pages上只能放静态页面，所以只能选择静态博客框架，其中比较流行的有Jekyll，Hexo，Simple，Octopress，Pelican以及Lo·gecho等等，这些框架我都不太熟悉，但最后我选择了Hexo，选择的原因是：

Hexo是基于NodeJs实现，我本来就有安装NodeJs开发环境，省心。
Hexo可以通过简单的命令实现本地的预览，并直接发布到WEB容器中实现同步。
我看中了一个Hexo的主题
支持Markdown语法，有丰富的插件

Hexo

强烈推荐看官方文档：https://hexo.io/zh-cn/docs/setup.html
在安装 Hexo 前，你需要先安装： Node.js 和 Git ，然后执行以下命令：

$ npm install -g hexo-cli
$ npm install hexo-server --save
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

本地预览地址：http://localhost:4000/

没错，这就是我上面提到的那个主题，这个主题有三种外观，其中我现在使用的是 Pisces Scheme ，但还是做了一些修改，因为原来那个宽度太小了，不适合展示代码块，也不太美观。修改方法如下：
Pisces 的布局定义在 source/css/_schemes/Picses/_layout.styl 中，打开文件并在最后添加以下 css

.header{
    width: 80%;
    +tablet() {
        width: 100%;
    }
    +mobile() {
        width: 100%;
    }
}
.container .main-inner {
    width: 80%;
    +tablet() {
        width: 100%;
    }
    +mobile() {
        width: 100%;
    }
}
.content-wrap {
    width: calc(100% - 260px);
    +tablet() {
        width: 100%;
    }
    +mobile() {
        width: 100%;
    }
}

发现一个BUG：
Pisces Scheme主题在手机端会无法滑动页面，需要关闭canvas动画，打开主题 _config.yml 文件，把 canvas_ribbon 设置为 false
望作者尽快修复！

还是强烈推荐看官方文档：http://theme-next.iissnan.com/

写博客

创建一篇新文章

1	$ hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

草稿

1	$ hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 –draft 参数，或是把 render_drafts 参数设为 true 来预览草稿。

打开 blog/source/_posts 文件，找到刚刚创建的 Markdown 文件，使用 Markdown 编辑器开始你的写作吧！

发布

生成文件

1	$ hexo generate

监视文件变动

1	$ hexo generate --watch

完成后部署

1	$ hexo g -d

Push 到 Github 上

把 public 文件夹的内容 push 到你的 username.githut.io 项目中

$ cd blog
$ cd publis
$ git init
$ git commit -m "first commit"
$ git remote add origin https://github.com/username/username.githut.io.git
$ git push -u origin master

打开浏览器输入你的博客域名　https://[username].github.io/ 就可以访问啦！

完！

GitHub Pages

Hexo

NexT

写博客

发布

Push 到 Github 上