Publish React app to Github Pages using github Actions

Question

I made a simple Reactjs app and now I want to publish it on gh-pages. I followed this Facebook tutorial for deploying it and it is also getting deployed from my PC. But now instead of every time manually deploying it, I thought of using Github Actions to deploy on every push to the master branch. so I wrote the below Action.

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

But this action fails because it requires the user to input the username and password.

> 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! [email protected] deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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.

How can I fix this?

Edit: Here is the package.json file

    {
  "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"
    ]
  }
}

If you could provide your package.json, it would help to resolve your issue. — VarunDevPro
– VarunDevPro, Commented Jun 21, 2020 at 8:19

Hassaan Tauqir · Accepted Answer · 2020-06-21 09:02:05Z

1

According to the create react app github pages troubleshoot here, you need to do the following.

Create a new Personal Access Token
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>.
Try npm run deploy again

Also make sure everything in your package.json is correct, but this definitely looks like an authentication issue.

answered Jun 21, 2020 at 9:02

Hassaan Tauqir

2,7521 gold badge16 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joey Baruch · Accepted Answer · 2020-08-27 16:36:13Z

0

Putting this here for those looking to do the same as the OG:

I created and added a personal token, and also faced some more issues.

Here are the changes I ended up making on the action file:

      - 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

answered Aug 27, 2020 at 16:36

Joey Baruch

5,4097 gold badges39 silver badges58 bronze badges

Comments

flynneva · Accepted Answer · 2021-01-05 17:47:23Z

0

for anyone else who ends up here, you can use the secrets.GITHUB_TOKEN that is available on every action, without setting it directly in the settings for your repo.

use Joey Baruch's answer above, just replace <token> with:

${{ secrets.GITHUB_TOKEN }}

P.s. stackoverflow wont let me comment yet so I had to post this as a separate answer.

answered Jan 5, 2021 at 17:47

flynneva

1

Comments

Stefano Borzì · Accepted Answer · 2025-01-30 16:43:37Z

0

I strongly recommend this solution using JamesIves/github-pages-deploy-action.

name: Deploy React App to GitHub Pages

on:
  push:
    branches: ['main']

permissions:
  contents: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4
        with:
          persist-credentials: false

      - name: Use Node.js 20.14.0
        uses: actions/setup-node@v1
        with:
          node-version: '20.14.0'

      - name: Build 🔨
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: dist/

answered Jan 30 at 16:43

Stefano Borzì

2,6785 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

Publish React app to Github Pages using github Actions

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related