GitHub Pages has emerged as an excellent way for developers to deploy their projects online for free. It’s fast, free, and pretty simple, as it lets you host static websites directly from your GitHub repositories.

Getting Started
In this tutorial, I’ll take you through all the steps involved in hosting a React App on GitHub pages.
Prerequisites:
- A GitHub Account
- Git installed and set up on your local machine
- Npm and Node.js(v8.10.0 or higher) installed on your machine
Set Up React App
For the simplicity of this tutorial, we’ll be using create-react-app to set up our react project. Run the following command in the terminal to get your react app set up:

Note that you could have also installed create-react-app
using npm install create-react-app
and then ran the command create-react-app demo-app
. Developers often use npx instead of npm as it lets you execute package commands without having to install that particular package on your local system.
Initialize Git Repository
Go to GitHub and create a repository for your react app. Once you’ve created the repository, run the following commands from the directory where you created your react app.
Create-react-app
automatically initializes a git repository for you in the root app directory and makes the first commit. All you have to do is set up the remote to your GitHub repo and push the master branch. Remember to replace username
with your own GitHub username while adding the origin remote.
Configure gh-pages
We now need to configure gh-pages to prepare our app for deployment.
Run the following command inside your app’s root directory to install the gh-pages package as a dev-dependency : $ npm install gh-pages --save-dev
Open the package.json
file in your React application and add the following properties:
- The
homepage
property with its value being the stringhttp://{username}.github.io/{repo-name}
, whereusername
is your GitHub username and{repo-name}
is the name of your app’s Github repository. So in my case, itshttps://yajassardana.github.io/demo-app
. - In the existing
scripts
property, we need to add thepredeploy
anddeploy
script fields:
Your package.json
file should look something like this now:

Voila! Your app is now ready to deploy.
Deployment
Run the following command to deploy your app: npm run deploy

As you can see, the deploy
script first invokes the predeploy
script, which creates a build directory with a production build of our app, which is then published by the deploy
script.
The deploy
script will create a branch names gh-pages which will host your app, and the app will be deployed at the link specified for the homepage
field in your package.json
file.
You will see the following message when you scroll down to the GitHub pages section of your app’s GitHub repo settings:

GitHub repository.
Deploying Changes (optional)
You might be wondering that what would be the steps to make changes in our current app and deploy those changes to the hosted app. It’s as easy as it gets! First, simply commit your changes and push the master branch to Github using the following commands:
Now that our changes have been pushed, run the npm run deploy
command again to build and deploy our changes.