🚀 How to Deploy a React App on GitHub Pages

Christian Chi — Sun, 09 Feb 2025 17:11:39 +0000

GitHub Pages is a free and simple way to host your React applications. In this guide, I'll walk you through the step-by-step process of deploying your React app to GitHub Pages using gh-pages.

✅ Prerequisites

Before we begin, ensure you have:

A GitHub account
Node.js and npm installed
A React project ready for deployment

📺 Full Tutorial on Youtube

Download the simple demo app used in the tutorial - Click Here

1️⃣ Create an Empty GitHub Repository

Go to GitHub and create a new repository.
Name it deploy-react-git (or any name you prefer).
Do not initialize with a README, .gitignore, or license.

2️⃣ Clone the Repository

To clone the repository, use an access token (recommended) or SSH:

git clone https://github.com/<your-github-username>/deploy-react-git.git

Then, navigate into the cloned repo:

cd deploy-react-git

Copy your React project files into this directory.
Note: If you want to follow the tutorial exactly, download this simple react app used in the tutorial - Click here.

🔹 Need help with GitHub Access Tokens?
Check out this tutorial: How to Use GitHub Access Tokens

3️⃣ Install Dependencies

Run the following command to install all required dependencies:

npm install

Non-default packages used(in the simple demo app):

sass (for SCSS styling)
axios (for HTTP requests)

If they are not installed, run:

npm install sass axios

4️⃣ Install `gh-pages`

Install gh-pages as a development dependency:

npm install gh-pages --save-dev

5️⃣ Update `package.json`

Add a homepage field:

"homepage": "https://<your-github-username>.github.io/deploy-react-git",

Add deployment scripts:

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

6️⃣ Push the Project to GitHub

Run the following commands to initialize and push your project to GitHub:

git init
git add .
git commit -m "First commit"
git branch -M main
git remote add origin https://github.com/<your-github-username>/deploy-react-git.git
git push -u origin main

7️⃣ Deploy the App

Run the deployment command:

npm run deploy

This will:

Create a gh-pages branch.
Build and deploy your project to GitHub Pages.

8️⃣ Enable GitHub Pages

Go to Repository Settings > Pages.
Under Branch, select gh-pages.
Click Save.

If the gh-pages branch is selected by default, then leave it as it is.
After a few minutes, your site will be live at:

https://<your-github-username>.github.io/deploy-react-git/

9️⃣ (Optional) Automate Future Deployments

To update your project and redeploy:

git add .
git commit -m "Updated project"
git push origin main
npm run deploy

This ensures your site stays updated with the latest changes.

💬 Have Questions or Feedback?

I'd love to hear from you! If you have any questions, need clarification, or just want to share your thoughts, drop a comment below.
Your feedback will help to improve and create better tutorials for you. Let's keep the conversation going! 🚀

🎉 Support Me!

If this guide was helpful, kindly consider supporting me by:
✅ Linking & Following
✅ Subscribing to the channel: https://www.youtube.com/@halogenius-ideas
✅ Sharing it with your friends
Thank you! 🚀

DEV Community: Christian Chi