jekyll+Github搭建个人博客

前言

最近打算着手写WebGL的相关文章，心想着如果可以在文章里嵌入WebGL程序也是极好的，可惜简书的MarkDown似乎不能直接嵌入Canvas或是js脚本，于是想到了Github能自建博客。研究后，发现可以在其中自如的使用各种标签或是脚本，便有了此文章记录总结搭建的方法。

jekyll

jekyll是一个可以把你写的MarkDown转化成html的纯前端框架，为什么说它纯前端呢？因为你的文章都是以MarkDown文件的形式保存的，无需数据库。配合Liquid可以灵活自由的生成动态Html页面。Github原生支持jekyll，你不需要在本地build，直接把jekyll项目push到Github，Github会自动帮你生成html。

搭建过程

首先创建一个特殊的代码仓库，名字必须是xxx.github.io，xxx是你的github昵称。

把代码clone到本地。

下面是我自己的git，别直接拷贝了。

git clone git@github.com:SquarePants1991/SquarePants1991.github.io.git
cd SquarePants1991.github.io

安装ruby环境

如果你没有安装ruby，请安装，Mac上一般会自带ruby。通过终端运行ruby --version可以检测有没有安装。

安装Jekyll环境

在你的xxx.github.io目录下新增文件Gemfile。复制下面的内容到Gemfile里。

source 'https://rubygems.org'
gem "github-pages", group: :jekyll_plugins

使用终端在xxx.github.io目录下运行bundle install，如果失败，尝试运行bundle update。
运行成功后，就可以使用Jekyll创建博客内容了。

创建博客

删除你xxx.github.io目录下的Gemfile和Gemfile.lock文件，然后使用终端在该目录下运行jekyll new ./。成功后，直接运行jekyll serve就可以在本地预览效果了。在浏览器输入http://127.0.0.1:4000/，可以查看效果。

打开xxx.github.io目录下的Gemfile文件，为了兼容Github默认的Jekyll，需要把gem "jekyll", "3.4.3"替换成gem "github-pages", group: :jekyll_plugins。

添加文章

在xxx.github.io/_posts目录下按照年-月-日-名称.markdown的文件名格式创建新文章。文章内容可以参考自带的文章示例。

发布

最后我们把xxx.github.io目录下的内容都push到Github上，就可以访问你的个人博客啦。地址就是xxx.github.io。

TroubleShooting

如果发现博客打不开，可以去Setting查看是不是有报错。

往下翻，可以看到GitHub Pages。

如果有问题，此处会报错。

一个带纹理的Cube是我在博客里尝试使用WebGL的页面，有兴趣的可以看一下。后面我会开始发WebGL相关的文章。简书，个人博客都会发布，个人博客会内嵌演示的Demo，简书则没有。