Jekyll 静态网站生成器入门教程：简单却强大的网站构建工具

前言

嘿，各位对网站开发感兴趣的朋友们！今天我要和大家分享一个我个人非常喜欢的工具 - Jekyll。这个静态网站生成器真的太棒了！为什么这么说？因为它让我这样一个并不精通前端的开发者也能轻松创建专业级别的网站。

Jekyll 是什么？简单来说，它是一个将纯文本转换成静态网站的工具。不需要数据库，不需要复杂的后端逻辑，只需要一些简单的文本文件，Jekyll 就能帮你生成一个完整的网站。而且它还是 GitHub Pages 的默认引擎，这意味着你可以免费托管你的网站！（这点真的超级赞！）

好了，废话不多说，让我们一起来探索 Jekyll 的神奇世界吧！

Jekyll 的优势

在深入了解 Jekyll 之前，我们先来看看它的主要优势：

速度快 - 静态网站加载迅速，用户体验极佳
安全性高 - 没有数据库意味着更少的安全漏洞
部署简单 - 可以轻松部署到 GitHub Pages、Netlify 等平台
版本控制 - 完美配合 Git 工作流
成本低 - 静态网站托管通常免费或非常便宜

这些优势使得 Jekyll 成为博客、文档网站、个人网站或项目展示页的理想选择。

环境准备

在开始使用 Jekyll 之前，我们需要准备好环境。Jekyll 是基于 Ruby 语言开发的，所以我们首先需要安装 Ruby 和 RubyGems。

Windows 安装步骤

下载 RubyInstaller
运行安装程序，确保勾选"Add Ruby executables to your PATH"
安装完成后，打开命令提示符，输入：

gem install jekyll bundler

macOS 安装步骤

macOS 自带 Ruby，但版本可能较旧。建议使用 Homebrew 安装：

brew install ruby
echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
gem install jekyll bundler

Linux 安装步骤

sudo apt-get install ruby-full build-essential
gem install jekyll bundler

安装完成后，验证一下是否安装成功：

jekyll -v

如果显示版本号，那就说明安装成功了！恭喜你完成了第一步！

创建第一个 Jekyll 网站

好了，环境准备完毕，现在让我们创建第一个 Jekyll 网站。这个过程超级简单！

打开终端，运行以下命令创建一个新的 Jekyll 站点：

jekyll new my-awesome-site

cd my-awesome-site

构建网站并启动本地服务器：

bundle exec jekyll serve

打开浏览器，访问 http://localhost:4000

哇！你已经成功创建了你的第一个 Jekyll 网站，并且正在本地预览它。是不是感觉很简单？

Jekyll 目录结构

现在让我们看看 Jekyll 创建的目录结构：

my-awesome-site/
├── _config.yml         # 网站配置文件
├── _posts/             # 博客文章目录
├── _site/              # 生成的静态网站
├── .jekyll-cache/      # Jekyll 缓存
├── 404.html            # 404错误页面
├── about.markdown      # "关于"页面
├── Gemfile             # Ruby依赖配置
├── Gemfile.lock        # Ruby依赖版本锁定
└── index.markdown      # 首页

这些文件各自有不同的作用。让我们逐一了解它们：

_config.yml

这是 Jekyll 的配置文件，你可以在这里设置网站标题、描述、URL 等全局变量。这个文件使用 YAML 格式（超级直观的一种格式）。

以下是一些常见的配置选项：

title: My Awesome Website
email: your-email@example.com
description: >-
  这是我的个人网站，分享技术和生活。
baseurl: ""
url: "https://example.com"
twitter_username: jekyllrb
github_username:  jekyll
theme: minima

_posts 目录

这是存放博客文章的地方。Jekyll 使用特定的命名约定：YYYY-MM-DD-title.md。例如：2023-08-18-welcome-to-jekyll.md。

每篇文章都以 YAML 前置数据（Front Matter）开始，然后是 Markdown 格式的内容：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2023-08-18 12:00:00 +0800
categories: jekyll update
---

这里是文章内容，使用 Markdown 格式编写。

_site 目录

这是 Jekyll 生成的静态网站，包含所有的 HTML、CSS 和 JavaScript 文件。通常不需要直接修改这个目录中的文件，因为它们是自动生成的。

创建新的博客文章

创建新文章超级简单！只需在 _posts 目录下创建一个新的 Markdown 文件，遵循命名约定即可。

例如，创建一个名为 2023-08-19-my-first-post.md 的文件，内容如下：

---
layout: post
title: "我的第一篇博客"
date: 2023-08-19 10:00:00 +0800
categories: blog
---

# 欢迎来到我的博客

这是我使用 Jekyll 创建的第一篇博客文章！

## 为什么我喜欢 Jekyll

1. 简单易用
2. 无需数据库
3. Markdown 支持

保存文件后，Jekyll 会自动将其转换为 HTML 页面。刷新你的浏览器，你应该能看到新文章了！

使用主题

Jekyll 默认使用 minima 主题，但你可以轻松切换到其他主题。有两种方式可以使用主题：

使用 Gem 主题

在 Gemfile 中修改主题：

gem "jekyll-theme-minimal"

在 _config.yml 中更新主题设置：

theme: jekyll-theme-minimal

安装新主题：

bundle install

重新启动服务器：

bundle exec jekyll serve

直接下载主题

你也可以从 Jekyll Themes 等网站下载主题，然后将文件复制到你的项目中。

定制你的网站

Jekyll 提供了很多方式来定制你的网站：

修改布局

布局文件存放在 _layouts 目录中（如果没有，你可以创建）。例如，创建一个名为 _layouts/custom.html 的文件：

<!DOCTYPE html>
<html>
  <head>
    <title>{% raw %}{{ page.title }}{% endraw %}</title>
    <link rel="stylesheet" href="/assets/css/style.css">
  </head>
  <body>
    <header>
      <h1>{% raw %}{{ site.title }}{% endraw %}</h1>
    </header>
    <main>
      {% raw %}{{ content }}{% endraw %}
    </main>
    <footer>
      <p>&copy; {% raw %}{{ site.time | date: '%Y' }}{% endraw %} {% raw %}{{ site.title }}{% endraw %}</p>
    </footer>
  </body>
</html>

然后，在你的博客文章中使用这个布局：

---
layout: custom
title: "使用自定义布局"
---

这篇文章使用了自定义布局。

添加静态页面

除了博客文章，你还可以添加静态页面。只需在根目录下创建一个 Markdown 或 HTML 文件：

---
layout: page
title: "项目展示"
permalink: /projects/
---

# 我的项目

这里是我的项目列表...

使用插件

Jekyll 有丰富的插件生态系统。例如，添加 SEO 优化：

在 Gemfile 中添加：

gem 'jekyll-seo-tag'

在 _config.yml 中添加：

plugins:
  - jekyll-seo-tag

在布局文件中添加：

{% raw %}{% seo %}{% endraw %}

安装插件并重启服务器：

bundle install
bundle exec jekyll serve

部署你的网站

Jekyll 网站可以部署到多个平台。最流行的选择是 GitHub Pages，它原生支持 Jekyll！

部署到 GitHub Pages

创建一个名为 username.github.io 的 GitHub 仓库（替换 username 为你的 GitHub 用户名）
将你的 Jekyll 网站推送到这个仓库：

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

几分钟后，你的网站就可以通过 https://username.github.io 访问了！

使用自定义域名

想使用自己的域名？没问题！

在你的域名注册商处，创建一个 CNAME 记录，指向 username.github.io
在你的 Jekyll 项目根目录下创建一个名为 CNAME 的文件，内容为你的域名：

example.com

推送更改到 GitHub

git add CNAME
git commit -m "Add custom domain"
git push

进阶技巧

当你掌握了基础知识后，可以尝试一些进阶技巧：

使用集合

集合是一种组织相关内容的方式，比博客文章更灵活。

在 _config.yml 中定义集合：

collections:
  projects:
    output: true
    permalink: /projects/:path/

创建 _projects 目录，并添加文件：

---
title: "项目 A"
---

这是项目 A 的详细描述。

使用数据文件

数据文件允许你在 _data 目录下存储结构化数据，然后在网站中使用。

例如，创建 _data/team.yml：

- name: 张三
  role: 开发者
  bio: 热爱编程的全栈开发者

- name: 李四
  role: 设计师
  bio: 专注于用户体验设计

然后在页面中使用：

<h2>团队成员</h2>
<ul>
{% raw %}{% for member in site.data.team %}
  <li>
    <strong>{{ member.name }}</strong> - {{ member.role }}
    <p>{{ member.bio }}</p>
  </li>
{% endfor %}{% endraw %}
</ul>

常见问题解决

在使用 Jekyll 过程中，你可能会遇到一些问题。这里列出了一些常见问题及解决方法：

本地预览和 GitHub Pages 不一致

确保你的 Gemfile 包含以下内容：

source "https://rubygems.org"
gem "github-pages", group: :jekyll_plugins

然后运行 bundle update 和 bundle exec jekyll serve。

中文文件名导致的问题

使用英文文件名，或者在 _config.yml 中添加：

encoding: utf-8

结语

Jekyll 真的是一个令人惊叹的工具！它的简单性和灵活性使其成为创建静态网站的绝佳选择。从个人博客到项目文档，从作品集到企业网站，Jekyll 都能胜任。

我希望这篇教程能帮助你开始使用 Jekyll。记住，最好的学习方式是实践！所以，立即创建你的第一个 Jekyll 网站，探索它的各种功能，享受创建过程带来的乐趣！

如果你想了解更多关于 Jekyll 的信息，可以查阅官方文档，那里有更详细的指南和示例。

祝你的 Jekyll 之旅愉快！（记住，创建酷炫网站的第一步往往是最简单的一步！）

posted @ 2025-09-18 07:16 backenddev29 阅读(29) 评论(0) 收藏举报

刷新页面返回顶部

backenddev29