How to Deploy React App to GitHub Pages

Ganesan C

4y186k7100Article

GitHub Pagesdeploy on github pagesdeploy react applications

7 Comments

Join the conversation! Your thoughts help the community grow.

Vaibhav Parashar3y ago
Branch is showing only main and none but not gh-pages. What to do?
Nadine Amanda Ortega4y ago
I think this is kinda out dated. it should be npm install gh-pages --save-dev
Jay Ayerson4y ago
I have an existing react repo, and I want to deploy it as a project. This list of steps doesn't work. Tips please?
Luis Castellon4y ago
Once I ran the npm run deploy commands the page that is getting showed in github pages is the readme. How can I fix that?
- Mehdi Moujahed4y ago
  Just go to "options" in your repository then "pages" sections, then switch to "gh-pages" and click on the "Save" button as described in the step 6 below.
Ramakrishnan R5y ago
Good article!
- Ganesan C5y ago
  Thank you.

Introduction

In this article, we are going to explore how to deploy a React app to GitHub pages.

What are GitHub pages?

GitHub Pages is a static website hosting service and it is free of charge.
It takes resources like HTML, CSS, and JavaScript files directly from the GitHub repository.
We can host our website on GitHub's with github.io domain or our own custom domain name.

Types of GitHub Pages

There are three types of GitHub Pages sites which are,
- User site
- Project site
- Organization site.
Project sites are connected to a specific project hosted on GitHub, such as a JavaScript library.
User and organization sites are connected to a specific GitHub account.

User Site

The user site is connected to a specific GitHub account.
You should have a user account on GitHub.
To publish a user site, you must create a GitHub repo owned by your user account and repo name should be username.github.io. For Example, If your user name is TestName your repo name should be testname.github.io.
If you are not using any custom domain, then your website will be available at https://username.github.io.

Organization Site

The organization site is connected to a specific GitHub account.
To publish an organization site, you must create a repo owned by an organization and the repo name should be organization.github.io.
If you are not using any custom domain, then your website will be available at https://organization.github.io.
You can create only one user or organization site for each user account on GitHub. But we can create unlimited Project sites which can be owned by an organization or a user account.

How to Publish the React application on GitHub Pages

To publish the user site, follow the below steps.

Create an Account in GitHub.
Create Repo in GitHub where the repo name should be username.github.io
Create React Application.
Deploy the React Application using GitHub Pages.
Commit and Push the codebase (React Application) into GitHub repo.

Step 1 - Create an Account in GitHub

Open the GitHub link
Create an account using your personal email
To secure your GitHub account, you can enable MFA (multi-factor authentication) login for your account.

Step 2 - Create Repo in GitHub

Login to your GitHub account.
Create the new repo by clicking the "+" icon at the right top of the page.

Enter the repo name as yourusername.github.io and choose whether the repo should be public or private.

Click on the "Create repository" button.
Now your repo has been created.

Step 3 - Create React Application

Create the react application which you want to host as a website. In this article, I am mainly focusing on how to deploy the react application on GitHub Pages. So please refer to this link to create React application.

Step 4 - Deploy the React Application

To deploy the application, follow the below steps.

1) Add GitHub Pages dependency package

Install "gh-pages" package using the below command.

npm install gh-pages — save-dev

2) Add homepage property to package.json file

Add the below property to your package.json file.
For a GitHub user site:
- "homepage": "https://{username}.github.io"
For a custom domain:
- "homepage": "https://testwebsite.com"

3) Add deploy scripts to package.json file

Add both predeploy and deploy property scripts to the package.json file as below,

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

The "predeploy" command is used to bundle the react application and the "deploy" command helps to deploy the bundled file.

4) Create a remote GitHub repository

Initialize the Git using "git init" command.
Add it as remote using "git remote add origin your-github-repository-url.git" command.

5) Deploy the Application to GitHub Pages

Now run the below command to deploy your react application to GitHub Pages.

npm run deploy

6) Access deployed site

To get the published URL,

Go to your GitHub Repo.
Click Settings menu.

Go to the "Pages" Section.

You can see the "Your site is published" message.
Select branch to "gh-pages" and click on the "Save" button.

Now, you can access the deployed site using the published URL!

Step 5 - Commit and Push the codebase

Commit and push your code changes to the GitHub repo. It is an optional one. But, for maintaining the code base we can do this step.

git add .
git commit -m "commit message"
git push origin master