我在GitHub Pages上部署博客已经有一段时间了。经历了一段时间的使用和对其他平台的测试，我还是决定暂时继续使用这一方案。现在来总结一下建立的方法和我这么选择的原因。
GitHub Pages
什么是GitHub Pages
GitHub Pages是GitHub为开发者推出的一种以网页形式展示自己希望展示的东西的方法。每一个GitHub仓库可以部署一个子域名，URL格式是https://your_user_name.github.io/your_repo_name/xxx，允许开发者在这里展示一些项目有关的内容（其实项目无关也可以，但是一般没人这么干）。每位开发者可以建立一个名为your_user_name.github.io的仓库，这个仓库部署GitHub Pages之后的Base URL将是https://your_user_name.github.io，可以理解为个人主页一样的存在。GitHub Pages是静态页面，不能在页面上使用需要后端支持的元素或者插件，除非使用其他服务或者自己建立的服务的API。这一措施也很好理解，毕竟GitHub只是给大家一个展示的地方，不可能为每个人分配大量的服务器资源来处理个人页面。
怎样使用GitHub Pages
GitHub的免费帐户只允许从属性是Public的仓库部署GitHub Pages，如果确实需要从私有仓库部署的话，可以考虑升级账户，具体政策和费用请自行参考GitHub官方说明。对于一个公开仓库，在设置里面可以选择部署GitHub Pages，在这里需要选择源分支，如果是正常的仓库，只是需要作为展示用，建议新建分支gh-pages（或者使用向导部署，会自动新建这一分支），这样这一分支的内容就和其他分支互不干扰，方便代码管理。GitHub会自动在所选的源分支中搜索，分以下几种情况：
- 如果根目录找到Documents路径，那么将从这一路径渲染并部署GitHub Pages，部署之后的网页结构和原路径保持一致。GitHub将只渲染markdown，html等直接能够被转换成网页的格式，对于例如word，excel等将作为文件的形式存储，访问指向文件的URL将直接下载文件。
- 如果根目录没有找到Documents路径，那么整个根目录都将被作为部署源。
- 如果发现Jekyll对应的路径结构，GitHub将自动使用Jekyll处理整个仓库分支，生成一个网站结构（这一结构只存放在GitHub自己的服务器上，不出现在仓库中，为了便于代码管理建议本地生成的网站也不要上传到仓库，因为即使上传GitHub也不会处理）。这也是我使用的方法。
为什么选择GitHub Pages
就我个人而言，选择GitHub Pages的原因很多。
首先最重要的是自由度方面，在这里只要不出现例如色情，恐怖等等内容，无论你发布什么，都不会受到审查。这对于我需要研究并记录特殊技术而言是一个非常好的地方，允许我自由地发布我的进度。
其次还有无需备案的特点。因为众所周知的原因，在中国是不能个人绑定并建立网站或者不经备案直接启动网站的，但是GitHub Pages没有这个限制，而且世界各国都能访问，甚至包括中国也能用，比较方便。使用WordPress或者Weebly能完成更多的东西，但是想要在中国访问需要专门备案，很麻烦。
最后还有GitHub本身的特点。它管理起来非常方便，只需使用git就可以了，同时和我其他的仓库在一起，整合了开发和展示。
Jekyll
什么是Jekyll
Jekyll可以理解为一套通过固定的模板（模板可以自己定义），从而极大地简化从资源到整体网站的生成过程的工具。GitHub自己的系统有这一工具，所以使用GitHub Pages和Jekyll建立网站的时候只需要上传资源和配置文件，其他生成的工作由GitHub完成。也可以选择在本地或者自己的服务器安装这一工具，将生成一个完整的网站结构，可以直接host。
Jekyll模板和模板的使用
我目前使用的是开源且免费的NexT模板，自己修改了一些小范围的设定。NexT模板可以在这里获得，模板使用MIT开源证书。我选择这一套模板的原因是，NexT模板简洁而且没有过多的干扰元素，无论是从读者的角度还是从我之后自己修改的角度都比较方便。当找到一套优秀的Jekyll模板的时候，先下载下来，并且按照上面说的建立一个仓库用以容纳你的博客。之后将下载到的模板进行自己的调整，具体的调整我将在下文介绍，然后push到仓库里就完成了。需要注意的是可以在仓库的主页看到目前的GitHub Pages状态，是否部署成功，如果提示部署失败的话，可以点击查看细节，进行对应的修改。
Jekyll文件结构
无论是什么模板，有一些文件结构是通用的。虽然可以通过修改设定让这些路径改变，但是非常不建议。下面我以我用的NexT模板为例，说明这些文件结构。首先需要明确的是，除了隐藏文件和文件夹，前缀是_的路径只会被Jekyll引擎识别，而不会直接呈现在网站上。从根目录开始，分别有：
assets文件夹
assets文件夹用来存放博客的资源。里面一般包括：
css文件夹
css文件夹用来存放网站的css样式表，一般是.scss格式。要注意的是，有的模板只有一组css文件，这表示它的样式和结构直接由这些控制，如果需要修改的话只能修改它们。有的模板，比如NexT，有专门的custome文件组，这些文件里面的设定是能够覆盖默认的模板样式的，如果要修改，尽量在这里改，轻易不要动原有的结构。
js文件夹
js文件夹存放网站引用的js插件，这样相比直接引用网络资源，能够提高速度。
assets文件夹里建议存放其他的引用资源，例如音乐，图像，视频等等。方便文件管理。
_posts文件夹
_posts文件夹是存放文章的地方。运行Jekyll生成之后，将从这里获取文章并生成对应的网页。需要注意的是，这里只能放要发布的文章，不要放乱七八糟的别的，以防Jekyll引擎进行别的处理。文章命名格式必须是yyyy-m-d-name.md或者是.html。文件名如果需要用中文的话需要考虑到，Jekyll的permalink生成方式一般是包含文件名的，也便于管理，这时候就会将文件名中的中文转换成Base64编码，导致它变成很长的一个字符串，无论是分享还是美观都不太方便。尽量使用英文文件名会比较好。
_layout文件夹
_layout文件夹用来存放页面布局的模板，Jekyll将根据这些模板，在不同的时候使用不同的布局，从而生成网页。例如，post.html就是控制文章页面的布局的。同样的，这一路径下的所有文件都会被Jekyll认为是控制布局的，所以也不要放别的。
_plugins文件夹
_plugins文件夹存放的是Jekyll插件。这些插件的数量比较有限，但是是由Jekyll引擎直接支持的，按照官方说明文档上的方法操作，无需特殊修改就可以直接使用，比基于js的插件方便很多。
_includes文件夹
有的模板没有这一个文件夹，NexT中这一路径用来存放基础的HTML样式，在_layout中调用，这样让文件结构整齐一些。
_sass文件夹
_sass文件夹也是用来存放css样式的。这些样式控制更基础的部分。
还有其他一些路径，根据不同的模板不一样，一般名字都很浅显易懂。
_config.yml
_config.yml是Jekyll的核心配置文件，它控制了Jekyll全局的很多配置，而且因为里面的配置会被全部加载，也可以用来控制自己加上的插件。下面用我的模板为例，解释怎么设置yml文件里的选项。
1 | |
这一部分配置比较好理解，控制的是网站的基本信息，例如站名（显示在标签页上的，或者被搜索引擎收录的），副标题是显示在页面上的，有的搜索引擎不收录，可以不填。下面的是语言，这个语言是模板语言，就是页面选项显示的语言，和文章写作使用什么语言无关。再下面的url设置，因为我们没有在子路径下部署，所以baseurl可以留空。permalink选项是用来控制每一个子页面，特别是文章页面的永久链接的格式的，可以自己定义，也可以用预设，我就用了预设的pretty。
1 | |
这一部分是控制阅读的，paginate控制每一个页面显示几条文章条目，更多的条目需要翻页才能显示。exclude控制Jekyll不会将什么文件当成是文章来解释，就避免了错误地将说明文档和日志等等当成文章发出去。
1 | |
这里控制的是代码高亮和markdown语法的渲染引擎。并非自己想用什么就能用什么，在自己的服务器上可以安装自己的引擎，但是GitHub Pages是有限制的。pygment已经不再支持了，建议使用rouge，是目前用的最多的引擎。至于markdown解释器就根据自己的喜好就好，我用了kramdown。
1 | |
NexT模板有Atom的支持，这是一个自动生成RSS Feed的工具，我开启了这个工具，就不需要每次都手动生成RSS链接了。但是Atom配置比较单一，如果希望能够自己修改RSS包含的内容的话，还是建议自己生成。plugins控制启用了什么插件，这些插件需要放在_plugins文件夹内。collections是告诉Jekyll，除了标准的_posts，还有这些路径里面其实也是文章，需要渲染。我因为使用了一个加密文章的插件，所以新建了一个路径存放需要加密的文章。
1 | |
这一部分设置都比较简单易懂，favicon是显示在标签页上的小缩略图，可以自行设定，否则将使用模板默认的标志。keyword是给搜索引擎用的，用来标记网站关键字。rss字段我留空了，这样表示使用Atom自动生成的订阅链接。
SEO（搜索引擎优化）设定部分我在此略过，因为我不需要搜索引擎收录我的网站。在之后合适的时候我会修改设定，用meta标签禁止搜索引擎对网站进行index，现在暂时不进行这么复杂的操作。
1 | |
这一部分设定的是显示在网页上的自己的社交媒体或联系方式。下面的图标映射使用Font Awsome的图标包，如果没有映射，就是一个小地球的标志。在NexT主题中，这一部分在侧边栏。
基础设置就是这些，不同的主题可能有不同的设定。
博客开启第三方功能
MathJax支持
MathJax是一个能够在前端渲染LaTeX数学公式的插件，开启之后就可以在博客里插入公式，比使用截图方便许多，效果也更好。NexT主题自带了这一工具的配置，在_config.yml中找到相关设置并且修改为：
1 | |
即可。对于没有这一选项的主题，可以找到控制文章页面布局的文件（例如_layout/post.html），并且在其中加入：
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
就可以使用最新版本的MathJax3。有关LaTeX公式的详细内容，我将在之后的文章中详述。
FaceBook SDK支持
FaceBook SDK可以让FaceBook用户对文章进行点赞，直接转发到FaceBook等等。需要申请一个FaceBook API。具体的操作需要自行谷歌，因为FaceBook的User ID其实是不想公开的，所以各种获取User ID的方法也在不断变化。获取之后修改配置：
1 | |
开启FaceBook SDK之后还可以开启FaceBook的评论插件，但是因为我启用了GiTalk，就没有开启这个插件。
星级评分支持
可以利用WidgetPack提供的免费服务来为博客加上星级评分功能。也有很多其他的插件支持这个功能，但是我挑了一个国外来源，便于设置而且不要个人信息的。首先需要注册一个WidgetPack的账户，地址在这里。之后会生成一个个人ID，只需设定自己需要使用的网站的地址，在NexT模板中，这一部分代码已经添加完成，只需将yml文件配置为：
1 | |
这里的color可以自己选择，控制的是星级插件的颜色。如果模板里没有这一功能，可以在WidgetPack的网站上选择Review这一项，并且打开install。WidgetPack会自动生成一段HTML代码，只需粘贴到自己想要放插件的地方就可以了。
访客统计
可以通过不蒜子插件为博客加上访客统计功能。不蒜子是中国的插件，但是是个人开发，捐助驱动的项目，并且也不需要个人信息，比较安全。不蒜子的说明和网站都是中文的，而且非常简单，在这里不过多说明，首先给出不蒜子的地址：这里。同时说明一下，不蒜子统计的是访问的uv和pv。这两个具体的区别是，uv是一个访客访问网站记录一次，无论他点击了多少篇文章。而pv的计算方式是每点击一篇文章就计算一次。所以我把整体的网站用uv方式统计，每篇文章用pv方式统计，能够尽量让数据准确。最后，不蒜子是目前为数不多的提供优质的不记名服务还不收费的提供方了，建议大家可能的话，用的时候还是稍微捐助一下，尽量延长不蒜子的寿命。
评论系统
一个成熟的博客，评论系统是必须的，这样才能让大家在博客上更方便地公开讨论，省去一遍一遍解释的麻烦。中国的评论插件都需要实名注册和网站备案，所以鉴于一贯的非实名习惯，我选择了GiTalk插件，是一个基于GitHub的评论系统，由GitHub官方维护。这一插件把评论以issue的形式存放在指定的GitHub仓库里，正好我的博客是建在独立的issue里面的，比较便于管理，但是同样地，经常在自己的一堆issue提醒里面发现奇怪的东西……所以是否使用自行决定即可。
首先要用GiTalk，需要在自己的GitHub上配置一个GitHub应用。无需复杂的配置，只要有一个API即可。之后将获得的证书和认证保存，注意尽量不要给这个应用和OAuth过高的权限，只要能够在你的仓库里面新建issue即可。GitHub官方文档里面提供了模板代码，建议直接插入，尽量别改，随意修改可能会遇到奇怪的问题，当然样式之类的没关系。最后需要注意的是，这个插件不能在你发布新文章之后自动新建并初始化issue，必须要你以自己的GitHub账号登录GiTalk的形式访问一次这一篇文章，才能初始化，别人才能发表评论。同时如果你修改了文章地址，例如进行了会影响permalink的操作，GiTalk会找不到旧的issue，此时要么手动指定，要么修改issue名称。
其他功能
我还为我的博客添加了很多别的功能，包括对整篇文章或者文章中的一部分进行密码保护的能力，以及动态网点背景（这个挺常见的），因为估计大家不是很需要，而且因为我的部署方案是静态网站，只能依靠前端实现，配置起来比较麻烦，暂时不讲，如果有需要的话，以后我会专门发一篇文章讲这个。