我如何使用 Github 的工作流程轻松地将 React 和 Gatsby 部署到 github-pages？

Question

我正在尝试创建一个工作流，因此每当我将代码推送到我的 main 分支时，它会自动执行 npm run deploy 所以我的 github 页面网站始终是最新的main 分支。

我的应用程序是 react 和 gatsby 应用程序，但我找不到制作工作流的方法。我尝试了很多工作流程，但总是遇到一些错误。

name: GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm run format
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

现在我的问题是，当我执行 npm run deploy 时，github 页面上的网站没问题，但是当我尝试使用我的工作流程时，大多数图像都无法正常工作。

这是我的文件结构：https://github.com/JeromevDEV/my-portfolio

Answer 1

解决方案是使用Gatsby Publish：https://github.com/marketplace/actions/gatsby-publish

我如何使用 Github 的工作流程轻松地将 React 和 Gatsby 部署到 github-pages？

How can I easily deploy React and Gastby to github-pages using Github's worflow?

github-pages

reactjs

gatsby

github-actions