DEV Community

Cover image for 🚀 How to Deploy a React App on GitHub Pages
Christian Chi
Christian Chi

Posted on

🚀 How to Deploy a React App on GitHub Pages

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:

  1. A GitHub account
  2. Node.js and npm installed
  3. 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
Enter fullscreen mode Exit fullscreen mode

Then, navigate into the cloned repo:

cd deploy-react-git
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

4️⃣ Install gh-pages

Install gh-pages as a development dependency:

npm install gh-pages --save-dev
Enter fullscreen mode Exit fullscreen mode

5️⃣ Update package.json

Add a homepage field:

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

Add deployment scripts:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

7️⃣ Deploy the App

Run the deployment command:

npm run deploy
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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! 🚀

Top comments (2)

Collapse
 
mernking profile image
David •

Great article, have actually done this before with errors, I will follow this steps

Collapse
 
halogenius profile image
Christian Chi •

Thanks man