首页 ✅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.io,USERNAME 替换成你的 GitHub 用户名。

2、使用GitHub Fork

登录 GitHub 后点击 Chirpy Fork,然后重新命名这个新的代码库为 USERNAME.github.io,USERNAME 替换成你的 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 Actions 。 Build 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 进行授权