gp-pages deploy fails when run from GitHub Action: Author identity unknown

I’m calling gh-pages from a GitHub Action, and at the point when gh-pages is called by the Action, it fails with this error:

> gh-pages -d build

Author identity unknown

*** Please tell me who you are.

Following this recommendation on a similar posted issue, I updated the ‘npm run build’ script in my package.json to pass the -u option with the github-actions-bot userid:

    "deploy": "gh-pages -d build -u 'github-actions-bot <support+actions@github.com>'",

After adding this and re-running, now I have a different error:

> gh-pages -d build -u 'github-actions-bot <support+actions@github.com>'

fatal: could not read Username for 'https://github.com': No such device or address

Apparently to allow the Action to use actions/checkout to access your repo you must use a Personal Token per additional instructions here.

To create a new access token, access your account settings, then Developer Settings:

To add the token value as a secret to your project, add a new secret via settings on the repo that your Action is accessing:

After paying more attention to the Action log, the checkout step was actually working and completing as expected, it was the ‘npm run deploy’ step that was failing with same error as shown in the linked post above. Following the same advice to use the access token to resolve the ‘Could not read username’ error, I updated the ci.yml again to add the reference to the token as part of setting the remote repo url:

- name: Deploy
  env:
    MY_EMAIL: kevin.hooke@gmail.com
    MY_NAME: kevinhooke
  run: |
    git config --global user.email $MY_EMAIL
    git config --global user.name $MY_NAME
    git remote set-url origin https://$MY_NAME:${{ secrets.GH_SECRET }}@github.com/kevinhooke/my-example-project.git
    npm run deploy
  • the git config steps set the git user’s email and name properties within the context of the Github Action
  • the ‘git remote set-url’ specifies the repo url including my userid and the Personal Access Token retrieved from the GitHub Secret.

Problem solved, now the action works as expected and publishes this project’s GitHub pages on every commit!

Free hosting for React apps: GitHub Pages and gh-pages

I work primarily with AWS and so my first choice for deployment of personal React projects is either a public S3 bucket with Static Website Hosting option enabled, or CloudFront with an S3 origin.

While costs for a site with low traffic will typically cost you < $1 a month with these options, there’s other options available that can be used for personal projects for free. Many of these are covered in this LogRocket article. If you’re already using GitHub, using GitHub Pages to host a React app is pretty easy with the gh-pages utility.

Assuming you have an exising React project, add gh-pages to your app:

npm i --save-dev gh-pages

Edit your package.json and add a couple of scripts:

    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

When you run ‘npm run deploy’ predeploy will run first to build your prod app, and then upload it to the remote origin for your git project. Note – this util assumes your GitHub remote repo is called origin, and it will fail with this error if it is called something else:

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

If you name your remote GitHub repo something else, just add it again with the name origin ‘git remote add origin remote-repo-url’

When gh-pages runs, it uploads the built React app from ./build to a new branch on your repo called gh-pages. If you check the settings for your project, you should see the GitHub Pages settings for your app is configured to use this branch as it’s source:

If it’s using another branch change it to use gh-pages. Hit the url shown in the settings above to load your app from GitHub Pages!

Deploying to github pages with gh-pages

Using gh-pages npm module to build and deploy a React app to github pages I get this error:

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

According to this answer to an issue logged on the project, gh-pages expects your remote repo to be named ‘origin’ and doesn’t work if you use any other name when you ‘get remote add’ you repo for a project. Add the same repo with the name ‘origin’ and then it works as expected.