Jekyll 新坑之 Hello my new blog !

关于github-pages

8月15日开始的github-pages之旅，之前参考了北邮人论坛上Java版的一篇帖子。 帖子中很多人都推荐使用hexo + gh-pages搭建一个现代化的静态博客。 我自然不能免俗，最喜欢用人家用的成熟的开源产品了，功能丰富，可定制性更强。

上一个页面

戳这里！ 上一个页面其实挺好看的，非常符合我自己的审美：三栏式、有文档和标签功能、站内静态搜索、丰富的自定义方法。 加之hexo用起来确实很方便，hexo clean、hexo g -d，敲几个字母就可以轻松发博客，不用考虑git相关的麻烦事…… 所以我着实花了一点功夫在那个页面上。而且也取得了一些进展。 最主要的就是给那个页面增添了一个相册的功能。另外就是一些小的改动，比如主题加载中的小bug、对于标签逻辑的优化、对于flash的支持、thumbnail和banner等等小细节。总之，肯定比最开始的强不少。

然而，促成我最终投奔jekyll的原因恰恰就是这个相册功能。作为传统博客的重度用户，我实在难以忍受一个相册功能羸弱的“轻博客”。 因而，我也在构建自己博客的同时寻觅一个具有风格美观、功能完整、响应式设计的新型博客。由于hexo作者先天并未给hexo的主题设置相册相关的接口，因而仅有寥寥无几的主题作者自己定制了相册。这其中就包括了Yilia主题，以及我定制的Icarus主题。

Yilia主题对相册的支持是通过Instagram的外链制得的。由于我的照片不多，很难超过github单一repo大小的限制，因而考虑直接把github作为图床(⊙﹏⊙)b。考虑到国内github访问速度并不慢(目测有cdn)，这样做还是很方便的。

具体操作细节在我另一篇关于相册的博客中有写。戳这里！

总之，花了大概五天时间，终于打理好一个博客了。眼看着就可以投入使用了，结果……

见异思迁

偶尔在逛知乎时候看到：秀博客 尼玛，这种帖子下面各种秀个人博客啊……完全可以想象一群没被收录的个人博客背后，全是一个个等待认可的怪蜀黍！ 不管了，点了几个看一看。真棒啊……再看看自己的博客，虽然比大众脸NexT、Yilia、Nova之类的稍微强点，但和人家一笔真是气死人啊！ 罪恶的念头从心底萌生：我也要一个颜值超高的博客！

寻找

目标圈定，自然就开始左转转右看看。看来看去发现wordpress虽然泛滥成灾，但依然历久弥新，很多模板十分值得借鉴。 可惜，wordpress的模板并不能直接拿到jekyll里面用，不过区别倒也不算很大。 找来找去，千辛万苦，终于走到了一个网站：Omnia Vlthemes作为envato旗下的网站，质量自然很有保障。想当初envato的AE模板无数次救场啊…… 之后的千难万险与艰苦卓绝就一笔带过了，总之我终于找到了一个自己满意的风格！

适配GFW

功夫网的存在让我不得不去掉原本自带的disqus评论系统和谷歌分析模块。 对应的替代方案是多说和百度站长并没有用 这些东西因为在hexo用过一遍，轻车熟路就给配好了。

站内搜索 - Simple Jekyll Search

原本是用的谷歌站内搜索，换起来着实费了一点脑筋。 首先百度用中文搜索，得到的结果自然是百度内嵌站内搜索的方案…… 实在太难受了，坚决不用百度！ 然后想到了Icarus作者自带的insight静态搜索，决意找个类似的方案。

之后找到的第一个方案是lunr.js，光是安装就有八个步骤。而我第一个步骤就卡住了……

$ gem install jekyll-lunr-js-search

然后就是各种报错，大致意思就是编译失败。我去一个js居然还要编译，ruby我跟你什么仇什么怨……

本着坚决不看ruby文档的倔强，在尝试了三个小时后我去github搜了一搜，居然有同名替代方案…… 得来全不费工夫……吗？ 又花了三小时发现那个替代方案依旧跑不起来。一天就这么结束了……

转天，找到了现在用的第三个方案，很好用，但有小bug，主要是和liquid不兼容。 改了一下filter文件，第一次写了几行ruby代码，跑起来了，运转良好！ 感天动地啊~

如果想使用这个静态搜索，可以在blog页面下尝试。 顺便提一句静态搜索，其实对于个人页面很好用，只需要把所有文本内容进行采样并存储，通过一些搜索的手段就可以定位所有文章链接。Google真的是杀鸡焉用牛刀了。

目前的bug

目前仍旧有两个小bug

1. 相册页面照片图册对齐和张数问题：会多出一个空白页，另外就是横竖照片没统一情况下照片的对齐存在问题
2. 博客页面少于12篇博客载入异常。这个主要由于异步载入写死了。目测多写几篇就好了……

mermaid流程图使用方法

1. 文首加css引用：

1. 文中加标签：参考
2. mermaid syntax flowchart

提示框标签

分别有info success warning danger四种样式可供选择

MathJax

\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\)

video