对Jekyll的初步了解

Idea King

已于 2022-02-10 18:42:19 修改

阅读量1.7k

点赞数 6

分类专栏： # Git web 文章标签： ruby 开发语言后端

于 2020-06-19 18:49:20 首次发布

本文链接：https://blog.csdn.net/besmarterbestronger/article/details/106724724

版权

web 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

Git

2 篇文章 1 订阅

订阅专栏

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 镜像