Search code examples
reactjsgithub-actionsgithub-pages

How do i deploy a React app to Github Pages from Github Actions?


I'm building a React app, and I'm trying to implement some form of CI/CD by having it automatically deploy to Github Pages whenever I push to the main branch. To accomplish this I am using the npm package gh-pages, but I am running into an error:

$ gh-pages -d build
Author identity unknown
*** Please tell me who you are.
Run
  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository.
fatal: empty ident name (for <runner@fv-az72-309.paxcb4zidlwe3mfrpko3itqnmd.bx.internal.cloudapp.net>) not allowed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.

How do i provide "Author identity" to git on the Github Pages worker?

Things I've tried so far:

  • Not using any token with actions/checkout
  • Using the default token with actions/checkout
  • Using my personal access token with actions/checkout
  • Using actions/github-script to
  • Setting git config user.name and user.email to both my own and Github Actions' credentials

My workflow file looks as follows:

name: Github Pages

on:
  push:
    branches: ["master"]
  pull_request:
    branches: ["master"]

  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      # i've also tried with the default token, and without any token  
      with: 
          token: ${{secrets.PAT}}
      - uses: actions/setup-node@v2
      - name: Deploy
        run: |
          yarn install
          CI=false && yarn deploy

package.json scripts:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

I am fairly new to React/js/npm, so let me know if I need to provide additional information.


Solution

  • I figured it out! Seems like it was a permissions problem, but even when using the PAT properly, i still had to set the git config variables:

    name: Github Pages
    
    on:
      push:
        branches: ["master"]
      pull_request:
        branches: ["master"]
    
      workflow_dispatch:
    
    jobs:
      build:
        runs-on: ubuntu-latest
    
        steps:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v2
          - name: Deploy
            run: |
              yarn install
              git config --global user.email '[email protected]'
              git config --global user.name 'github-actions'
              git remote set-url origin https://${{ secrets.PAT }}@github.com/username/repository.git
              CI=false && yarn deploy