虽然之前也部署过几个github pages，因为通常我们会采取一些静态建站工具来生成我们的github pages，那些工具的文档都会提供解决方案。

但是这次我还是踩坑了。

01.创建gh-pages分支

需要创建一个gh-pages的分支(可以用gh-pages这个命令行，自动创建分支部署本地的目录)

然后我们在仓库的setting->Pages

就可以调整gh pages的配置，可以采用分支部署，切换到gh-pages

02.非根目录部署

github pages 开启后，如果我们创建一个<USERNAME>.github.io的仓库的时候，默认的地址是 https://<USERNAME>.github.io/

但是当你其他仓库要用github pages的时候，默认就是 https://<USERNAME>.github.io/<REPO>/

所以我们需要配置一下，把起始路由和静态资源的起始路径调整

我们把base和publicPath 都设置成 /<REPO>/就可以了。

还有一个选择就是你有一个域名，gh pages也是能自定义域名的。。。

03.部署工具

gh-pages

这是一个可以帮你发布gh-pages的命令行工具。

因为就是从你本地调用命令安装的，所以也不会有权限的问题。。。

npm install gh-pages --save-dev

我们执行下面的命令就能把指定目录推送到仓库的gh-pages分支

gh-pages -d dist

github workflow

通过 github workflow，可以实现自动化流水线。

使用社区的各种actions可以帮我们实现重复的自动化需求。

比如部署gh-pages，我们可以设置触发时机为push到主分支的时候触发，这样我们每次合并到主分支，就会自动触发部署了。

actions 权限设置

actions 要配置相应的权限，比如默认的权限是只能读仓库的内容，而不能写内容。

这个权限是可以进行详细的设置的，也可以写在workflow的配置文件里。

但是目前我只需要开启读写权限

setting ,Actions，general，然后我们找到workflow权限修改就可以了。

node_modules缓存设置

npm install 有可能很慢，或者rust的项目编译在没有缓存的情况下是很慢的。

社区提供了一些可以缓存每次依赖的actions

比如我这里用到了pnpm/action-setup@v2这个action

pnpm作为包管理器，install速度比npm快。也能节省我的本地磁盘空间。。。

这个actions也会同时帮你做好缓存。

配置文件示例

创建gh-pages.yml到.github/workflows目录，这样这个目录推送到github，就会自动执行里面的配置。。

name: github pages

on:
  push:
    branches:
      - main 
      
permissions:
  contents: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          version: 8.6.2
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist