Github Pages 简介
Github Pages 是 Github 推出的一套静态资源部署服务，通过 Github Action 或者 gh-pages 分支的方式你可以很方便地将打包出来的静态站点部署到 Github 提供的服务器上。
站点类型
有三种类型的 GitHub Pages 站点：项目、用户和组织。
-
用户站点：仓库名为
<username>.github.io，访问地址和仓库名一致。 -
组织站点：仓库名为
<organization>.github.io，访问地址和仓库名一致。 -
项目站点：站点文件和项目存储在一个仓库中，访问地址为：
http(s)://<username>.github.io/<repository>，http(s)://<organization>.github.io/<repository>除了 Github 提供的默认域名外，Github 还允许你进行自定义域名：
详见： 关于自定义域名和 GitHub 页面 - GitHub 文档
部署工作流
下面是一个简单的 Github Action 部署脚本，脚本会在 main 分支提交时构建站点并部署到 gh-pages 分支上:
name: Deploy CI
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v3
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
- name: Setup Node.js environment
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install and Build 🔧
run: |
pnpm i
pnpm run lint
pnpm run docs:build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.1
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages # The branch the action should deploy to.
FOLDER: docs-dist # The folder the action should deploy.
CLEAN: true # Automatically remove deleted files from the deploy branch
绑定自定义域名
CNAME 解析
首先要将自己的域名绑定到 Github Pages 上，首先需要在域名所在的 DNS 服务上添加 cname 记录，以 xxx.example.com 为例，我们需要设置:
| 域名 | CNAME |
|---|---|
| xxx.example.com | <organization>.github.io |
<username>.github.io |
添加 CNAME 文件
其次因为我们时使用工作流的方式部署的站点，因此需要向 gh-pages 分支添加 CNAME 文件。以 dumi 为例会在文档构建时将在 public下的文件打包到最终文档目录下：
添加 CNAME 文件，内容为你的自定义域名，仅一行
配置自定义域名
在 Settings => Pages => Custom domain 中配置自己的自定义域名即可，Github 会自动将该域名设置为你的可访问域名：
