利用GitHub Pages + jekyll快速搭建我的博客

前言

想搭建本身博客好久了（虽然搭了也不见得能产出多频繁）。

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

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

因而，个人处女博，就贡献给这篇教程吧，也算是感谢一下老板这篇傻瓜式教程了。

博客搭建

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

一、最基本的，你得先有个GitHub帐号

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

二、fork个人仓库到你的git里面

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

三、修改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的时候，由于对分析网站不熟悉，找了好久找不到本身的batrackid

在这里：

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

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：busuanzivaluesitepv和id：busuanzivaluesiteuv；

在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主题官网。

予人玫瑰，手有余香！若是这篇文章帮助了你，而且让你以为想要放到本身的博客上，欢迎转载，转载请注明出处。

【点赞、分享】都是我持续总结，持续分享的最大动力！

另：闲暇之余用本身的GitHub Pages搭起了网站，里面会不按期更新一些文章，有兴趣的朋友能够去看看：个人Github Pages

有兴趣的朋友能够关注个人公众号：非梧不栖oy，微信可直接搜索关注或是下方扫码关注，公众号会同步GitHub Pages的部分博客，您能够直接在手机上随时阅读到本身感兴趣的文章