Jekyll 新坑之 Hello my new blog !

Jekyll 新坑之 Hello my new blog !

关于github-pages

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

上一个页面

戳这里! 上一个页面其实挺好看的,非常符合我自己的审美:三栏式、有文档和标签功能、站内静态搜索、丰富的自定义方法。 加之hexo用起来确实很方便,hexo cleanhexo 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用过一遍,轻车熟路就给配好了。

原本是用的谷歌站内搜索,换起来着实费了一点脑筋。 首先百度用中文搜索,得到的结果自然是百度内嵌站内搜索的方案…… 实在太难受了,坚决不用百度! 然后想到了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

Chen Ting

Chen Ting

The page aimed to exhibit activities & achievements during Ting's undergraduate & graduate period. Meanwhile, other aspects such as lifestyles, literary work, travel notes, etc. would interweave in the narration.

Leave a Comment

Disqus might be GFW-ed. Excited!