Deploying React App on GitHub Pages

Introduction

A React App can be built as a static website and can be deployed on GitHub Pages for free.

In this blog post, I would like to quickly show how to deploy a React Profile Card App on GitHub Pages.

React App GitHub Pages

Once the React App has been created and uploaded to GitHub, the "scripts" attribute of the React package.json file should be modified as follows.

"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"
},

An additional "homepage" attribute should be added to the React package.json file. Its form should be “https://{github-username}.github.io/{github-repository-name}”.

"homepage": "https://leimao.github.io/React-Profile-Card"

Note that this "homepage" attribute shall be set to an empty string "" during development. Otherwise, some image file paths would not be resolved correctly by React.

To automate the deployment process, we will have to install the gh-pages package using npm.

$ npm install --save gh-pages

The deployment can be done using one command.

$ npm run deploy

React App GitHub Pages

The React App was deployed on the GitHub Pages on https://leimao.github.io/React-Profile-Card.