步骤 1: 启用 GitHub Pages

📖 理论: 什么是 GitHub Pages?

GitHub Pages 可以将你的 GitHub 仓库直接发布成一个网站。无论是项目展示页、个人简历、作品集、技术文档，还是个人博客，都可以通过它快速对外发布。

启用 GitHub Pages 后，GitHub 会自动读取 main 分支中的内容，并根据仓库文件生成一个可访问的网站。

[!NOTE] 更多内容可参考 GitHub Pages 官方文档。

⌨️ 实操环节: 启用 GitHub Pages

1. 建议将当前仓库在新的浏览器标签页中打开，方便一边阅读教程，一边实际操作。
2. 在仓库名称下方，点击 Settings。
3. 在 Code and automation 区域点击 Pages
4. 在 Source 下拉菜单中，确认选择的是 Deploy from a branch（从分支部署）。
5. 点击 Save 保存按钮。
6. 成功启用 GitHub Pages 后，Mona 会自动为你准备下一步练习内容。

步骤 2: 自定义你的主页

干得不错！你已经成功启用了 GitHub Pages 🎉

你可以在仓库设置中 Pages 区域顶部看到你网站的访问链接（如果没有显示，刷新一下页面即可）。

[!TIP] 建议你把你的 GitHub Pages 网站 在单独一个浏览器标签页中打开，保持常驻。

在后续操作中，你的每一次修改都会实时更新到网站上。

📖 理论: 如何定制主页

index.md 是网站的入口文件，只要你修改并提交这个文件到 main 分支，GitHub Pages 就会自动重新构建网站，并更新首页内容。

⌨️ 实操环节: 创建你的主页

1. 进入仓库中的 index.md 文件（确保在 main 分支下）。
2. 在右上角，打开文件编辑器。
3. 在文件中写入你想展示在主页的内容，可以使用 Markdown 语法进行排版（标题、列表、链接等都支持）。
4. （可选）你也可以修改 title: 字段，或者保持默认设置。
5. 将更改提交（Commit）到 main 分支。
6. 提交成功后，Mona 会自动为你准备下一步练习内容。

步骤 3: 配置你的网站

干得漂亮！你的首页已经更新完成 ✨

接下来，我们为网站添加一些配置，让它看起来更美观。

📖 理论: Jekyll 与 _config.yml

Jekyll 使用一个名为 _config.yml 的配置文件，统一管理网站设置。 例如：网站主题、标题、作者信息、网站描述、GitHub 用户名等。这些内容都会影响 GitHub Pages 最终生成的网站效果。具体可参考Jekyll 官方文档。

本次练习中，我们将使用一个适合博客场景的主题：minima。

⌨️ 实操环节: 配置网站

1. 打开 main 分支下的 _config.yml 文件。

2. 点击右上角的编辑按钮，进入文件编辑模式。

3. 添加下面这行配置，为网站启用 minima 主题：

   theme: minima
   

4. （可选）你还可以修改其他配置项，例如 title:, author:, description:

   示例

   
   

   theme: minima
   title: {{ login }} 的个人博客
   description: 在这里记录我的学习、项目与生活
   author: {{ login }}
   

5. 提交修改到 main 分支。

6. 提交完成后，Mona 会继续为你准备下一步练习内容。

步骤 4: 发布第一篇博客文章

你的首页现在看起来不错！ 🤠

📖 理论: Jekyll 博客文章与 Front Matter

在 Jekyll 中，文章需要遵循特定的文件命名规则，系统才能正确识别并生成文章页面。文件必须以 _posts/YYYY-MM-DD-title.md 命名，并且必须在 front matter 中包含 title 和 date 字段。

什么是 Front matter：Jekyll 要求在每篇文章顶部包含一段特殊配置，称为 Front Matter（头部配置）。它本质上是一段 YAML 配置，用于告诉 Jekyll：文章标题、发布时间，以及页面布局等信息。

示例如下：

---
title: "Welcome to my blog"
date: 2025-05-15
---

[!NOTE] 更多内容可参考 Jekyll frontmatter 文档.

⌨️ 实操环节: 创建博客文章

1. 切换到仓库的 main 分支。

2. 点击 Add file（添加文件） 下拉菜单，然后选择 Create new file（创建新文件）。

3. 按照 _posts/YYYY-MM-DD-title.md 的格式创建文件。

4. 将 YYYY-MM-DD 替换为今天的日期，并根据需要修改文章标题。

   修改标题时请注意，单词之间用短横线（-）连接。 如果日期格式不正确，Jekyll 将无法构建网站，并提示错误。更多说明可参考 Page build failed: Invalid post date。

5. 在文章顶部添加以下内容

   ---
   title: "YOUR-TITLE"
   date: YYYY-MM-DD
   ---
   

   1. 将 YOUR-TITLE 替换为你的文章标题
   2. 将 YYYY-MM-DD 替换为今天的日期

6. 在下面写一点博客正文内容。不需要写很多，简单记录几句话即可，后续随时都可以继续修改。

7. 提交修改到 main 分支。

8. 提交完成后，Mona 会自动为你准备下一步练习。

课程总结

恭喜你完成本次练习！你已经掌握了 GitHub Pages 与 Jekyll 的基础使用方法。

本次练习中，你完成了以下内容：

• 成功启用了 GitHub Pages
• 通过配置文件为网站设置了主题
• 了解了 Jekyll 的目录结构与文件命名规范
• 使用 Jekyll 与 GitHub Pages 发布了你的第一篇博客文章

接下来可以做什么?

• 继续完善你的 GitHub Pages 网站，打造属于自己的个人主页或技术博客
• 尝试更多 GitHub Skills 课程，学习更多 GitHub 实战技巧：
• 深入阅读 GitHub Pages 官方文档