对Jekyll的初步了解
文章目录
- 1. 前言
- Ruby
- Gems
- Gem命令
- Bundler
- 修改gem镜像源
- 2. jekyll是啥？
- 2.1 安装 Jekyll
- 2.2 运行 Jkeyll
- 2.3 Liquid
- 2.4 头信息（front matter）
- 2.5 布局（Layouts）
- 2.6 index 页面
- 2.7 about 页面
- 2.8 includes
- 2.9 数据文件（Data files）
- 2.10 Assets
- 2.11 Sass文件
- 2.12 博客文件
- 2.13 Collections
- 2.14 Jekyll 主题
- 基于Gem的主题
- 3. 配置自己的 Jekyll 站点
- 参考文献
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
<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
---
<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 %}
}" {% 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 镜像