Deploying React sites on GitHub pages

Connecting the local repository with the remote

If we have not yet already, let us run these commands in Terminal:

$ git init
$ git remote origin add (remote url on github)
$ git add -A
$ git commit -m "pushing initial version"
$ git push origin master

Installing the gh-pages utility

Then, let's set up the gh-pages package as a "dev dependency":

$ npm install gh-pages --save-dev

Editing package.json for deployment

Add this property to the package.json file, replacing yourname and yourrepo with the obvious:

"homepage" : "https://yourname.github.io/yourrrepo"

Then, within the scripts property:

"scripts" : {
    "predeploy" : "npm run build", 
    "deploy" : "gh-pages -d build",
    ...
}

Overall, the package.json file should look something like:

{
  "homepage": "https://joncoded.github.io/whatever", 
  "name": "reactetc",
  "description": "some react stuff",
  "version": "1.0.0",
  "main": "src/index.js",
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-scripts": "^4.0.1",
  },
  "scripts": {
    "predeploy" : "npm run build", 
    "deploy" : "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "browserslist": [
    "defaults"
  ],
  "author": "joncoded",
  "license": "MIT"
}

Deploying

In Terminal, we can run just one-liner command:

$ npm run deploy

Setting up the remote repository for GitHub pages

On GitHub:

Create a new remote repository (and note down its URL)
Go into the repository's Settings
- Go to the section GitHub Pages
- Under Source
  - Pick "Branch: gh-pages"
    - leave the folder at **** /(root)
  - Save

Wait a few seconds or a few minutes to see the page live on yourname.github.io/yourrepo

Re-deployment

For every time that we wish to re-deploy, we just run these commands:

$ git add -A
$ git commit -m "pushing another version"
$ git push origin master
$ npm run deploy