最好的Jekyll

又回到Jekyll了,这是我第一个使用的博客系统,也是我用过的最简单(划掉)的博客软件了

为什么说他简单呢,两个原因

  • 一是我使用了非常长的时候,非常的熟悉,我也不愿意再去接触其它的程序了

  • 第二是它真的很简单,配置简单、主题简单、安装简单(划掉)

不知道是不是版本更新加入了其它依赖还是怎么样,我以前(3.6版本)在win10上安装是非常简单了,仅仅只需要下载好 ruby installer 然后安装好执行 gem install bundler jakyll 就行了,但是在现在(3.8版本)安装的时候就必须要安装好 MSYS2 以及一些附带工具(我是全部安装了)

安装过程中,因为速度实在太慢,我又去找源换源,看着 pacman 装了一个又一个包居然只是为了给 Jekyll 提供依赖,我的心也是蛮痛的

jekyll 也有一些我很难接受的缺点,最大一个便是 jekyll 要求 post 的命名方式要以年与日开头,但事实上在调用文章日期时却是使用的文章里面的日期,所以我不知道要求文件名带日期的意义何在,我最后还是用脚本给每个文件都加了日期以及里面的 layout:post 头信息

其实,仔细想来,Jekyll与Hugo、Hexo、Pelican等其它静态博客生成器相比,唯一值得称赞的优点恐怕就是自由度高了,而我就是想要这一好处罢了,至于什么能与github配合,利用 travis ci 或者 Netlify 任何程序其实都能部署

还有最后两个让我这次折腾完难受的地方

  • 日期后面要加上时区了,不然默认刚写的文章无法浏览

  • exclude 不起作用,node_modules 目录被监听

最后,Jekyll 希望你能变得更好!

Jekyll生成单个分类页面

Jekyll有提供生成分类或者标签页面的插件——jekyll-archives,只需简单配置即可使用,但是在Github Pages中不允许使用,所以我只能手动生成分类页了。

具体方法如下:

输出单个分类文章

输出分类CATEGORY下的所有文章:

{% for post in site.categories.CATEGORY %}
  {{ post.title }}
{% endfor %}

但是这里的分类只能为英文,中文会报错,但是我又想显示为中文,怎么办呢?

使用YAML储存分类信息

我想到的解决办法就是使用YAML(或者任何一种数据储存格式,如JSON)把英文分类对应的中文储存起来,然后再需要显示的地方循环出对应的中文分类

储存的文件需要放在_data文件夹下,我新建了一个category.yml文件如下

- value: "learn"
  title: "学习笔记"
- value: "linux"
  title: "Unix/Linux"
- value: "js"
  title: "JavaScript"
  link: "javascript"
- value: "history"
  title: "历史爱好者"
- value: "use"
  title: "使用笔记"
- value: "network"
  title: "网络技术与安全"

然后循环英文分类,输出对应的中文名

{% for category in post.categories %}
  {% for c in site.data.category %}
    {% if category == c.value %}
      {{ c.title }}
    {% endif %}
  {% endfor %}
{% endfor %}

所以事实上在站点的分类变量中,都是英文名,我只是将他输出为中文,如果对此不在意的人可以跳过。

生成分类页

这里的分类页必须自己手动新建好,这个是没办法的,除了使用Ruby插件,但是我将其简化到容易维护的办法就是,将HTML全部放到一个layout文件里,我在_layouts文件夹下新建了一个category.html文件:

<h2 class="category-title">分类:{{ page.title }}</h2>
<!-- 将分类页的分类赋给变量page_category -->
{% assign page_category = page.category %}
<ul>
  <!-- 因为无法直接在categories后面跟新建的变量,所以只能通过循环判断的方式来确定当前分类 -->
  <!-- 循环所有分类 -->
  {% for category in site.categories %}
  <!-- 如果分类页面的分类与变量中的分类相同 -->
  {% if page_category == category[0] %}
  <!-- 循环此分类中所有文章 -->
  {% for post in category[1] %}
  <li>
    <small class="post-date">{{ post.date | date:"%Y-%m-%d" }}</small>
    <a class="category-post-title" href="{{ post.url }}">
      {{ post.title }}
    </a>
  </li>
  {% endfor %}
  {% endif %}
  {% endfor %}
</ul>

然后新建一个category文件夹,在里面分别创建好每个分类文件,这些文件只需要定义一些头信息即可

---
layout: category
title: 学习笔记
category: 学习笔记
---

这样就会生成/category/learn/页面了。

总结

总的来说还是不太复杂的,因为我的分类比较少而且很少会创建新的分类,所以这样可以一直用下去,如果你的分类很多而且经常创建新建新分类就很麻烦了。

对于我来说这个方法比使用插件更好,因为插件生成的页面如果使用中文名的话它生成的路径也是中文的。

浅谈Jekyll代码高亮

要想实现对代码的高亮,首先要搞清楚Jekyll把你在文章(md文件)中的代码块都解析成什么样了。

Jekyll默认使用kramdown解析器,其它解析器不作讨论,然后这里需要注意一下,在Jekyll中你可以使用两种方法来表明代码块:{% highlight ruby %}或者用三个反单引号来包括代码块。

但是它们解析出来的HTML结构却不同:

如果你是使用这种方法标注代码块(Jekyll增强功能,Liquid标签)

{% highlight ruby %}
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
{% endhighlight %}

那么它解析出来的HTML是这样的:

figure.highlight > pre > code.language-ruby > 一大堆span

如果你是这样标注代码的:(这是markdown语法)

(因为我在markdown文件中打出这样很麻烦,所以截图了)

那么它解析出来的HTML是这样的:

即:

div.highlighter-rouge > div.highlight > pre.highlight > code > 一大堆span

当你没有标注是什么语言的时候,它将会直接解析出一个code标签而不会再解析出关键字

虽然这两者解析出的HTML结构不同,但他们最后解析出的关键字样式是相同的,这就是因为它们使用的高亮器都是Rouge,所以你可以直接使用rouge生成高亮样式文件引用即可。

rougify style monokai.sublime > rouge.css

monokai.sublime是高亮样式,但是我一直没找到在哪里可以查看到具体有哪些样式和预览。

还有一种高亮生成方案是Pygments,这里不作讨论,但是它俩解析出来的小标签是一样的,所以你完全也可以用Pygments生成样式给rouge用。

pygmentize -S default -f html -a .highlight > default.css

这里default也是代码样式,您可以换成其它样式,具体可以到Pygments — Pygments查看到一些样式预览,我现在是使用的Pygments生成的tango主题。

还有其它的方法就是使用highlightjs,利用js自动解析出pre code中的代码给他们加上span标签,可以在Getting highlight.js进行下载,解压下载的压缩包里面有个style文件夹里面是样式文件,只要在页面中引入highlight.js文件和样式文件就就可以了,具体样式的预览可以在highlight.js demo看到。

Jekyll和Hexo详细对比

我一直是使用的Jekyll,这个博客就是使用Jekyll搭建的,使用Github Pages自动部署,所以你可以在我的博客找到很多关于Jekyll的内容,我之前曾经尝试过使用Hexo,但最后也是不了了之,现在来详细的对比一下这两者的优劣。

首先,Jekyll和Hexo可以说是最受欢迎、用户都非常多的两个静态博客生成系统。Jekyll使用Ruby语言编写,使用gem安装,而Hexo使用js编写,使用npm安装,类似的还有很多其它的静态博客生成器(如使用Golang编写的Hugo)可以在Top Open-Source Static Site Generators – StaticGen找到。

我从以下几个方面展开对比:

安装难度

首先肯定是安装方面,我在网上经常看到很多人安装Jekyll有一大堆毛病,造成一种Jekyll安装很麻烦的假象,我在Windows(10)平台和Linux(主流发行版)平台都有使用Jekyll的经历,从来没有遇到过任何问题,我现在的系统是Win10,当初装好系统直接下载一个RubyInstaller包安装好然后gem install jekyll bundle就好了,而Hexo基于NodeJS平台,所有的平台都应该会没问题才对。所以我认为在这一点上,两者都很简单。

易用性

因为这两者都是静态博客系统,所以他们的功能是相同的——将文章转换为静态文件。所以在很多操作上(增删博文、分类管理等)是比不上WordPress等功能非常完善强大的CMS系统的。例如Jekyll并不自带分类标签页生成的功能,需要自己添加插件,而Hexo则自带这项功能,在撰写文章上,两者都使用Markdown语法并添加yaml头信息,把md文件放在指定文件夹下就可以了。

速度

因为Jekyll是Ruby编写的,在性能和速度上面肯定比不上Hexo(当然我不是黑Ruby…),这点是毋庸置疑的,我在写这个文章的时候就测试过,120篇文章,使用Jekyll生成一次花了3秒多,而Hexo并没有输出时间,但我觉得明显比Jekyll快不少,应该在1秒左右。在本地预览上,Jekyll是生成了页面然后进行预览,而Hexo是没有在根目录生成文件的,速度也快不少。

部署

Jekyll最开始的开发者是Tom Preston-Werner(Github创始人),现在很多开发者也都是Github员工,我不知道是不是这个原因,Github Pages是建议使用Jekyll的,并且支持自动生成页面,也就是你可以把整个源码推送上去让Github来生成,我觉得这一点很方便,这也是我一直用Jekyll的原因之一,而像Hexo,则可以使用hexo d命令将整个生成好的网站推送上去,Commit信息则是生成的日期,这个我觉得不是很好。至于在虚拟空间和服务器等我觉着并不好,因为非常不方便,所以你无论你使用Jekyll或者Hexo,我都建议你部署在Github,或者国内的Coding Pages也是个不错的选择。

拓展性

这点上Hexo要比Jekyll强,毕竟现在Nodejs的火爆程度,你可以根据官方API轻松的编写一个组件,而像Ruby(⊙o⊙)…,说实话我第一次听说这个语言就是因为Jekyll,所以如果像我一样想自己写个拓展恐怕得从头学习这个语言,当然你要是想找一些日常使用的插件还是找得到的

迁移

两者都可以很好的从Wordpress等知名Blog、cms系统迁移过来,而Jekyll是完全兼容Hexo的,两者的头信息非常相似,你可以直接把Jekyll文章放到Hexo文件夹下用,而Hexo文章的头信息没有layout一项。

主题开发

这点也是我一直用Jekyll的原因之一,Jekyll使用Liquid模板语言——Liquid 模板语言中文文档,而Hexo则是使用EJS,相对来说可实现的功能更加的多,但是也更加的复杂许多,所以我曾经几度琢磨EJS,但最后还是感觉这玩意不适合我,Liquid的双大括号语法非常简洁和一目了然啊。

总结

我并不觉得网上说的使用Jekyll有多么得“黑客范”,我认为使用Jekyll或者Hexo的人都是追求简约的,所以如果你只想简单的写写文章或者想像我一样使用Github Pages托管,体验原生的Github Pages我建议你使用Jekyll。但是Hexo在总体上来说比Jekyll要优秀很多。

本站搭建笔记(二)修改默认主题

自定义默认minima主题

jekyll是一个非常受欢迎的静态博客生成程序,它的主题也是非常的多,有兴趣的同学可以到jekylltheme上查看。

使用jekyll自动生成的站点默认使用minima主题,相关内容我们可以在文件夹下的Gemfile.lock文件中查看的到

DEPENDENCIES<br/>
jekyll (= 3.4.3)<br/>
jekyll-feed (~> 0.6)<br/>
minima (~> 2.0)<br/>
tzinfo-data<br/>

关于如何修改默认主题,在jekyll.com中有说明

这里补充一下

  • 在本地查找主题文件

Run bundle show followed by the name of the theme’s gem, e.g., bundle show minima for default Jekyll’s theme.

This returns the location of the gem-based theme files. For example, Minima theme’s files are located in /usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0 on macOS.

这里的bundle show minima需要在当前的jekyll站点文件夹下执行才可以得到返回信息

本站搭建笔记(一)安装本地环境

按照jekyll官网的方法在本地安装jekyll环境

此方法windows,linux,macos通用,前提是安装了Ruby。

一. 安装jekyll bundler

 $ gem install jekyll bundler

安装完成可以查看一下版本号

二. 新建一个jekyll文件夹

$ jekyll new githubpages

三. 进入该文件夹运行本地服务

 $ cd githubpages
 $ bundle install
 $ bundle exec jekyll serve

完成! 是不是很简单

Jekyll error:tag was never closed

解决办法是不要在文章开头添加raw标签!

之前没有碰到过这个问题,如果你在文章的开头是{% raw %}或者是{% highlight %},那么运行Jekyll时将会提示如下错误:

Liquid Exception: Liquid syntax error (line 1): 'raw' tag was never closed in /home/zrdn_link migration/Desktop/blog/_posts/2017/09/2017-09-12-jekyll.md/#excerpt
  Liquid Exception: Liquid syntax error (line 1): 'raw' tag was never closed in /_layouts/default.html

原因

这是因为Jekyll会使用文章的第一行来做默认描述或者摘录。

通过在_config.yml中添加

excerpt_separator: ""

但是这样会完全关闭摘录。

如果你使用默认页面描述的,这样会导致你没有描述,同时会加速你的生成速度。