🍹Jekyll

是一个静态站点生成框架, 具有如下特点:

  • 轻量, 不依赖db
  • 除了HTMl外, 还支持MardDown构建博文

Ruby相关基本概念

  • Gems: 在ruby项目中包含的代码模块. 类似python的软件包.
  • Gemfile: 用于管理站点项目关联的gem列表. 类似Python的requirementslist.
  • Bundle: 用于安装Gemfile文件中. 类似Python Pip.

Step by Step Tutorial

Setup

  • 安装
  gem install jekyll bundler
  bundle init
  gem "jekyll"
  • 创建站点
  mkdir docs
  touch index.html

index.html 内容.

  <!DOCTYPE html>
  <html>

  <head>
      <meta charset="utf-8">
      <title>Home</title>
  </head>

  <body>
      <h1>Hello World!</h1>
  </body>

  </html>

jekyll serve 编译并运行 http://localhost:4000 查看内容, 静态站点文件会在_site文件夹内自动生成.

Liquid

Liquid 是Jekyll下的一种模板语言, 主要由如下3部分构成.

  • objects: 输出预定义变量. 类似 宏定义
{{ vals }}
  • tags: 逻辑与流程控制. 类似 if条件语句
{% if boolval %}
  ...
{% endif %}
  • filters: 通过一些关键字改变objects的输出. 比如小写转大写、字符串攫取等等.
"{{ "hi" | capitalize }}"

FrontMatter(前言)

FrontMatter是文件最前面的一小段YAML格式的片段. 通常用于在页面(一般指Markdown或者Html文件)中定义变量

---
my_number: 5
---

为了Liquit Tags能正常运行, 即便前言内容为空也需要占位在页面前面.

---
---

Layouts

Layouts 存储非内容部分的通用模板, 存放在 _layouts 目录中, 模板页面一般看起来像这样:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">  
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

content 是一个特殊变量, 在渲染时会被替换为页面具体的内容.

一般结合FrontMatter使用layout, 修改index.html使用layout:

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

Includes

include 类似 layouts, layouts是外部替换为定义的模板内容, include是内部替换为定义的其他站点页面方便站点内页面跳转.

可跳转的页面定义在_includes目录中.

_includes/navigation.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

Data Files

Jekyll 通过加载_data目录下的YAML、JSON、CSV格式文件渲染页面内容. 简单理解就是解耦Model和View.

_data/navigation.yml

- name: Home
  link: /
- name: About
  link: /about.html

优化_includes/navigation.html文件内容. 通过遍历文件内容优化枚举访问

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

Assets

Jekyll 站点资源管理一般是下面的结构:

.
├── assets
│   ├── css
│   ├── images
│   └── js
...

通过导入_sass目录下内容生成css

_layouts/default.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

Blogging

Jekyll上发布推文很方便, 在_post目录下编写指定格式的文件即可.

格式: the publish date, then a title, followed by an extension

类似 _posts/2018-08-20-bananas.md

---
layout: post
author: jill
---

A banana is an edible fruit – botanically a berry – produced by several
kinds of large herbaceous flowering plants in the genus Musa.

In some countries, bananas used for cooking may be called "plantains",
distinguishing them from dessert bananas. The fruit is variable in size,
color, and firmness, but is usually elongated and curved, with soft
flesh rich in starch covered with a rind, which may be green, yellow,
red, purple, or brown when ripe.

Collections

Collections用于推文的分类编辑_yaml内文件内容即可, 参考 不同的theme有不同的用法.

Deployment

常见的部署方式参考不做赘述.最常见的是结合GithubPage使用.