使用 github Actions 将 React 应用程序发布到 Github Pages答案

【问题标题】：Publish React app to Github Pages using github Actions使用 github Actions 将 React 应用程序发布到 Github Pages
【发布时间】：2020-10-11 05:21:27
【问题描述】：

我做了一个简单的 Reactjs 应用程序，现在我想在 gh-pages 上发布它。我跟着this Facebook tutorial 进行了部署，它也从我的PC 上进行了部署。但现在我不是每次都手动部署它，而是考虑使用 Github Actions 在每次推送到主分支时进行部署。所以我写了下面的动作。

name: gh pages publish

on:
  push:
    branches: master

jobs:
  build:
    runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v2
  - uses: actions/setup-node@v1
    with:
      node-version: 12
      registry-url: https://registry.npmjs.org/
  - name: publish package
    run: |
      yarn
      npm run deploy

但此操作失败，因为它需要用户输入用户名和密码。

> gh-pages -d build
fatal: could not read Username for 'https://github.com': No such device or address

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! timetablemanager@0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the timetablemanager@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2020-06-21T07_07_19_700Z-debug.log
##[error]Process completed with exit code 1.

我该如何解决这个问题？

编辑：这是 package.json 文件

    {
  "homepage": "http://itissandeep98.github.io/TimeTableManager/",
  "name": "timetablemanager",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.5.0",
    "bootstrap-social": "^5.1.1",
    "font-awesome": "^4.7.0",
    "gh-pages": "^3.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

如果您能提供您的package.json，将有助于解决您的问题。

标签： reactjs npm github-pages github-actions

【解决方案1】：

根据create react app github pages Troubleshoothere，需要做如下操作。

创建一个新的Personal Access Token
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>。
再试npm run deploy

还要确保 package.json 中的所有内容都是正确的，但这看起来肯定是身份验证问题。

【讨论】：

【解决方案2】：

把这个放在这里给那些希望和 OG 一样的人：

我创建并添加了一个personal token，但也遇到了更多问题。

以下是我最终对操作文件所做的更改：

      - name: setup git authentication 
        run: |
          git config --global user.email "<me>@<gmail>.com"
          git config --global user.name "<my_name>"
          git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>

      - name: publish
        run: |
          yarn
          npm run deploy

【讨论】：

【解决方案3】：

对于最终在这里的任何其他人，您可以使用on every action 可用的secrets.GITHUB_TOKEN，而无需直接在您的回购设置中进行设置。

使用上面 Joey Baruch 的答案，只需将 <token> 替换为：

${{ secrets.GITHUB_TOKEN }}

附： stackoverflow 不允许我发表评论，所以我不得不将其作为单独的答案发布。

【讨论】：