文章

快速入门

通过本文开始了解 Chirpy 基础知识。您将学习如何安装、配置和使用您的第一个基于 Chirpy 的网站,以及如何将其部署到 Web 服务器。

快速入门

创建站点存储库

在创建您的站点仓库时,您可以根据需求选择以下两种方式:

选项1. 使用起始模板(推荐)

这种方法简化了升级,隔离了不必要的文件,非常适合想要以最小配置专注于写作的用户。

  1. 登录 GitHub 并导航到 starter
  2. 点击 Use this template 按钮,然后选择 Create a new repository.
  3. 将新仓库命名为 <username>.github.io,用您的小写 GitHub 用户名替换 username

选项2. Fork 主题

这种方法适合修改功能或 UI 设计,但在升级时会有挑战。因此,除非您熟悉 Jekyll 且计划大幅修改此主题,否则不要尝试此方法。

  1. 登录 GitHub。
  2. Fork 主题仓库.
  3. 将新仓库命名为 <username>.github.io,用您的小写 GitHub 用户名替换 username

设置开发环境

创建您的仓库后,就该设置您的开发环境了。主要有两种方法:

使用开发容器(推荐用于 Windows)

开发容器使用 Docker 提供了一个隔离的环境,可以防止与系统的冲突,并确保所有依赖项都在容器中管理。

步骤:

  1. 安装 Docker:
  2. 安装 VS CodeDev Containers 扩展
  3. 克隆您的仓库:
  4. Wait for the Dev Containers setup to complete。

本地原生设置(推荐用于类 Unix 系统)

对于类 Unix 系统,您可以本地原生设置环境以获得最佳性能,虽然您也可以使用开发容器作为替代方案。

步骤:

  1. 按照 Jekyll 安装指南 安装 Jekyll 并确保安装 Git
  2. 将您的仓库克隆到本地机器。
  3. 如果您 Fork 了主题,安装 Node.js,并在根目录运行 bash tools/init.sh 初始化仓库
  4. 在仓库根目录运行命令 bundle 安装依赖项。

使用

启动 Jekyll 服务器

要在本地运行站点,请使用以下命令:

1
$ bundle exec jekyll s

如果您使用的是开发容器,必须在 VS Code 终端中运行该命令。

几秒钟后,本地服务器将在 http://127.0.0.1:4000可用。

配置

根据需要更新 _config.yml 中的变量。某些常见选项包括:

  • url
  • avatar
  • timezone
  • lang

社交联系选项

社交联系选项显示在侧边栏底部。您可以在 _data/contact.yml 文件中启用或禁用特定的联系选项。

自定义样式表

要自定义样式表,将主题的 assets/css/jekyll-theme-chirpy.scss 文件复制到您的 Jekyll 站点相同路径下,并在文件末尾添加您的自定义样式。

自定义静态资源

静态资源配置是在版本 5.1.0中引入的。静态资源的 CDN 在 _data/origin/cors.yml中定义。您可以根据网站发布地区的网络条件替换其中一些。

如果您希望自行托管静态资源,请参阅 chirpy-static-assets 仓库。

部署

在部署之前,请检查 _config.yml 文件并确保正确配置了 url 。如果您更喜欢 项目站点 并且不使用自定义域, 或者您想在非 GitHub Pages的网络服务器上使用基本 URL 访问您的网站,请记得将 baseurl 设置为您的项目名称,以斜杠开头,例如 /project-name

现在您可以选择以下 ONE 方法来部署您的 Jekyll 站点。

使用 Github Actions 部署

准备以下内容:

  • 如果您使用的是 GitHub 免费计划,请保持站点仓库公开。
  • 如果您已将 Gemfile.lock 提交到仓库,并且本地计算机没有运行 Linux,请更新锁定文件的平台列表:

    1
    
    $ bundle lock --add-platform x86_64-linux
    

接下来,配置 Pages 服务:

  1. 访问 GitHub 上的存储库。选择 Settings 选项卡, 然后单击左侧导航栏中的 Pages 。 在 Source 部分 (在 Build and deployment 下方)从下拉菜单中选择 GitHub ActionsBuild source Build source

  2. 将任何提交推送到 GitHub 以触发 Actions 工作流程。在存储库的 Actions 选项卡中, 您应该能看到工作流 Build and Deploy 正在运行。构建完成并成功后,网站将自动部署。

现在您可以访问 GitHub 提供的 URL 以访问您的站点。

手动构建和部署

对于自托管的服务器,您需要在本地机器上构建站点,然后上传站点文件到服务器。

导航到源项目的根目录,并使用以下命令构建您的站点:

1
$ JEKYLL_ENV=production bundle exec jekyll b

除非您指定了输出路径,生成的站点文件将放置在项目根目录下的 _site 文件夹中。将这些文件上传到目标服务器。