标签： jekyll

最好的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: ""

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

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