文章目录
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 镜像