如何使用 Github 工作流程轻松地将 React 和 Gatsby 部署到 github 页面?

Posted

技术标签:

【中文标题】如何使用 Github 工作流程轻松地将 React 和 Gatsby 部署到 github 页面?【英文标题】:How can I easily deploy React and Gastby to github-pages using Github's worflow? 【发布时间】:2021-10-20 05:02:55 【问题描述】:

我正在尝试创建一个工作流,因此每当我将代码推送到我的 main 分支时,它会自动执行 npm run deploy,因此我的 github 页面网站始终与 main 分支保持同步。

我的应用程序是 reactgatsby 应用程序,但我找不到创建工作流程的方法来做到这一点。我尝试了很多工作流程,但总是会遇到一些错误。

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

【问题讨论】:

【参考方案1】:

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

【讨论】:

以上是关于如何使用 Github 工作流程轻松地将 React 和 Gatsby 部署到 github 页面?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 AlmofireImage 最轻松地将 NSURLCache 的内存容量设置为零?

如何使用 yum 轻松地将 posix 支持添加到 PHP?

如何轻松地将变量从一个视图传递到另一个视图?

如何轻松地将多维 JSON 解析为 html?

如何编辑 GitHub 发布日期?

如何轻松地将 CSV 文件处理为 List<MyClass>