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:

1. A GitHub Account
2. Git installed and set up on your local machine
3. 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-appusing  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:

1. The homepage property with its value being the string http://{username}.github.io/{repo-name} , where username is your GitHub username and {repo-name} is the name of your app’s Github repository. So in my case, its https://yajassardana.github.io/demo-app.
2. In the existing scripts property, we need to add the predeploy and deploy 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:

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.