Deploy your React app to GitHub Pages in 3 simple steps!

Subscribe to my newsletter and never miss my upcoming articles

Done making your React app and want to deploy it for the world to see?

Learn how to deploy your app to GitHub instantly in just 3 simple steps!

Step 1: Installing gh-pages

gh-pages is the npm library that will let us deploy our app to GitHub pages.

Install it using the following command

$ npm install gh-pages

Step 2: Making changes to package.json

We will need to add a homepage field in the format https://{github_username}{repository_name}

and under scripts we'll add scripts for deploy and predeploy as follows:

"predeploy": "yarn run build"
"deploy": "gh-pages -d build"

The package.json should look something like this after this step:

  "name": "portfolio",
  "version": "1.0.0",
  "private": true,
  "homepage": "",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "gh-pages": "^2.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"},
  "eslintConfig": {
    "extends": "react-app"
  "browserslist": {
    "production": [
      "not dead",
      "not op_mini all"
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"

Step 3: 🚀 Deploy your app!

Now, you just need to run $ npm run deploy to deploy our chat app to GitHub pages. You can now view your app at https://{github_username}{repository_name}

If you made it so far, kudos to you! Feel free to leave down your thoughts below in the comments. Happy Hacking!

No Comments Yet