首页 ✅Blog主题(Chirpy):使用Chirpy主题
文章
取消

✅Blog主题(Chirpy):使用Chirpy主题

这篇文章将指导你如何使用 Chirpy,搭建本地环境以及远程构建及部署。

需要本地计算机先安装 Git,接下来是按照 Jekyll 文档 完成基本环境的安装。

1️⃣ 安装

一、创建新站点

创建一个新的代码库从而使用 Chirpy 主题,有两种方法:

  • 使用 Chirpy Starter - 易于升级,隔离不相关的项目文件,专注于写作。
  • 使用 GitHub Fork - 方便自定义开发,但难以升级。除非你非常熟悉 Jekyll,并且决定对这个项目进行调整或做出贡献,否则不推荐使用这种方法。

1、使用Chirpy Starter

登录 GitHub 后点击 Chirpy Starter,然后点击按钮 Use this template > Create a new repository,重新命名这个新的代码库为 USERNAME.github.ioUSERNAME 替换成你的 GitHub 用户名。

2、使用GitHub Fork

登录 GitHub 后点击 Chirpy Fork,然后重新命名这个新的代码库为 USERNAME.github.ioUSERNAME 替换成你的 GitHub 用户名。

接下来,将你的站点克隆到本地计算机。在构建 JavaScript 文件之前,我们需要先在本地计算机安装 Node.js,然后切换到站点的根目录并运行:

1
bash tools/init

如果你不想在 GitHub Pages 上部署站点,需要将 --no-gh 参数添加到上述命令的末尾。

上述命令将执行以下动作:

  1. 检出 latest tag 的代码(为了确保站点的稳定性,因为默认分支的代码还在开发中)。
  2. 删除不必要的示例文件,并处理与 Github 相关的文件。
  3. 构建 JavaScript 文件并输出到如下目录中 assets/js/dist/,并且使用 Git 跟踪上述文件。
  4. 自动创建一个新的提交来保存上面的更改。

二、安装依赖项

在第一次运行本地服务器之前,请切换到站点的根目录并运行:

1
bundle

2️⃣ 用法

一、配置

_config.yml 文件中按需更新对应配置项,典型的配置项:

  • url
  • avatar
  • timezone
  • lang

二、社交账号

社交账号将显示在侧边栏的底部,你可以在 _data/contact.yml 文件中打开或关闭指定的联系人。

三、自定义样式

如果你需要自定义样式,请将主题的 assets/css/style.scss 复制到跟 Jekyll 站点相应路径的地方,然后在 assets/css/style.scss 文件末尾添加你的自定义样式。

4.1.0 版本开始,如果你想覆盖在 _sass/addon/variables.scss 文件中定义的 SASS 变量,请将主要的 SASS 文件 _sass/jekyll-theme-chirpy.scss 放到站点相应路径的地方,然后创建一个新文件 _sass/variables-hook.scss 并设置新值。

四、自定义静态资源

5.1.0 版本开始,引入了静态资源配置。

静态资源的 CDN 定义在 _data/origin/cors.yml 文件中,你可以根据站点发布所在区域的网络情况进行设置。

同样的,如果你想自行托管相应的静态资源,可以参考:chirpy-static-assets

五、在本地服务器运行

你如果想要在发布站点之前预览站点内容,你只需要运行以下命令:

1
bundle exec jekyll s

或者使用以下命令通过 Docker 运行站点:

1
2
3
4
$ docker run -it --rm \
    --volume="$PWD:/srv/jekyll" \
    -p 4000:4000 jekyll/jekyll \
    jekyll serve

几秒钟后,本地服务将发布成功,可以通过 http://127.0.0.1:4000 进行访问。

3️⃣ 部署

在部署开始之前,请检查文件 _config.yml 并确保 url 配置正确。此外,如果你更喜欢使用项目站点 来访问站点,而不使用自定义域访问,或者你想在 GitHub 页面以外的 Web 服务器上通过基础 URL 访问,请记得将 baseurl 更改为你项目名称(需以斜杠开头),比如:/project-name

现在,你可以从以下方法选择其中一种来部署你的 Jekyll 站点。

一、使用GitHub的Actions功能进行部署

有几件事需要做好准备:

  • 如果你使用的是 GitHub 的免费方案,需要将站点所在的代码库设置为公开的仓库。
  • 如果你已提交 Gemfile.lock 这份文件到代码库,且你的本地计算机未通过 Linux 运行站点,则需要在你的站点根目录下执行如下命令更新一下平台列表。

    1
    
    bundle lock --add-platform x86_64-linux
    

Gemfile.lock 文件记录了项目所依赖的 Ruby gem 版本,执行命令的目的是向 Gemfile.lock 文件中添加一个 x86_64-linux 平台,这样可以让项目在指定的这个平台上安装和使用正确的 gem 版本。

接下来,配置 Pages 服务。

  1. 在 GitHub 上浏览你的代码库。选择选项卡 Settings,点击左侧导航栏中的 Pages。然后,在 Source 下拉选择器中(在 Build and deployment 下面),从下拉菜单中选择 GitHub ActionsBuild source Build source

  2. 将任一提交推送到 GitHub 中以触发 Actions 工作流。在你的代码库的 Actions 选项卡中,你应该会看到工作流 Build and Deploy 正在运行。一旦构建成功并完成构建后,站点将会自动部署好。

此时,你可以转到 GitHub 指示的 URL 来访问站点了。

二、手动构建和部署

在自行托管的服务器上,你无法享受 GitHub Actions 带来的便利。因此,你需要在本地计算机上生成站点,然后将站点的所有文件上传到服务器。

切换到项目代码的根目录后,按如下步骤生成站点:

1
JEKYLL_ENV=production bundle exec jekyll b

或者通过 Docker 构建站点:

1
2
3
4
5
$ docker run -it --rm \
    --env JEKYLL_ENV=production \
    --volume="$PWD:/srv/jekyll" \
    jekyll/jekyll \
    jekyll build

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

4️⃣ 其他资料

本文由作者按照 CC BY 4.0 进行授权