使用Github Actions自动部署Github Pages


创建Github Repo

首先创建一个Github仓库,比如:https://github.com/luosicoding/ghpages-demo.git

然后克隆到本地:

git clone https://github.com/luosicoding/ghpages-demo.git

创建React APP

cd ghpages-demo
npx create-react-app .

添加依赖库

npm install gh-pages --save-dev

进行Github Pages相关配置

在package.json中添加如下信息:

"homepage": "https://luosicoding.github.io/ghpages-demo",

注意这部不能省略,否则可能出现空白页面的错误。

Github Actions配置

添加文件.github/workflows/ghpages-workflow.yml

name: Github Pages Deployment

on:
  push:
    branches:
      - "main"

jobs:
  deploy:
    name: deploy GH pages
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - name: Install and build
        run: npm install && npm run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-[email protected]
        with:
          branch: gh-pages
          folder: build

注意事项

需要想gh-pages分支提交一个更改后才能使其发布。可以在对应的设置中查看其发布状态:https://github.com/luosicoding/ghpages-demo/settings/pages


文章作者: 逻思
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明来源 逻思 !
  目录