How to deploy a React app on GitHub Pages? [Ultimate Guide]

Sharing is caring!

Introduction: React App Deployment Made Simple

Are you wondering whether to turn your project into a React app or deploy it on GitHub Pages? You’re not alone. With React becoming a standard for building modern UIs and GitHub Pages offering free static hosting, developers frequently weigh their options.

In this step-by-step guide, we’ll explore:

• How to deploy a React app on GitHub Pages
• How to deploy a Vite React app
• How to link a custom domain
• And more advanced options like Next.js deployment

Whether you’re a beginner or seasoned dev, this guide is packed with practical code, tips, and real-world use cases to help you launch your React app smoothly.

How to deploy a React app on GitHub Pages?
How to deploy an application on GitHub Pages?
How do I add a domain to React Project?
How to deploy a React Vite app?
How do I upload a vite project to GitHub?
How to deploy next.js app on GitHub Pages?

Why Use GitHub Pages for React App Deployment?

• 100% Free static hosting
• HTTPS support and fast global CDN
• Easy integration with Git and CI/CD
• Ideal for portfolios, SPAs, landing pages

How to Deploy a React App on GitHub Pages

Step 1: Create a React App

npx create-react-app my-app
cd my-app

Step 2: Install gh-pages

npm install gh-pages --save-dev

Step 3: Update package.json

"homepage": "https://your-username.github.io/my-app",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Step 4: Initialize Git and Push to GitHub

git init
git remote add origin https://github.com/your-username/my-app.git
git add .
git commit -m "initial commit"
git push -u origin main

Step 5: Deploy

npm run deploy

✅ Done! Your app is now live at:

How to Upload React Project to GitHub from Visual Studio Code

1. Open project in VS Code
2. Open terminal: Ctrl + ~
3. Run Git commands:

git init
git remote add origin <your-repo-url>
git add .
git commit -m "Upload from VSCode"
git push -u origin main

Deploy a Vite React App to GitHub Pages

Step 1: Create Vite Project

npm create vite@latest my-vite-app -- --template react
cd my-vite-app
npm install

Step 2: Install gh-pages

npm install gh-pages --save-dev

Step 3: Update vite.config.js

export default defineConfig({
  base: '/my-vite-app/',
  plugins: [react()]
})

Step 4: Update package.json

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

Step 5: Deploy

npm run deploy

How to Add a Domain to React Project

1. Buy a domain or use a free one (like freenom.com)
2. On GitHub, create a CNAME file in public/ folder:

yourdomain.com

3. Update DNS settings of your domain registrar to point to:

A record: 185.199.108.153 (GitHub IP)

4. Enable HTTPS in GitHub Pages settings

How to Deploy Next.js App on GitHub Pages

GitHub Pages is not ideal for server-side rendered apps like Next.js. Instead, use:

• Vercel (best for Next.js)
• Netlify
• Render

But for static exports:

next build
next export

Then deploy out/ folder using gh-pages.

Common Tools and Terms

npm gh-pages

A CLI tool that helps push your built project folder to the gh-pages branch.

Create React App

A boilerplate to kickstart your React projects with zero setup.

Coding Challenge: Deploy This!

Task: Create a simple React app with a button that toggles light/dark mode. Deploy it on GitHub Pages.

Bonus:

• Add your own domain
• Use useState for toggle logic
• Comment your GitHub link below!

Deploy React app to GitHub Pages
Deploy vite React app to GitHub Pages
Deploy React app to Github Pages youtube
GitHub Pages react
How to upload React project to GitHub from Visual Studio Code
Deploy React app for free
npm gh-pages
Create React app

Conclusion: Build. Push. Deploy. Repeat.

Deploying React apps on GitHub Pages is a great way to showcase your work, build portfolios, and practice real-world dev skills. Whether you’re using CRA, Vite, or exploring domain integration, this guide empowers you to take action.

✅ Next Steps:

• Explore GitHub Pages Docs
• Try deploying with Vercel or Netlify
• Share your project and grow your dev brand
• GitHub Pages Official Guide
• Deploying React on GitHub Pages – FreeCodeCamp
• Vite Docs

Tags: Deploy React App, GitHub Pages React, Create React App, Vite React Deployment, Custom Domain React,