Deploy Create-React-App on GitHub Page

Whenever you finish your react project, the next step is naturally to deploy it: Make the world see your amazing work! There are many services to host your react project, I personally use Vercel and GitHub Page most often. This post will teach you how to deploy in GitHub Page.

Suppose your app name is "simple-react-app".

Open a terminal:

1st, Create react app. (Skip this step if you already have created the app)

npx create-react-app simple-react-app
cd simple-react-app
npm start

Then, make necessary changes as you want. OK, everything looks good. The app is running locally.

2nd, Install GiHub page as dev-dependency.

npm install gh-pages --save-dev

3rd, Make modifications to package.json file.
Add homepage https://{username}.github.io/{app-name} at top level, add predeploy and deploy in scripts. Here is an example of my json file (since my github username is jzfrank and the app name is assumed to be simple-react-app)

{
  "name": "simple-react-app",
  // ...
  "homepage": "https://jzfrank.github.io/simple-react-app",
  // change jzfrank to your github username
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    // ... 
  },
  // ...
}

4th, Create an empty github repo of name simple-react-app. Now, initialize local repo and set the remote repo as remote

git init
git remote add origin [e-mail]:jzfrank/simple-react-app.git

5th, deploy it to GitHub page

npm run deploy

You can then visit the repo, go to setting -> GitHub Page to see where it is hosted. (Should be somewhere like "https://{username}.github.io/simple-react-app/"

Visit my deployment

6th, optionally, you may want to push this repo to master branch.

git add .
git commit -m "init my simple react app"
git push origin master

Final remark (just in case you are deploying a personal website written in react): Naturally you may want to use https://{username}.github.io as domain name. In such case, you have to name the app/repo by {username}.github.io. Additionally, in 3rd step where you modify the package.json file, you don't set homepage for it. Why? See this.

That's it, Cheers!