jekyll 编程博客

编程

发布日期: 2025-06-26

更新日期: 2025-06-26

文章字数: 1.9k

阅读时长: 8 分

阅读次数:

初识Jekyll

一. 前言

在使用GitHub Pages的时候，了解到有 Jekyll 这个东西，是一个静态站点生成器，用来做写博客是很好的。

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

1. Ruby

Ruby 是一种纯粹的面向对象编程语言。它由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）创建于1993年。

2. Gems

Gems 可以理解为Ruby的库。

3. 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

4.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

5.修改gem镜像源

原文请看 Ruby Gems 镜像

# 查看现在的gem源
gem sources

# 移除gem源
gem sources --remove https://rubygems.org/

# 添加新的gem源
gem sources -a https://mirrors.aliyun.com/rubygems/

二. jekyll是啥？

Jekyll 是一个静态站点生成器，内置 GitHub Pages 支持和简化的构建过程。它是一个 Ruby 项目 Jekyll 使用 Markdown 和 HTML 文件，并根据您选择的布局创建完整静态网站。 Jekyll 支持 Markdown 和 Lick，这是一种可在网站上加载动态内容的模板语言。

您可以通过编辑_config.yml文件来配置大多数 Jekyll 设置，例如网站的主题和插件。

Jekyll 的一大特点是没有用数据库，所有的数据就是存放在对应的目录中，所以也不太适合用来做大型网站，但是用来做自己的博客网站就搓搓有余了。

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. 运行 Jkeyll

# 构建站点并将静态站点输出到名为_site的目录
jekyll build 

# 运行web服务器
jekyll serve

Jekyll 使用的模板语言是Liquid，下面是对liquid的一点介绍。

3. Liquid

Liquid 是一种模板语言，它具有三个主要部分：objects(对象)，tags(标签)和filters(过滤器)。

objects 告诉Liquid输出什么内容。用双大括号表示。{{ }}。如:{{ page.tile }}。

tags（标签）实现了模板的逻辑和控制，用 {% if condition %}{% endif %}表示（例如条件判断标签）。

filter （过滤器）更改 Liquid 对象的输出。用 | 分隔。例如：{{ "hi" | capitalize }}。

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 ，它需要处理这些文件。

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 文件的内容（除掉头信息）

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>

7. about 页面

---
layout: default
title: About
---

# About page
This page tells you a little bit about me.

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

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>

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>

10. Assets

CSS, JS, images 等文件都放在 assets 目录中。目录结构如下：

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

11. Sass文件

是对CSS文件的扩展。具体请看 Jekyll 官方文档吧。Jekyll—assets 文档

12. 博客文件

博客文章都在 _posts 目录下。文章有特殊的格式要求：年-月-日-文章名.md 或者年-月-日-文章名.html 。只要在该目录下按照规则创建 .md 或 .html 文件，就是写出了一篇博客。

post.url 本篇博客文章的url
post.title 本篇博客文章的title
post.excerpt 本篇博客文章的一个片段，默认为第一段落。

13. Collections

Collections与博客文章类似，不同之处在于 Collections 不用按日期分组。

在 _config.yml 文件中：

collections:
  authors:
    output: true

表示将 _authors 目录看做一个集合（_config.yml配置文件中 collection 对应的目录是 _collection_name）

14. Jekyll 主题

有基于Gem的主题，也有远程主题。

基于Gem的主题在使用基于Gem的主题时，站点的许多目录（如：assets, _layouts, _includes 和 _sass ）是存储在主题gem包内的，对外不可见。但，Jekyl 会自动使用。

当主题更新后，在项目根目录中使用如下命令更新主题相关文件。

bundle update

定位主题的gem位置

bundle info --path 主题

三. 配置自己的 Jekyll 站点- GitHub Pages

我在配置自己的 Jekyll站点时.不会调整页面布局，故此了解一下。

我是用的是 jekyll-rtd-theme这个主题，这个主题的页面非常适合做笔记，fork过来就会把代码拉到自己的github账号下仓库了。

1. 配置仓库名称

注意，此处仓库名称格式必须为： username.github.io， username就是当前账户的github名称

设置仓库名

2. 配置自定义域名

自定义域名

3. 配置域名解析

域名解析

天际星空

https://blog.hzhero.cn/article/jekyll.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源天际星空 !

jekyll 编程博客

leetCode简单

leetCode简单难度题型

2025-06-26 编程

编程 leetCode

软考-系统架构设计师-第四章

软考-系统架构设计师教程第二版-第四章思维导图

2025-06-26 架构设计

软考架构设计

jekyll安装配置笔记

初识Jekyll

一. 前言

1. Ruby

2. Gems

3. Gem命令

4.Bundler

5.修改gem镜像源

二. jekyll是啥？

1. 安装 Jekyll

2. 运行 Jkeyll

3. Liquid

4. 头信息（front matter）

5. 布局（Layouts）

6. index 页面

7. about 页面

8. includes

9. 数据文件（Data files）

10. Assets

11. Sass文件

12. 博客文件

13. Collections

14. Jekyll 主题

三. 配置自己的 Jekyll 站点- GitHub Pages

1. 配置仓库名称

2. 配置自定义域名

3. 配置域名解析

你的赏识是我前进的动力