jekyll 教程入门

jekyll 教程入门

Posted by wenfengSAT on June 19, 2018

jekyll 教程入门

jekyll 是一款简单的博客系统,也可以说是一个静态网站生成器。她有一个模版目录,存放整个静态网站的模版文件,可以通过Liquid处理模版文件,把使用标记语言TextileMarkdown编写的内容文件,按照模版格式,转换成最终的静态网站页面。大名鼎鼎的GitHub Pages就是通过她实现的。

在这里,我们将告诉你如果使用jekyll搭建一个简单的博客网站。

一、安装jekyll


使用RubyGems安装jekyll。安装了Ruby之后,默认会自动安装RubyGems,也可以单独安装RubyGems.

使用RubyGems安装jekyll很简单,命令如下:

gem install jekyll 

如果使用的标记语言是Markdown,则需要另外安装

gem install rdiscount

如果使用的标记语言是Textile,则需要另外安装

gem install RedCloth

上面三个可以一次性安装,如下

gem install jekyll rdiscount RedCloth

另外,如需安装和github pages相同版本的jekyll,那么不需要安装上面这几个,直接用下面命令安装

gem install github-pages

如果是Mac环境下面,可能会出现版本问题,无法安装,可以参考我的另外一篇博文——MAC OS X 10.8 下安装jekyll 进行安装。

二、搭建博客网站框架

jekyll 的内核实际上就是一个格式文本转换引擎,她允许你使用标记语言Markdown或者Textile再或者原始的html语言,编写内容。她通过模版文件,将这些内容转换成最终的静态网页。

一个简单的jekyll网站结构如下:

.
|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|   `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html

在这基本结构中,有几个关键的文件或者目录,其作用如下:

  1. _config.yml

    这是jekyll的主要配置文件。这些配置选项,大部分都可以在启动jekyll时,作为命令行参数执行。只不过,把这些选项配置在文件中,就省去记住他们,且每次执行jekyll时命令也简单一点。

    关于jekyll的参数,其实系统已经设置了默认值,如无特殊需要,空文件也可以。

    个人推荐,可以添加两个参数:

     markdown: rdiscount
     pygments: true
    

    rdiscount是markdown标记语言的一个转换引擎,比默认的maruku性能要好一些。

    pygments是支持语法高亮显示的工具。设置开通后,可以通过 {\% highlight \%} 标签在博文中嵌入语法高亮的代码。

  2. _includes

    这个目录的存在是区分高手和普通用户的,嘿嘿。在网站设计中,页面的共有部分,可以存储成一个单独的文件。这样设计可以方便以后的维护。而这个单独的公用文件就存放在这个目录里面。这里面的公用文件,可以被_layouts_post目录下面的文件嵌入。其嵌入方法,采用的是Liquid标签实现。比如:{\% include file.ext \%},就指在文件中嵌入公用文件_includes/file.ext中的内容。

    是不是很方便!?哈哈!

  3. _layouts

    这个目录下存放的是整个网站的模版文件,可以是一个文件,也可以是一套文件。这个要看整个网站是怎么规划了。

  4. _posts

    这个目录是存放你的博文的,整个网站搭建完成后,以后每次添加博文,只需要提交到这个目录下就可以了。

    不过,编写的博文,必须符合一定的规则。见下面编写博文小节内容。

  5. _site

    这个目录,是jekyll运行之后生成的。存放着整个网站的最终静态页面。其中的内容,不用去关心。

  6. index.html和其他的 HTML/Markdown/Textile文件

    这些文件如果包含YAML信息块,那么jekyll运行时就会自动对他进行转换。你网站根目录,以及任何不在上述目录下的文件(包括.html/.markdown/.md/texitle文件,但不仅这些文件)。

  7. 其他文件和目录

    除了上述文件和目录,你还可以添加一些其他的文件或者目录。比如,添加css目录,存放网站的css文件;添加images目录,存放网站涉及到的图片资源。噢,对了,你还可以在网站的根目录下一个网站图标文件favicon.ico,这样别人访问你的网站时,体验会更好一点。设计优秀的网站图标,能帮助访问者,更容易记住你的网站哦!

三、编写博文

从上一小节的内容,我们知道_posts目录下面存放的是我们的博文,这些博文必须满足一定的规则。这里,我将告诉大家相关的规则。

  1. 博文的命名是有讲究的,必须符合YEAR-MONTH-DAY-title.MARKUP这个格式。
  2. 博文的永久链接(PermaLink)生成规则很灵活,可以配置(在_config.yml中)。系统内置三种格式:

    模版名 模版内容
    date /:categories/:year/:month/:day/:title/
    pretty /:categories/:year/:month/:day/:title/
    none /:categories/:title.html

    目前系统默认格式是date。你也可以修改,比如,在_config.yml中配置permalink: pretty。这样就会生成类似/2009/04/29/slap-chop/index.html这样的文件url.除了内置的格式,也可以自定义格式,比如permalink: /blog/:month-:day-:year/:title.html。是不是很酷?哈哈!

  3. 博文可以是用标记语言Markdown或者Textile再或者原始的html语言编写的文本。但是,博文的开头必须包含一个YAML信息块。在这个YAML信息块,包含一些信息。比如使用的模版,博文的标题等等。给个简单的例子吧,如下:

     ---
     layout: post
     title: jekyll 教程入门
     ---
    
  4. 到此,基本内容已经讲完了。

四、运行jekyll生成网站

在网站根目录下,运行jekyll命令,就可以生成最终的静态网站内容目录_site。如果,你还想通过浏览器访问,可以运行下面命令。

jekyll --server

这样,通过http://localhost:4000就可以访问你做出来的网站了。

如果你的博客网站是类似http://localhost:4000/blog/index.html这样的路径。那么,在运行时,需要添加参数base-url来实现,比如:

jekyll --base-url '/blog' --server

五、一些Jekyll网站例子及源码

下面给一些建在GitHub上面的jekyll博客,及其源码。

  1. tom.preston-werner.com——源码
  2. gitready.com——源码
  3. zen.id.au——源码