GitHub offers more than just a host for your code. In this short tutorial, I will walk you through deploying a static react app/project onGitHub Pages.

I will be using one of my React projects from GitHub:

https://github.com/ChrisAchinga/myRepos

A programmer's learning tool is by practicing --I said that...

Let's Get Started:

This tutorial assumes you already have your react project setup and ready to deploy

Step 1: Install the Dependencies (gh-pages):

I use npm for my projects, so while in your project root directory, open the project on your terminal or cmd (windows).

Install thegh-pages package as a dev-dependency of the app

npm install gh-pages --save-dev

Step 2: Define Homepage in package.json

In thepackage.json file in your react app and add homepage property using the given syntax:

http://{username}.github.io/{repo-name}

Where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository. Below is an example for my project:

"homepage": "http://ChrisAchinga.github.io/myRepos",{  "name": "myrepos",  "homepage": "http://ChrisAchinga.github.io/myRepos",  "version": "0.1.0",  "private": true,}

Step 3: Deploy script inpackage.json file

Now we can add the deploy script in the package.json file. In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

"scripts": {  // some code before  "predeploy": "npm run build",  "deploy": "gh-pages -d build"}

So your "scripts" should look like this:

{  "scripts": {    "start": "react-scripts start",    "predeploy": "npm run build",    "deploy": "gh-pages -d build",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"  },}

Step 4: Deploy Your App

Update your GitHub repository using git commands:

npm run deploy

Step 5: Commit and Push to GitHub

On your project terminal, run the deploy script

git add .git commit -m "gh-pages deploy"git push

Kudos your React app is ready for view... on the URL:

https://{github-user-name}.github.io/{repo-name}/

https://chrisachinga.github.io/myRepos/

Deployment Preview

Resources For GitHub Pages

• https://pages.github.com/