快速入门
通过本文开始了解 Chirpy 基础知识。您将学习如何安装、配置和使用您的第一个基于 Chirpy 的网站,以及如何将其部署到 Web 服务器。
创建站点存储库
在创建您的站点仓库时,您可以根据需求选择以下两种方式:
选项1. 使用起始模板(推荐)
这种方法简化了升级,隔离了不必要的文件,非常适合想要以最小配置专注于写作的用户。
- 登录 GitHub 并导航到 starter。
- 点击 Use this template 按钮,然后选择 Create a new repository.
- 将新仓库命名为
<username>.github.io
,用您的小写 GitHub 用户名替换username
。
选项2. Fork 主题
这种方法适合修改功能或 UI 设计,但在升级时会有挑战。因此,除非您熟悉 Jekyll 且计划大幅修改此主题,否则不要尝试此方法。
- 登录 GitHub。
- Fork 主题仓库.
- 将新仓库命名为
<username>.github.io
,用您的小写 GitHub 用户名替换username
。
设置开发环境
创建您的仓库后,就该设置您的开发环境了。主要有两种方法:
使用开发容器(推荐用于 Windows)
开发容器使用 Docker 提供了一个隔离的环境,可以防止与系统的冲突,并确保所有依赖项都在容器中管理。
步骤:
- 安装 Docker:
- 在 Windows/macOS 上,安装 Docker Desktop。
- 在 Linux 上,安装 Docker Engine。
- 安装 VS Code 和 Dev Containers 扩展。
- 克隆您的仓库:
- 对于 Docker Desktop:启动 VS Code 并 克隆您的仓库到容器卷中。
- 对于 Docker Engine:在本地克隆您的仓库,然后通过 VS Code 在容器中打开它。
- Wait for the Dev Containers setup to complete。
本地原生设置(推荐用于类 Unix 系统)
对于类 Unix 系统,您可以本地原生设置环境以获得最佳性能,虽然您也可以使用开发容器作为替代方案。
步骤:
- 按照 Jekyll 安装指南 安装 Jekyll 并确保安装 Git。
- 将您的仓库克隆到本地机器。
- 如果您 Fork 了主题,安装 Node.js,并在根目录运行
bash tools/init.sh
初始化仓库 - 在仓库根目录运行命令
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 服务:
访问 GitHub 上的存储库。选择 Settings 选项卡, 然后单击左侧导航栏中的 Pages 。 在 Source 部分 (在 Build and deployment 下方)从下拉菜单中选择 GitHub Actions 。
将任何提交推送到 GitHub 以触发 Actions 工作流程。在存储库的 Actions 选项卡中, 您应该能看到工作流 Build and Deploy 正在运行。构建完成并成功后,网站将自动部署。
现在您可以访问 GitHub 提供的 URL 以访问您的站点。
手动构建和部署
对于自托管的服务器,您需要在本地机器上构建站点,然后上传站点文件到服务器。
导航到源项目的根目录,并使用以下命令构建您的站点:
1
$ JEKYLL_ENV=production bundle exec jekyll b
除非您指定了输出路径,生成的站点文件将放置在项目根目录下的 _site
文件夹中。将这些文件上传到目标服务器。