如何在Github上搭建个人博客

文章目录

1. 整体流程
2. Fork模板
3. 本地预览
4. push到github
5. 更新blog
6. 关联域名
7. 补充说明

最近发现用Github来写文章，或许是一个不错的选择，别的Blog系统，管理起来太麻烦了以至于时间不长我就开始不想继续写了。最近是打算开一个坑，记一下Leetcode题解，所以就顺便开一个Blog记录记录。
作为开始，这篇文章就记一下怎么搭建这个Github blog。

整体流程

我认为先讲一讲整体过程会比较容易理解一些。本质上来说，你的blog是一个在Github上托管的repo，这个repo的内容跟一般的网站差不多，不过它用了一些工具来简化建立的过程。首先Github上可以建立特殊的repo，叫做github-pages，这在新建repo的时候有提示。其次，针对这种特殊的repo，github会采用一些插件来执行模板渲染，例如jekyll，生成静态页面，同时给我们一个域名来解析到这个静态站，同时，github会添加ignore规则，忽略repo中动态生成的_site文件夹。
所以在理解了jekyll的工作原理之后，我们只需要做

建立blog repo
关联域名

这两步就可以了。
建立blog repo要遵循一定的语法，yml配置是jekyll要求的，我直接fork的一个大神BeiYuu的blog模板，点我查看他的博客。大家也可以去选自己喜欢的模板或者自己组装自己喜欢的组件。
关联域名这里，需要你自己有DNS提供商，我呢嫌麻烦就直接用了Github提供的功能生成了一个域名，由于我直接用的repo名字作为域名，所以也没有测试过repo名字和域名不同时候能不能工作。（后来自己申请了一个域名，在Github项目下配置了一个CNAME做解析，配置CNAME的方法Github官网也有说，其实就是在这个叫做CNAME的文本文件里写上自己的域名就行了）
repo的名字我设置的是USERNAME.github.io，之所以这样是因为这个名字直接就对应我们在github上的空间，我在这个repo下默认是用master push的。github有一个自动生成pages的功能，他的默认分支名字叫做gh-pages。

Fork模板

不是Fork完就完了，还要做以下几个工作（主要是改配置）：

保留原作者声明
修改配置

要改的主要是这几个

_layouts模板文件
_config.yml配置文件
各种js、css文件

修改诸如超链接、内容、样式等。顺便也修一下bug，或者修改一下自己不喜欢或不满意的效果。如果时间充裕，甚至完全可以使用另一套模板，例如很流行的wordpress模板来搭建。

本地预览

这里要本地预览就要安装jekyll，首先要安装ruby，推荐RailsInstaller套件，安完还得安DevKit。jekyll安完得安rdiscount，用来解析markdown，当然你也可以用它自带的解析器。安装到这里基本上就结束了，我也开始有点不耐烦。
不用本地预览的话……这一步可以不做。
在windows下我的jekyll没有安装成功，估计是makefile的原因，提示的错误是failed to build gem Native Extension,以及makefile:165.target pattern contains no ‘%’. Stop，如果有谁知道什么原因，请留言告诉我，不胜感激

update-2015 5 6: 经微博网友 jrc2012的提示，在github上找到了同样的issue，可能是版本原因，据称把gem降级到1.8.29, ruby1.9.3可解决。

update 2015 9 30:
按照官方教程安装好了ruby、jekyll和相关依赖包（注意教程第一页有写版本兼容性），终于可以在本地预览了，Windows就是麻烦。除了官方教程安装的包之外，还要把你自己在_config.yml中指定的插件也安装好。之后就可以打开cmd，先改变cmd的编码格式为utf-8，chcp 65001，然后进入到博客根目录，运行

jekyll  serve -w

查看效果。
如果遇到端口被占用，netstat -aop tcp查看一下是哪个进程占用了4000端口。
然而悲伤的是本地预览的URL不支持中文，遇到中文就会404，非中文的页面就没问题，把生成的_site下中文文件夹的名字改成英文也可以直接url访问。显然是url encode的原因，悲伤。

update 2015 11 10
根据
Jekyll编译中文文件名的网页的本地预览问题下的回答找到了原因及解决方法。
原因是ruby的包WEBrick采用了系统默认编码作为路径编码.修改方案是把本地Ruby中这个包里面有关解析路径的地方强制修改为utf-8格式

1.
path = req.path_info.dup.force_encoding(Encoding.find("filesystem"))
path.force_encoding("UTF-8") # 加入编码
if trailing_pathsep?(req.path_info)
    
2.
while base = path_info.first
break if base == "/"
base.force_encoding("UTF-8") # 加入编码
break unless File.directory?(File.expand_path(res.filename + base))

改成这样有后遗症(我未验证)：如果”根目录路径”中有非ascii编码的路径会无法预览，例如C:/非ascii编码/_site，只要根目录不要挂在中文路径上就可以凑合

push到github

在Github建立对应的Github Pages项目，有引导，不用多说。

更新blog

只需要在对应_posts目录下按照模板写md格式的blog就行了，名字按照year-month-day-words-of-blog-title的格式命名，然后push上github就OK
注意，必须要保证两个---及之间的内容格式完全符合模板语法，否则该blog无法解析出来。

关联域名

把你的域名绑定到github上这个blog的地址就可以了。按照我这个流程如果不绑定域名，访问域名就是USERNAME.github.io。我配置了CNAME之后访问域名是blog.hjhjw1991.net。
后面这个域名是我个人的域名，在DNS管理中被CNAME解析到前面这个github的地址。

补充说明

模板自带的评论插件是DISQUS，挺好用的。用他的插件需要去他官网https://disqus.com注册一个账号，再在自己的模板中配置一下即可。
这个插件允许匿名评论，也允许用google、facebook、Twitter及disqus账号登陆评论，在国内可能不太好用。大家可寻找替代插件。

代码高亮在模板中有jekyll的pygments插件和google的prettify.js可以使用，我选择了prettify.js，因为用起来比较简单，它直接作用于markdown语法的代码块，不需要额外添加什么，另外大多数时候它可以正确识别语言。

右上角社交用的新浪微博提供的API，叫做微博秀，可以直接去微博主页找到，至于左上角社交因素是直接链接到我的账号主页的，图标是去官网截的，60x60.

参考资料如下，百分之八十的问题都可以通过以下教程和查阅官方文档得到解决：
搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门
 Jekyllcn
Jekyll变量和 Jekyll模板语法教程

2015-10-21: 更新。发现这个blog的题目毫无信息量，于是改了一下，“如何在Github上建立个人博客”。

hjhjw1991's blog

Coder, Learn