你这是什么垃圾浏览器,这都不能显示(╯‵□′)╯︵┻━┻

【纪实】 - 智障博客搭建旅程

Author Avatar
猪蹄宝宝 2017-07-01
  • 在其它设备中阅读本文章

拥有一个自己的网站曾经是我的一个梦想。这个想法其实从初中的时候我就开始有了,但是呢。。。我其实不是一个执行力很强的人,于是一拖再拖,拖到了现在。。。(╯‵□′)╯︵┻━┻

蠢蠢欲动

彼时我正在研究 Flyme 和 MIUI 的 patchrom(虽然没坚持下去是吧),于是我看到了这么一个网站:魅族内核团队,通过其中的关于页面,以及之后的百度谷歌,我发现 GitHub 提供了静态网站的托管服务,并且可以自己通过 jekyll 等工具对 markdown 文档进行编译,生成静态网页。

付诸行动

魅族内核团队提供了自己的博客源代码,于是我将其仓库直接 Fork 到了我自己的账户下,修改仓库名以符合 GitHub Pages 的要求。访问gadfly3173.github.io后就显示了和魅族内核团队一样的页面。这个时候就应该开始修改网站让他变成我自己的了。为了管理方便,我选择 Visual Studio Code 对博客源代码进行管理。通过其内置的强大的搜索功能,我将其中与我无关的内容都进行了删减和修改。为了在 Linux 环境下修改方便,我顺手学习了一下 GIMP(说得好像这玩意的基础操作很难学一样。。。),最后得到了这样的效果:
jekyll_ver
看起来是还不错,但是总想做点什么,让它看起来更像是我的博客,而不是从别人那里直接生搬硬套过来的。
huajidog
结合我在百度上找到的别人建站的经验,我给我的博客页面中头像显示处增加了鼠标滑过头像旋转的功能,参考了很多网上的方法。这个功能我实现了很久,后来发现实在是我的 CSS 语法掌握得太差而导致没有显示。。。┑( ̄Д  ̄)┍

遭遇阻力

这个时候我意识到,我需要给我的博客添加一个评论功能。作为静态页面,这是不能直接实现的,但这并不意味着没有方法。通过 JavaScript 技术,可以由外部服务器提供评论功能。百度一下,发现大家都在用多说,可我再一百度多说,发现多说倒闭了。。。WTF???
通过谷歌再次搜索,发现还有很多人通过 Disqus 来实现。于是按照教程我完成了 Disqus 的部署。然而在一次意外中,我发现这东西其实是被墙的,普通用户难以使用。。。坑爹。。。
于是再次搜索资料,发现大家还喜欢用一些其他的评论系统,于是一个个试过来,发现不是不能以中文显示评论插件,就是显示我的域名被占用(没错,网易云跟帖,我说的就是你)正当我垂头丧气时,我意外发现了一个开源项目叫 Gitment。作者利用 GitHub 的 Issue 功能和 API,制作了一个用 Issue 页面来实现评论功能的插件。这好像正合我意啊!
juezui
可是当我将其应用后,我发现这玩意按钮哪里不对???
gitment_bug
经过一段时间的研究,我怀疑是我们的主题或者 jekyll 的问题。。。然而考虑到 jekyll 在 win 下使用不方便等原因,我决定在技师的安利下转到 Hexo。

转移阵地

Hexo 一开始让我有点不太习惯。虽然它比 Jekyll 的可维护性更强,但是文件结构更加复杂。。。不过 Hexo 中很多功能通过一条命令一个插件就能搞定,要比 Jekyll 什么都自己动手方便得多。
按照网上的教程迁移完成后,我选择了 Maupassant 主题,添加了百度统计代码,按照 jade 语法重新加入 Gitment 插件,用 hexo-generator-feed 插件解决了 RSS 页面的问题。踩完一堆坑后,这博客也差不多搞完啦!

后续修改

今天觉得应该搞个首行缩进的功能,结果我把.post-meta 当成了文章属性,.post-content 当成了目录。。。论不好好学英语的后果。。。
以及我发现 text-indent:2em;只对 p 标签分段的文字有效,而 Hexo 会自动将我自己在 md 中打的回车转义成<br>;。于是我在 marked.js 中将其改为</p><p>,一劳永逸 2333。