How do I deploy a simple React app as a "user page" to Github Pages?

Question

I've looked at numerous StackOverflow answers, that answer a variety of different scenarios regarding publishing React pages to Github, but none of them clearly explain how to publish a basic user page. I have a very simple, standard React app, that I'd like to publish as a user page on Github.

What are the basic steps for publishing a simple React app as a user page to Github?

Answer 1

The answer, in total, is found in two document sources.

Presuming that you've already created your React app, all is well locally, and your app is ready to deploy, here are the steps to deploy a simple React app as a user page on Github:

1. Follow the guidance given by Github regarding Github Pages... in particular, note that user pages are served only from the master branch, and thus, the user page will be served at https://{your-github-user-name}.github.io.

User pages must be built from the master branch.

2. Next, follow the guidance provided in Create React Apps documentation regarding Github Pages deployment, particularly the parts related to user pages.

Open your package.json and add a homepage field that matches where your user page will be served from:

"homepage": "https://myusername.github.io",

Install the gh-pages module:

npm install --save gh-pages ... or ... yarn add gh-pages

Add deploy (and predeploy) to scripts in package.json:

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

Modify your deploy script to force push the built application to the master branch:

"deploy": "gh-pages -b master -d build",

Deploy your site by running:

npm run deploy

3. The last obstacle to overcome, is caching at Github. You might need to run npm run deploy more than once, to get around Github's caching of previous deploys.