1. 前言

在使用GitHub Pages的時候，瞭解到有 Jekyll 這個東西，是一個靜態站點生成器，用來做寫博客是很好的。

在學習jekyll 之前，需要了解 Ruby，Gems， Gem命令， Bundler。

Ruby

Ruby 是一種純粹的面向對象編程語言。它由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）創建於1993年。

Gems

Gems 可以理解爲Ruby的庫。

Gem命令

gem 命令是 Ruby語言中的包管理器。gem命令用於構建、上傳、下載以及安裝Gem包，，可以認爲類似於 Python 的 pip 。

# finding gems
gem search <gems>
# installing gems
gem install <gems>
# listing installed gems
gem list
# uninstalling gems
gem uninstall
# viewing documentation
gem server
# downloading gems without install
gem fetch <gems>
# unpacking installed gems
gem unpack

Bundler

使用 Bundler 來安裝 Gemfile 文件中的gems。
Gemfile 中列出了你的站點所需要的gems。格式如下:

source "https://rubygems.org"

gem "jekyll"

group :jekyll_plugins do
  gem "jekyll-feed"
  gem "jekyll-seo-tag"
end

首先，用gem命令安裝 Bundler。

gem install bundler

然後，用 Bundler 安裝 Gemfile 中的 gems 。

# 安裝gems
bundle install
# 使用Gemfile文件中的gems的版本來創建站點
bundle exec jekyll serve

修改gem鏡像源

原文請看 Ruby Gems 鏡像

# 查看現在的gem源
gem sources
# 移除gem源
gem sources --remove https://rubygems.org/
# 添加新的gem源
gem sources -a https://mirrors.aliyun.com/rubygems/

2. jekyll是啥？

Jekyll 是一個靜態站點生成器，內置 GitHub Pages 支持和簡化的構建過程。它是一個 Ruby 項目 Jekyll 使用 Markdown 和 HTML 文件，並根據您選擇的佈局創建完整靜態網站。 Jekyll 支持 Markdown 和 Lick，這是一種可在網站上加載動態內容的模板語言。

您可以通過編輯_config.yml文件來配置大多數 Jekyll 設置，例如網站的主題和插件。

Jekyll 的一大特點 是沒有用數據庫，所有的數據就是存放在對應的目錄中，所以也 不太適合用來做大型網站，但是用來做自己的博客網站就搓搓有餘了。

2.1 安裝 Jekyll

# 安裝 jekyll 和 bundler
gem install jekyll bundler
mkdir myblog && cd myblog
# 爲當前項目創建一個Gemfile文件
bundle init
# Gemfile 文件末尾加入一行
gem "jekyll"

Jekyll站點的基礎目錄結構如下：

.
.
├── _config.yml
├── _data
│   └── members.yml
├── _drafts
│   ├── begin-with-the-crazy-ideas.md
│   └── on-simplicity-in-technology.md
├── _includes
│   ├── footer.html
│   └── header.html
├── _layouts
│   ├── default.html
│   └── post.html
├── _posts
│   ├── 2007-10-29-why-every-programmer-should-play-nethack.md
│   └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
│   ├── _base.scss
│   └── _layout.scss
├── _site
├── .jekyll-metadata
└── index.html # can also be an 'index.md' with valid front matter

2.2 運行 Jkeyll

# 構建站點並將靜態站點輸出到名爲_site的目錄
jekyll build 
# 運行web服務器
jekyll serve

Jekyll 使用的模板語言是Liquid，下面是對liquid的一點介紹。

2.3 Liquid

Liquid 是一種模板語言，它具有三個主要部分：objects(對象)，tags(標籤)和filters(過濾器)。

objects告訴Liquid輸出什麼內容。用雙大括號表示。{{ xxx }}。如:{{ page.tile }}。

tags（標籤）實現了模板的邏輯和控制，用 {% xxx %}表示。

filter （過濾器）更改 Liquid 對象的輸出。用 | 分隔。例如：{{ "hi" | capitalize }}。

2.4 頭信息（front matter）

頭信息是YAML中位於文件頂部的兩個三點劃線之間的片段。頭信息用於設置頁面變量，例如：

---
my_number: 5
---

那麼如何使用這個變量呢？

{{ page.my_number }}

下面讓我們用 頭信息 來修改標題。

---
title: Home
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

請注意，爲了讓Jekyll處理您頁面上的所有 Liquid 標籤，您必須在開頭包含

在文件開頭加上頭信息（可以是空的）是告訴 Jekyll ，它需要處理這些文件。

---
---

2.5 佈局（Layouts）

佈局包裹xx的模板。 Layouts 在項目根目錄下的 _layouts 的目錄中。

項目根目錄/_layouts/default.html

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

可以看到在 項目根目錄/_layouts/default.html 中有兩個變量（用 {{ }} 表示），page.title 是從頭信息（front matter）中設置的，表示的是頁面的標題。content 是使用本 layout 的.md 或 .html 文件的內容（除掉頭信息）

2.6 index 頁面

項目根目錄/index.html

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

實際上是：

---
layout: default
title: Home
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

2.7 about 頁面

---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

http://localhost:4000/about.html 就可以看到 about頁面的內容了。

2.8 includes

按照上面操作頁面也都能顯示，但是有個問題是無法在頁面之間導航。所以需要用到 includes 。

導航（navigation）應該在每個頁面中都有，所以應該將加到 layout中。

通過 include 標籤，我們可以在當前文件中使用 _includes 目錄中的文件內容。

使用 include

添加了一個Home頁面和About頁面的導航。

<nav>
  <a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>
    Home
  </a>
  <a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>
    About
  </a>
</nav>

2.9 數據文件（Data files）

數據文件位於 _data 目錄。

將數據和邏輯分離。

_data/navigation.yml

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

其他文件可以使用 _data 目錄下的文件中的數據。使用方法如下：
在文件 _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>

2.10 Assets

CSS, JS, images 等文件都放在 assets 目錄中。
目錄結構如下：

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

2.11 Sass文件

是對CSS文件的擴展。具體請看 Jekyll 官方文檔吧。Jekyll—assets 文檔

2.12 博客文件

博客文章都在 _posts 目錄下。文章有特殊的格式要求：年-月-日-文章名.md 或者 年-月-日-文章名.html 。
只要在該目錄下按照規則創建 .md 或 .html 文件，就是寫出了一篇博客。

post.url 本篇博客文章的url
post.title 本篇博客文章的title
post.excerpt 本篇博客文章的一個片段，默認爲第一段落。

2.13 Collections

Collections與博客文章類似，不同之處在於 Collections 不用按日期分組。

在 _config.yml 文件中：

collections:
  authors:
    output: true

表示將 _authors 目錄看做一個集合（_config.yml配置文件中 collection 對應的目錄是 _collection_name）

2.14 Jekyll 主題

有基於Gem的主題，也有遠程主題。

基於Gem的主題

在使用基於Gem的主題時，站點的許多目錄（如：assets, _layouts, _includes 和 _sass ）是存儲在主題gem包內的，對外不可見。但，Jekyl 會自動使用。

當主題更新後，在項目根目錄中使用如下命令更新主題相關文件。

bundle update

定位主題的gem位置

bundle info --path 主題

3. 配置自己的 Jekyll 站點

我在配置自己的 Jekyll站點時出了一些問題。

我是用的是 minimal-mistakes-jekyll 這個主題，這個主題的功能有很多，按着自己需要的來配置就行。

最尷尬的是配置好了，push 到 GitHub 之後不能用，顯示一塊白板。同時我的郵箱提示新郵件，發現是這個主題 GitHub 並不能直接使用，後來就直接將這個主題 fork 了過來，直接在上面進行修改，累死我了。

參考文獻

[0] 阮一峯-搭建一個免費的，無限流量的Blog----github Pages和Jekyll入門
[1] minimal-mistakes-jekyll 主題文檔
[2] 使用 GitHub, Jekyll 打造自己的免費獨立博客
[3] Jekyll 官方文檔
[4] Ruby Gems 鏡像

對Jekyll的初步瞭解

文章目錄