雖然之前也部署過(guò)幾個(gè)github pages够坐，因?yàn)橥ǔＮ覀儠?huì)采取一些靜態(tài)建站工具來(lái)生成我們的github pages寸宵，那些工具的文檔都會(huì)提供解決方案。

但是這次我還是踩坑了元咙。

01.創(chuàng)建gh-pages分支

需要?jiǎng)?chuàng)建一個(gè)gh-pages的分支(可以用gh-pages這個(gè)命令行梯影，自動(dòng)創(chuàng)建分支部署本地的目錄)

然后我們?cè)趥}(cāng)庫(kù)的setting->Pages

就可以調(diào)整gh pages的配置，可以采用分支部署庶香，切換到gh-pages

02.非根目錄部署

github pages 開(kāi)啟后甲棍，如果我們創(chuàng)建一個(gè)<USERNAME>.github.io的倉(cāng)庫(kù)的時(shí)候，默認(rèn)的地址是 https://<USERNAME>.github.io/

但是當(dāng)你其他倉(cāng)庫(kù)要用github pages的時(shí)候赶掖，默認(rèn)就是 https://<USERNAME>.github.io/<REPO>/

所以我們需要配置一下感猛，把起始路由和靜態(tài)資源的起始路徑調(diào)整

我們把base和publicPath 都設(shè)置成 /<REPO>/就可以了。

還有一個(gè)選擇就是你有一個(gè)域名奢赂，gh pages也是能自定義域名的陪白。。膳灶。

03.部署工具

gh-pages

這是一個(gè)可以幫你發(fā)布gh-pages的命令行工具咱士。

因?yàn)榫褪菑哪惚镜卣{(diào)用命令安裝的，所以也不會(huì)有權(quán)限的問(wèn)題轧钓。序厉。。

npm install gh-pages --save-dev

我們執(zhí)行下面的命令就能把指定目錄推送到倉(cāng)庫(kù)的gh-pages分支

gh-pages -d dist

github workflow

通過(guò) github workflow毕箍，可以實(shí)現(xiàn)自動(dòng)化流水線弛房。

使用社區(qū)的各種actions可以幫我們實(shí)現(xiàn)重復(fù)的自動(dòng)化需求。

比如部署gh-pages而柑，我們可以設(shè)置觸發(fā)時(shí)機(jī)為push到主分支的時(shí)候觸發(fā)文捶，這樣我們每次合并到主分支荷逞，就會(huì)自動(dòng)觸發(fā)部署了。

actions 權(quán)限設(shè)置

actions 要配置相應(yīng)的權(quán)限粹排，比如默認(rèn)的權(quán)限是只能讀倉(cāng)庫(kù)的內(nèi)容颅围，而不能寫內(nèi)容。

這個(gè)權(quán)限是可以進(jìn)行詳細(xì)的設(shè)置的恨搓，也可以寫在workflow的配置文件里。

但是目前我只需要開(kāi)啟讀寫權(quán)限

setting ,Actions筏养，general斧抱，然后我們找到workflow權(quán)限修改就可以了。

node_modules緩存設(shè)置

npm install 有可能很慢渐溶，或者rust的項(xiàng)目編譯在沒(méi)有緩存的情況下是很慢的辉浦。

社區(qū)提供了一些可以緩存每次依賴的actions

比如我這里用到了pnpm/action-setup@v2這個(gè)action

pnpm作為包管理器，install速度比npm快茎辐。也能節(jié)省我的本地磁盤空間宪郊。。拖陆。

這個(gè)actions也會(huì)同時(shí)幫你做好緩存弛槐。

配置文件示例

創(chuàng)建gh-pages.yml到.github/workflows目錄，這樣這個(gè)目錄推送到github依啰，就會(huì)自動(dòng)執(zhí)行里面的配置乎串。。

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