- 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.