强曰为道

与天地相似,故不违。知周乎万物,而道济天下,故不过。旁行而不流,乐天知命,故不忧.
文档目录

第1章:Jekyll 概述与生态

第1章:Jekyll 概述与生态

1.1 什么是 Jekyll

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

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

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

核心特性

特性说明
静态输出生成纯 HTML/CSS/JS,无服务端依赖
Markdown 支持原生支持 Markdown、Textile
Liquid 模板Shopify 开发的模板语言
博客感知原生支持文章(Posts)、分类(Categories)、标签(Tags)
GitHub Pages 零配置推送到 GitHub 即可自动构建部署
插件生态通过 Ruby Gems 扩展功能
数据文件支持 YAML/JSON/CSV 数据源

1.2 Jekyll 的历史

年份里程碑
2008Tom Preston-Werner 发布 Jekyll 0.1
2013GitHub Pages 开始原生支持 Jekyll
2014Jekyll 2.0 发布,引入 Collections
2016Jekyll 3.0,性能大幅提升
2019Jekyll 4.0,增量构建、新默认主题
2023Jekyll 4.3,持续维护更新

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编程语言Python、Node.js
RubyGems包管理器npm、pip
Bundler依赖管理工具package.json + lock
Gemfile依赖声明文件requirements.txt
GemRuby 包/库npm package

为什么选择 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?

功能对比表

维度JekyllHugo
语言RubyGo
安装需要 Ruby 环境单二进制文件
构建速度中等(秒级)极快(毫秒级)
模板语言LiquidGo Template
内置功能博客原生支持需手动配置
插件Ruby Gems 生态丰富内置为主
GitHub Pages原生支持需自建 CI
学习曲线中等较陡
主题生态丰富非常丰富
多语言需插件原生支持

代码风格对比

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 }}

选择建议

场景推荐理由
GitHub Pages 博客Jekyll零配置部署
大型文档站(1000+ 页)Hugo构建速度
需要丰富插件JekyllGem 生态
不想装 RubyHugo单文件安装
从 WordPress 迁移Jekyll迁移工具更成熟
团队协作两者皆可Git 工作流相同

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


1.6 GitHub Pages 集成

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

工作原理

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

支持的仓库类型

类型URL 格式说明
用户/组织站点username.github.io仓库名即域名
项目站点username.github.io/repo项目子路径

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 适用场景分析

✅ 非常适合

场景原因
个人技术博客原生博客支持、Markdown 写作
项目文档站GitHub Pages 零成本部署
公司官网静态安全、易于维护
API 文档结合 jekyll-swagger 插件
作品集/Portfolio模板灵活、免费托管

⚠️ 不太适合

场景原因替代方案
电商网站需要动态功能Next.js + Headless CMS
高频更新站(新闻)每次需重新构建Gatsby + SSG
大型知识库(万级页面)构建速度瓶颈Hugo / Docusaurus
需要用户系统静态站点限制全栈框架

实际业务场景示例

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

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

场景 2:从 WordPress 迁移

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

1.8 Jekyll 版本选择

版本状态说明
3.x维护模式GitHub Pages 仍在使用
4.0稳定引入增量构建
4.2稳定性能优化
4.3推荐当前最新稳定版
# 推荐 Gemfile 配置
gem "jekyll", "~> 4.3"

1.9 核心术语速查

术语英文说明
静态站点生成器Static Site Generator将文本转为 HTML 的工具
前置数据Front Matter文件头部的 YAML 配置
布局Layout页面的外层模板
包含Include可复用的模板片段
集合Collections自定义内容类型
数据文件Data Files_data/ 下的结构化数据
永久链接Permalink文章/页面的 URL 结构
主题Theme站点的视觉模板包

1.10 扩展阅读


本章小结

要点说明
Jekyll 是什么Ruby 编写的静态站点生成器
核心优势GitHub Pages 集成、博客原生支持、插件生态
与 Hugo 对比易用性优先 vs 速度优先
适用场景博客、文档站、项目主页
生态依赖Ruby + Bundler + Liquid

下一章:安装与环境配置