Jekyll 静态站点完全教程 / 第1章：Jekyll 概述与生态

第1章：Jekyll 概述与生态

1.1 什么是 Jekyll

Jekyll 是一个静态站点生成器（Static Site Generator, SSG），由 Tom Preston-Werner 于 2008 年创建。它的核心理念是：

将纯文本内容通过模板渲染为可部署的静态网站，无需数据库、无需服务端运行时。

Jekyll 使用 Ruby 编写，内置 Liquid 模板引擎，原生支持 Markdown 写作，并深度集成 GitHub Pages。

核心特性

1.2 Jekyll 的历史

1.3 Jekyll 的工作原理

源文件 → 解析 → 渲染 → 输出静态文件

content/        →  Markdown 解析  →  Liquid 模板渲染  →  public/
layouts/        →     ↑                  ↑              ├── index.html
includes/       ─────┘                  │              ├── posts/
_config.yml     ────────────────────────┘              └── assets/

处理流程：

1. 读取 _config.yml 全局配置
2. 扫描所有源文件，解析 Front Matter
3. 按文件类型分类：文章（Posts）、页面（Pages）、集合（Collections）
4. 将 Markdown 转换为 HTML
5. 套用 Layout 模板，解析 Liquid 标签
6. 输出到 _site/ 目录

1.4 Ruby 生态简介

Jekyll 基于 Ruby 构建，理解 Ruby 生态有助于高效使用 Jekyll。

Ruby 核心概念

为什么选择 Ruby 生态

# Ruby 的优势在于文本处理和模板渲染
# Jekyll 的核心能力正是文本 → HTML 的转换

# Gemfile 示例
source "https://rubygems.org"

gem "jekyll", "~> 4.3"
gem "jekyll-paginate"
gem "jekyll-seo-tag"

注意事项：

• Ruby 版本需与 Jekyll 兼容，推荐使用 rbenv 管理版本
• Windows 用户需安装 Ruby+Devkit 版本
• 生产构建建议锁定 Gem 版本（使用 Gemfile.lock）

1.5 Jekyll 与 Hugo 深度对比

这是开发者最常问的问题：该选 Jekyll 还是 Hugo？

功能对比表

代码风格对比

Jekyll (Liquid)：

{% for post in site.posts %}
  <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
  <time>{{ post.date | date: "%Y-%m-%d" }}</time>
  {{ post.excerpt }}
{% endfor %}

Hugo (Go Template)：

{{ range .Pages }}
  <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
  <time>{{ .Date.Format "2006-01-02" }}</time>
  {{ .Summary }}
{{ end }}

选择建议

业务场景：如果你的团队已经在用 Ruby on Rails，选择 Jekyll 可以复用 Ruby 工具链；如果团队偏好 Go 或追求极致构建速度，Hugo 更合适。

1.6 GitHub Pages 集成

GitHub Pages 是 Jekyll 最大的杀手级应用场景。

工作原理

git push → GitHub 服务器 → 自动运行 jekyll build → 部署到 pages.github.com

支持的仓库类型

GitHub Pages 限制

# GitHub Pages 使用的安全模式白名单插件
# 不在白名单中的插件无法使用
plugins:
  - jekyll-paginate        # ✅ 允许
  - jekyll-sitemap         # ✅ 允许
  - jekyll-include-cache   # ✅ 允许
  - custom-plugin          # ❌ 需自建 CI

注意事项：

• GitHub Pages 锁定 Jekyll 版本（通常落后最新版 1-2 个版本）
• 自定义域名需配置 CNAME 文件
• 私有仓库的 GitHub Pages 需要 Pro 计划
• 如需使用非白名单插件，需使用 GitHub Actions 自行构建

1.7 适用场景分析

✅ 非常适合

⚠️ 不太适合

实际业务场景示例

场景 1：技术团队文档中心

需求：为 5 个微服务项目建立统一文档站
方案：一个 Jekyll 仓库，使用 Collections 分离各项目文档
优势：统一搜索、统一风格、Git 版本控制

场景 2：从 WordPress 迁移

需求：现有 WordPress 博客（500+ 篇文章）迁移到静态站
方案：使用 jekyll-export 导出 → Jekyll 导入 → GitHub Pages 部署
优势：零运维成本、HTTPS 免费、速度提升

1.8 Jekyll 版本选择

# 推荐 Gemfile 配置
gem "jekyll", "~> 4.3"

1.9 核心术语速查

1.10 扩展阅读

• Jekyll 官方文档
• Jekyll GitHub 仓库
• GitHub Pages 文档
• Liquid 模板语言文档
• Jekyll 主题列表
• Jamstack 架构
• 静态站点生成器对比

本章小结

下一章：安装与环境配置