Chirpy教程-2. 什么是Chripy
Chirpy系列教程第二章，介绍了Jekll的基本概念，Jekyll的主题之一Chirpy的特点。
Jekyll
Jekyll是一个网站生成器，它可以将md格式的文件转换成网站中的博客。它可以很方便的帮助他们将自己md格式的笔记转换成博客，适合那些有大量md格式笔记的人（比如我）使用。Jekyll是一个结构，在这个结构下有非常多样式丰富的主题。Chirpy正是其中一个优秀的、更新活跃的主题。
使用Jekyll很简单，只需要2个基本文件和2个目录即可。准备好这些后，在本地运行bundle exec jekyll server即可完成网站的本地构建，访问http://127.0.0.1:4000/即可。
我们接下来介绍这这两个基本文件和两个目录的作用，以便更清楚的了解Jekyll的工作原理。
_posts文件夹
_posts文件夹存放你的md文件，格式必须是YYYY-MM-DD-title.md，比如，2025-4-12-测试博客.md。这里的title和时间只是起到辨识作用，不会成为网页中博客的时间和标题。网页中的时间和标题在md文件中的Front Matter中设置，可以类比为latex中的导言区，不过结构非常简单。不同的主题对Front Matter有不同的要求。Chirpy的格式为：
1
2
3
4
5
6
7
---
title: Chirpy使用记录
date: 2025-04-10
categories: [编程, 前端]
tags: [前端]
description: 初次尝试jeklly+github.io
---
此处的信息都会在前端中呈现。其中的date，官方建议还要加上具体的时间和时区，即date: 2025-4-9 21:33:00 +0800，不过我比较懒就不加了，好像也没出什么大乱子。
_config.yml文件
这是网站的配置文件，包含网站的全局设置，比如，网站的title，使用了什么主题，以及各种各样的个人配置。这个文件主要看你使用的主题是什么，主题的官方会提供_config.yml文件滴，按需填写即可。
index.html或index.md
这是网站的首页，所以一定要有。
_layouts文件夹
样式模版，至少要包含一个默认样式，即default.html。对于复杂的主题，对应的网页中可能有许多不同的页面，比如Chirpy就包含post、categories、archives等等不同的子页面，每个子页面都对应一种样式模版。
1
2
3
4
5
6
7
8
9
10
11
my-jekyll-site/
│
├── _posts/ # 博客文章目录
│ └── YYYY-MM-DD-title.md # 博客文章文件
├── _config.yml # 网站配置文件
│
├── index.md # 网站首页
│
└── _layouts/ # 布局模板目录
└── default.html # 默认布局模板
在准备好这些并安装好必要的依赖后，就可以通过bundle exec jekyll server在本地运行啦！
Chirpy
Chirpy是一个现代简洁的Jekyll模版。除此之外，GitHub官方也提供了许多可选的模版。这些模版中，Chirpy是比较新的，更新勤快，界面简洁，配置好上手的一个主题，因此选用Chirpy。接下来介绍一些Chirpy的功能特性。
Markdown
Jekyll使用的markdown编译器是kramdown，一个markdown的超集，即支持比markdown更丰富的样式标记方式。在标准markdown的语法基础上，可以通过添加{}更进一步定义样式。Chirpy很好的利用了这一特性。官网提供了一个简单的教程text-and-typography。我强烈建议你找到这个教程的源代码 好好学习一下
自定义
Chirpy的自定义是非常容易的。如果你是从stater开始的，你只需要到源文件中找到你需要修改的文件，保存到本地文件夹中即可。如果你只是想通过css自定义一些东西，你只需要找到源代码中的assets/css/jekyll-theme-chirpy.scss 文件，按照相同的目录结构保存到本地，然后在这个文件后添加你要定义的css即可。
1
2
3
4
5
6
---
---
@use 'main';
/* append your custom style below */
如果你你发现添加
jekyll-theme-chirpy.scss文件后，页面的布局发生了一些不太好的改变！但是在本地编译时没有任何问题。原因可能是是生产环境不同。你只需要将源代码中的.github/workflows/starter/pages-deploy.yml 按照相同的目录保存到本地，然后将其中第51行的JEKYLL_EBV变量替换为"development"即可。
具体的原因如上面的 SASS 代码所示，不同的环境对应了不同的操作逻辑。本地部署时使用的是development环境，而在GitHub上通过Actions编译时使用的是production环境。目前官方的issues中没有出现这个报告，不知道是不是我个人的问题。
Actions
我们在这部分讲解一下Chirpy通过GitHub部署时的一个小小细节：Actions。我们是如何在本地的http://127.0.0.1:4000/访问自己的博客的？我们需要先安装依赖，确保本地有Ruby，gem和bundle，然后才能运行bundle exec jekyll server构建网站。在云端发布同样需要这些操作。
传统的方式需要自己租一个服务器，在租用的服务器上执行同样的操作，才能发布。这还不算完，我们还需要租用一个域名，好让别人能通过域名而不是ip号访问我们的网页。这还没完，为了防止你散播不好的东西，帽子叔叔👮会要求你对你的域名备案，这一串流程搞完后，别人才能通过域名访问你的博客。
当我们使用github.io部署博客时，流程被简化了很多，我们白嫖GitHub的服务器和域名，也不需要备案了。而云端部署的过程则又Actions执行。在.github/workflows/starter/pages-deploy.yml文件中定义了服务器需要执行的所有操作，包括安装依赖，执行网站的构建，检查构建等流程，相当的舒服。