Jekyll建站折腾笔记

分享我用Jekyll建博客的过程,包含在Ubuntu系统下搭建Jekyll相关环境和博客主题的应用和修改。最后从非专业人士的角度分析一下Jekyll设计的亲和力和简洁美。

Jekyll还是Hexo?

在GitHub Pages建站,我参考的教程分为两派——Jekyll和Hexo。二者各具优势——Jekyll受到GitHub Pages的原生支持,可以直接上传Markdown文件,由GitHub在远端生成静态页面;而Hexo基于Node.js开发,更适合在Windows系统下部署,并且生成页面的速度要快得多。考虑到我有现成的Ubuntu设备,又想简化博客的运营,所以最后决定使用Jekyll。

关于Jekyll和Hexo的选择,muzilan的一篇文章给出了非常清晰的对比。

Ubuntu下Jekyll环境搭建

最初我并没有在本地搭建Jekyll的环境的计划,而是想找个别人的主题,修改之后推到自己的仓库。在尝试的过程中遇到了很多问题(尽管这些问题很可能不是缺少本地环境造成的),最后为了方便调试,还是按照教程从头搭建环境了……

根据Jekyll官网中文站)的教程,可以简单地在Ubuntu系统下搭建好Jekyll环境及其依赖的软件包,并生成一个套用默认主题的“myblog”。

博客主题的应用和修改

Jekyll Themes上可以搜索到非常多的Jekyll主题,我最后选择了Zolan。这个主题不仅呈现了很棒的页面设计,幕后的文件系统也很简明。于我而言它有两点不足之处——其一是缺少“置顶博文”的功能;其二是它的标签索引功能在GitHub Pages的安全政策约束下无法正常工作(根据cotes2020在Chirpy主题的自述文件)。这一节会展开介绍主题的应用和修改过程。

博客主题的应用

应用主题,只需要把别人的主题项目仓库克隆到本地,完成初始化和配置后上传到自己的GitHub Pages仓库即可。每个主题由于采用的插件不同,初始化的过程也各有差异,需要参考主题的自述文档。配置主题的过程要复杂一些,主要是修改/_config.yml文件中的首选项。在Zolan主题中,需要修改的配置在/_data/settings.yml(它被引用到了/_config.yml中)。在配置的过程有一个小问题曾困扰我:urlbase_url各自的意义是什么?答案很简单。以两个例子来说明:在域名为https://[username].github.io/的“用户主页”型页面中,

    url = '[https://username.github.io]'
    baseurl = ''

而在域名为https://[username].github.io/[repositoryName]的“项目主页”型页面中,

    url = 'https://[username.github.io]'
    baseurl = '/[repositoryName]'

而关于这两个变量的意义,实际上他们是创建子页面的基石。例如子页面/tags的URL则是 url baseurl/tags

博客主题的修改

修改主题,主要工作就是把不属于自己的作者信息替换为自己的,删除掉不需要的页面和博文,有余力的话还可以自己增添需要的功能。作者信息和页面信息一般存在于/_config.yml文件中,只需要修改相应位置。在Zolan主题下,要修改/_data/settings.yml。除此之外,/_pages/about.md对应About页面,也需要修改;想要把页面顶部栏中的多余页面删除,只需要在/_pages删除对应的文件即可。至于博文,Jekyll中所有的博文都保存在/_posts文件夹中,只需要简单删除掉里面的.md文件就好。不过最好保留一个文件,用作其他新博文的模板。

我擅自在Zolan主题中增添了一个“置顶博文”的功能。实际上这个功能是从wowthemes.net的Mundana主题抄来的——原理是在一片特定位置显示所有带有HIGHLIGHTED标签的博文(原版的标签是sticky)。为了在视觉上区别置顶内容和非置顶内容,我又把作者介绍的格式(主要是灰色的背景色)套用在了置顶博文区域 实在是不太懂HTML和CSS。所有的这部分修改都在/index.html当中。

我对于博客主题的最后一处修改,是主题中不正常工作的标签索引功能。如上所述,在GitHub Pages的环境下无法实现作者精心设计的标签功能——在一个新生成的页面上显示具有某个标签的所有文章——具体表现则是在GitHub Pages上除了404页面什么都显示不出来,而在本地服务器中功能正常。Chirpy主题的自述文件其实给出了解决方案,但是我不想花太多时间移植了。考虑到Zolan主题有非常棒的搜索功能,我直接在主页(/index.html)和文章页面中(/_includes/article_content.html)取消了tag处的超链接,替换了一个近似的颜色(goldenrod)来避免视觉上的变化。

Jekyll的亲和力和简洁美

博文写到最后,分享一些和Jekyll相处快一周的感触吧。

Jekyll默认主题Minima的文件系统设计关注了接口,这提高了平台对于非专业用户的亲和力。用户只需要编辑/_config.yml/index.md两份文件,就可以完成站点的初始化,此后只需要将编辑好的Markdown文件放在/_posts文件夹中来增添新内容。不难发现,设计师的精心设计让非专业用户甚至不需要接触到HTML文件就可以完成站点的设立和运营。.yml文件对新人来说也是比较劝退的,但是文件里面充满了精心书写的注释作为补偿,字句间都是设计师的良苦用心。

简洁美和亲和力是分不开的。尽管Jekyll Minima所呈现的网页内容是丰富而有层次的,但是设计师鼓励你编辑的页面主体部分以一种最简洁最开门见山的方式呈现在文件系统中。在/index.md,你不需要像在HTML文件中一样,绕开<head>,在不同的元素中间搜寻自己想要的部分。如果你是一个老玩家,当你尝试去/_includes/_layouts中寻求进阶的修改时,你会感叹Jekyll Minima的简洁高效——内容之间的等级和引用关系很鲜明,各个内容分门别类地存放在文件系统中,而不是堆积在一个文件里。这在体现文件系统简明的同时又使文件有着很高的重复利用率。Zolan在引入了许多实用元素和精美设计之余仍然尽力保全了Jekyll Minima所呈现的这种简洁美,太棒了。