How to host React.js website on GitHub Pages

In this blog, we will see how to host a React.js website on Github pages.

Prerequisite:

• Should have GitHub account. If not, then create one.

Follow the below steps to deploy your website to Github pages:

1. Open your project in VS code or any other editor as per your choice.
2. Open Terminal. In VS code, Go to Terminal→New Terminal.
3. Push your code to Github. Ignore this step if already Done.
4. Open your package.json file and add one line.
   1. "homepage": "https:///USERNAME.github.io/REPO_NAME",''
   2. After adding the above line, your code should look like:

      1. {
           "homepage": "https:///USERNAME.github.io/REPO_NAME",
           "name": "your-project",
           "version": "0.1.0",
           "private": true,
           // Rest of your code

      2. where USERNAME= Your github username.
      3. REPO_NAME= Your repository name which you want to deploy to github pages.
   3. Add the below to your scripts:

      1. "predeploy": "npm run build",
          "deploy": "gh-pages -d build",

      2. Your scripts should looks like:

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

5. Install gh-pages package. Run the below command in terminal:
   1. npm install gh-pages --save-dev
6. Run in terminal: npm run deploy
7. New branch will be created with name: gh-pages
8. Go to GitHub Pages settings. Settings→Code and automation→Pages
9. Configure the "Build and deployment" settings as shown below:
   1. Source: Deploy from a branch
   2. Branch:
      1. Branch: gh-pages
      2. Folder: / (root)
10. Click Save. 
11. Your React.js code will be deployed to Github pages. Check by clicking the URL provided by Github pages.