利用GitHub Pages + jekyll快速搭建个人博客

前言

想搭建自己博客很久了（虽然搭了也不见得能产出多频繁）。

最初萌生想写自己博客的想法，想象中，是自己一行一行码出来的成品，对众多快速构建+模板式搭建不屑一顾，也是那段时间给闲的，从前后端选型、数据库敲定，到实际代码编写，越写越发现自己要弄的东西太多太多，而且，没有模板，没有原型，当初我的审美还是很欠缺的，每写一行css都是怀疑的，痛苦的，直到一年以后，我的博客还处于代码阶段，且中间好几次因为工作太忙，长时间没碰它，想法越来越弱，直至搁浅。

这段时间换了工作，昨天发版，今天闲的不行，于是这想法突然又冒出来了，网上闲逛逛，发现了这篇小白式教程，曾经对快速构建+模板式搭建不屑一顾的我，经过岁月的沉淀，现在的想法：嗯，真香！

于是，我的处女博，就贡献给这篇教程吧，也算是感谢一下老板这篇傻瓜式教程了。

博客搭建

博客搭建主要依赖于教程《利用 GitHub Pages 快速搭建个人博客》，她的步骤都写得很详细，按着步骤来基本上问题不大，这里做个步骤总结：

1、最基本的，你得先有个GitHub账号

已经有账号的往下看，没有的同学点击这里去申请

2、fork我的仓库到你的git里面

进入我的仓库将仓库fork到你的git上：点击右上角的fork按钮，等一会儿页面自动刷新。

3、修改setting

进入你自己的仓库-setting：修改你的仓库名为 你的仓库名.github.io（这里有个问题，稍后解释），改这里：

注意：一定是你的仓库名.github.io，不然的话，你会发现git不会正确发布，比如我把仓库名改成了aaa.github.com，这个时候，下面GitHub Pages那块儿显示的发布地址就是 https://awang0608.github.io/aaa.github.com/ ，而不是我们预期的 https://awang0608.github.io/ 了。

走到这一步之后，就可以用自己的仓库地址访问了，接下来就是粗暴的删我的文章！删我的图片！删我的配置！将这一切，改成自己的，就可以啦。

遇到的问题

整个想法从萌生到开始搭建到搭建完成，差不多是一下午的时间，在按照教程走的这个过程中，发现了几个小问题，幸而都一一解决，在这里将解决办法奉上，希望对看到这篇教程的小伙伴们能有一些帮助。

最后一步，到改了仓库名为自己的仓库名后，使用github.io地址访问一直报404

教程给出的解决方案并没有解决我的问题，百思不得其解，还是百度大法好呀，要解决404的问题，需要将原仓库名awang0608.github.io修改成awang0608.github.com，等个几秒钟强刷https://awang0608.github.io/地址，就能看到网站正常显示。

使用百度分析工具Baidu Analytics的时候，因为对分析网站不熟悉，找了很久找不到自己的ba_track_id

在这里：

我也不知道这个马赛克打了有什么意义，但就是，想打。

Gitalk集成后报错：Error: Issues are disabled for this repo.

差不多就是下面这个鬼样子：

据说导致的原因是fork了别人的仓库，是不会有自己issues的，所以

解决办法：重新建一个空白项目，把代码移过去，这里需要注意的是，新建空白项目后，注意修改setting，主要有三个地方：一是setting里面的仓库名（关键点见步骤3），这个时候可以毫不犹豫地把.com后缀舍弃，直接使用.io后缀了，二是Features里面的Issues记得勾选（一般是默认勾选），三是需要自己设置GitHub Pages，GitHub Pages->Source:选择master，这时候不要动页面，它会自己刷新。

刷新过后

注意哦，页面若是显示类似 Your site is ready to be published at https://awang0608.github.io/qiubaiying.github.io/. 就是错的哦（这一点前面提到过，我这儿是因为没有改仓库名），要显示 Your site is published at https://awang0608.github.io/ ，并且前面有个绿色的勾，才能正确的用这个地址显示。

Gitalk集成后报错：Error: Not Found.

这个问题主要是前几个问题导致的，在解决404问题的时候，将后缀io改成了com，然后自然而然地，_config.yml文件中关于Gitalk的配置也改成了.com结尾，而且，git上Settings-> Developer settings->OAuth Apps里注册的Homepage URL也填成了.com结尾，但是，在解决Issues are disabled for this repo问题的时候，我们是直接抛弃了.com，使用.io的，所以会出现Not Found的情况，这个时候，将，_config.yml文件中关于Gitalk的配置和Homepage URL改回.io结尾。

项目跑起来后发现右侧多了一个滚动条，体验极其不友好.

这个就很easy啦，调试器打开搜查元素发现是article元素设置了overflow-x:hidden导致的，虽然我没明白为什么教程中的网站没有出现这个问题，但是我大手一挥，删掉了这个样式。

个性设置

在网站顺利跑起来的后几天里，我分别给网站新增了小桃心、打赏和浏览量展示的功能，后续看情况，如果有更多的小设置能俘虏我的话，我会陆续将它们加进来，变成一个花里胡哨的网站，可别嫌弃呀[手动捂脸哭]。

小桃心

小桃心的源代码是在网上找的，原功能是鼠标点击冒心心，我给新增了一个随机冒心心的功能（新增了一个定时器，慢慢跑），还让它变大了点，直接设置定时器的话，会发现如果停留在当前页之后切换到其他页面稍微长一点的时间，就有满屏的小桃心，晃瞎了我，于是加了一个判断，最多冒10个出来，嗯，心情愉悦，有兴趣的朋友可以查看源码：sweetHeart.js，或者直接引用，就可以在你的网站也加上这些小心心咯~

打赏

打赏功能随便一百度就有无数的教程，这里我就不再赘述，只是提醒一下，在引用的时候最好不要加前面的协议字符，否则容易404，还纳闷半天为什么不得行，还有就是，同一个网站上的微信和支付宝的付款图，微信随时能访问，支付宝的偶尔会报403，这个暂时还没找到解决的办法。

浏览量

浏览量展示使用的是不蒜子的脚本，方便，简单。不蒜子自己的定位是：极简网页计数器，两行代码，搞定计数。（悄咪咪地说，不止计数极简，连它的官网也真真儿是极简）

要使用不蒜子必须在页面中引入busuanzi.js，不蒜子可以给任何类型的个人站点使用。鉴于前端的引用惯性，我将这个脚本引用在了footer.html的最后，然后，在page.html中找个地方添加了代码来显示站点总访问量：

    // footer.html
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    //page.html
    <div>本站总访问量<span id="busuanzi_value_site_pv">0</span>次</div>

站点总访问量有两种计算方式：

pv的方式，单个用户连续点击n篇文章，记录n次访问量

uv的方式，单个用户连续点击n篇文章，只记录1次访客数

这两种使用方式分别对应id：busuanzi_value_site_pv和id：busuanzi_value_site_uv；

在post.html中也添加了代码来显示单页面访问量：

    <span style="font-size: 14px;">
        <span id="busuanzi_container_page_pv">
            共<span id="busuanzi_value_page_pv">0</span>次阅读
        </span>
    </span>

不蒜子自身只提供标签+数字，至于显示的style和css动画效果，可随意发挥，只需要保证id正确即可。

友情提示

在根据教程配置Homepage URL的时候是直接填写的https://awang0608.github.io/，但实际上需要填写的整个仓库的git地址：https://github.com/awang0608/awang0608.github.io。

结语

历经一下午将博客搭建好，历时3小时做了这篇总结，虽然是小白教程，但自己解决了教程中遇到的问题，还是比较开心的，接下来准备做的是优化，因为我个人作为一个前端来讲，确实觉得这个博客的主题吧，其实总体来讲还是很不错的，只是我实在无法接受页面布局上一张图占了整个浏览器的70%，其实大家能发现，点进一张博文详情，首先是看不到多少有效内容的，都被一张大图占据了空间，有效信息非常少。

仔细看了看项目代码，理清了它的实现，发现要改起来还是比较简单的，而且，我还可以做一些我自己比较喜欢的优化，所以，我准备动起来了。

可能有人会有疑问，不喜欢这个主题那为什么不更换一个主题呢？好吧，其实是因为我看了jekyll提供的主题，发现，这个已经很不错了，没有找到更喜欢的[手动捂脸哭]，当然，如果自己审美在线的话，我还是可以为jekyll贡献我自己的主题的。

如果有想去研究一下主题的，去这里：jekyll主题官网。