Deploying React to GitHub Pages

  • Create a new repository on GitHub, so we have something to refer to mine’s called react.io so simply replace this with your repo name within these steps, also the steps will show my GitHub repository at putridparrot, again replace this with your GitHub username.
  • Clone the repository onto your local machine
  • In the parent folder of your cloned repository run
    yarn create react-app react.io --typescript
    

    Note: without –typescript if you want plain JavaScript code.

  • cd back into your repo folder and type
    yarn add gh-pages -D
    
  • Open your packages.json and add the following (below the “verson” is a good place)
    "homepage": "http://putridparrot.github.io/react.io",
    
  • Next up we need to add a predeploy and deploy script within the “scripts” section of the packages.json, so add these
    "deploy": "gh-pages -d build",
    "predeploy": "yarn run build"
    
  • Run the following from your shell/terminal
    yarn deploy
    

When we run yarn deploy the predeploy script is run and will create a gh-pages branch on your GitHub remote repo. Also it will default to this branch and when you go to the Settings page of your repository and scroll to the GithHub Pages section, you should see the source set to gh-pages branch.

As this point my React GitHub pages site should be visible at

https://putridparrot.github.io/react.io/

You may well want to push the source of your React application to GitHub as well, so simply commit and push to master or another branch, DO NOT overwrite the gh-pages branch, this is basically your deployed site.

To update your GitHub pages, simply run the following each time you’re ready to deploy to gh-pages

yarn deploy

The updated deployment may take up to ten minute to become available.