使用 Github Action 将 Gatsby 站点部署到 Github Pages

个人博客是基于 Gatsby 搭建的,之前已经利用 Github Action 部署在 Netlify 和 Vercel 上。本着不浪费 xxx.github.io 这个域。这次把 build 好的构建产物直接推到 gh-pages 分支

背景

由于 blog 源码和 构建产物可能不在同一个仓库,因此可能出现两种情形。


1.源码和构建产物共用一个仓库,分别对应不同的分支(master和gh-pages)

2.源码和构建产物分别在不同的仓库,分别对应不同仓库的不同分支的分支

- person-blog 的 master 对应blog源码

- xx.github.io 的 master 或者 gh-pages 对应源码的构建产物

情况一必须开源,情况二多了更多的可能,当然我是第二种情况

准备

  1. 生成 access tokens
Tokens you have generated that can be used to access the GitHub API.

生成个人账号分配的 github api 权限列表的 token 待用。这里只生成了对开源仓库的操作权限

使用 Github Action 将 Gatsby 站点部署到 Github Pages_第1张图片

  1. 在 xx.github.io 的 secret 中填入 acess token name对应secret name待用,value对应access token

使用 Github Action 将 Gatsby 站点部署到 Github Pages_第2张图片

  1. 在源码仓库新建 github action 的 workflow

使用 Github Action 将 Gatsby 站点部署到 Github Pages_第3张图片

workflow

这里直接在GitHub Action Marketplace 市场中找到了 Gatsby Publish),修改后的模板如下:


name: Gatsby Publish

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: enriikke/gatsby-gh-pages-action@v2
        with:
          access-token: ${{ secrets.ACCESS_GITHUB_API_TOKEN }} // 自定义 scret name
          deploy-branch: master
          deploy-repo: shanejix.github.io // 注意这里直接是仓库名称

当然后续可以增加更多可定制的功能例如直接推到 gitee 或者 自己的服务器上

你可能感兴趣的