【Web开发】基于 Jekyll 中的 Chirpy 模板搭建博客网站（一）：成功经验篇

本篇博文主要讲的是成功经验，下一篇博客将会总结遇到的一些坑。

1.Jekyll 介绍

Jekyll 是一种简单易用的静态网站生成器，它能够帮助你快速搭建漂亮的静态博客网站。无论是个人博客、技术博客还是企业官网 Jekyll 都是一个理想的选择。本文将介绍如何使用 Jekyll 创建一个漂亮的静态博客网站，并且给出一些实用的技巧和建议。

Jekyll 是一个基于 Ruby 的静态网站生成器，它可以将你编写的 Markdown、HTML 等文件转换成静态的 HTML 页面，方便部署和访问。与动态网站相比，静态网站具有快速加载、安全性高等优点，适用于各种类型的网站。

官方网站：http://jekyllthemes.org/

2.Chirpy 介绍

Chirpy 是 Jekyll 中的一种主题风格，它具有简约、响应式、开源的特点，且功能丰富。

官方网站：https://github.com/cotes2020/jekyll-theme-chirpy/tree/master

GitHub 地址：https://github.com/cotes2020/jekyll-theme-chirpy/

Demo 地址：https://chirpy.cotes.page/

Demo 如下图所示，还是蛮简约的，但基本功能都有。

并且在它的在线 Demo 里，提供了安装的教程和博客写作的规范。不要觉得有安装教程就可以轻易一步到位，还是有不少坑的！

3.安装步骤

我们就根据官方提供的文档来进行安装，也是它在线 Demo 的其中一篇博文。

官方提供的安装文档：https://chirpy.cotes.page/posts/getting-started/

3.1 Prerequisites

因为 Jekyll 是拿 Ruby 写的，所以首先需要安装：Ruby、RubyGems、GCC、Make。参考链接：https://jekyllrb.com/docs/installation/。

如何安装上述的这些环境呢？

博主用的是 Windows 操作系统，按下面这个步骤来即可。参考链接：https://jekyllrb.com/docs/installation/windows/。

3.2 Installation

3.2.1 Creating a New Site

官方提供了以下两种安装方法。第一种方法安装得到的模板是轻量级的，不会有什么 CSS 样式文件，自己可以随意改造，但如果想直接用起来比较麻烦。我个人推荐第二种方法，虽然官方不推荐！本文也是第二种方法安装的，网上的教程几乎是第一种，因为第二种安装起来会更加麻烦，但它直接继承了模板样式，开箱即用。

我们在 GitHub 上建一个自己的站点，然后运行：bash tools/init。想一下怎么在 Windows 上运行这个命令呢？（提示：可以使用 Git Bash）

虽然只有简单的一行命令，但可能会引入很多 Bug。最终运行成功的结果如下：

根据官方文档，这个命令会做以下的四件事情：

其中第三点就是引入 js 文件，所以如果这个命令运行失败，肯定得不到我们期望的结果！

3.2.2 Installing Dependencies

在第一次启动本地服务器之前，需要到根目录运行 bundle 命令：

3.3 Usage

3.3.1 Configuration

我们需要更改 _config.yml 文件里的一些配置，例如：

• url
• avatar
• timezone
• lang

3.3.2 Running Local Server

博主在本地运行的示例：

3.4 Deployment

官方也是提供了两种方法供选择，建议大家直接使用 GitHub 作为站点部署。原作者已经在代码中写好了流水线的构建流程。这样只要本地 git push 了代码，就可以自动触发 CI/CD 流程。

3.4.1 Deploy by Using GitHub Actions

博主的配置界面如下图：

博主因为有多次 push，所以会有构建失败的时候，点进去看一下失败原因，重新推送即可，但可以看到第一次是成功的。

3.4.2 Manually Build and Deploy