Deploy Your React App to GitHub Pages in Minutes – The Ultimate Step-by-Step Guide

Deploy Your React App to GitHub
Watch YouTube video : https://www.youtube.com/@thecoderboys7

Explanation

• Step 1: Install gh-pages, a package that helps deploy to GitHub Pages.
• Step 2: Creates a new GitHub repository where your project will be hosted.
• Step 3: Configures homepage in package.json with your GitHub Pages URL and add deployment scripts (predeploy and deploy).
• Step 4: If using Vite, configure base in vite.config.js to specify the base URL for the project.
• Step 5: Initialize Git, add all files, commit them, set the remote origin, and push your project to GitHub.
• Step 6: Run the deploy script to build your React project and deploy it to GitHub Pages

 step 1:install gh-pages 

	npm install gh-pages --save-dev

Step 2: Create a GitHub Repository

Step 3: open Package.join file 
	Paste this line:-
		"homepage": "https://Nagesh0137.github.io/Nagesh-Portfolio"

	After Script object:
		"predeploy": "npm run build",
  		"deploy": "gh-pages -d build", // vite app then add dist // npm start use build
		
  	After:-  npm run build


for vite react react app
 step 4; open vite.config file
	Past this add repo name line:-
				base:"/Nagesh-Portfolio/",


step 5: push to GitHub
		open terminal 
			1. git init
			2. git add .
			3. git commit -m "deploy react app"

step 6: open created GitHub repository
		
		git branch -M main

		git remote add origin https://github.com/Nagesh0137/Nagesh-Portfolio.git

step 7: Publish Project

		npm run deploy

Step 1: Install gh-pages

First, install gh-pages as a development dependency in your project:

npm install gh-pages --save-dev

Step 2: Create a GitHub Repository

Create a new repository on GitHub where you want to host your React project.

Step 3: Modify package.json

Open your package.json file and add the following lines:

{
  "homepage": "https://Nagesh0137.github.io/Nagesh-Portfolio",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Step 4: Configure vite.config (if using Vite)

If you are using Vite for your React project, open vite.config.js and add:

javascriptCopy codeexport default {
  base: '/Nagesh-Portfolio/'
};

Step 5: Push to GitHub

Push your project to GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/Nagesh0137/Nagesh-Portfolio.git
git branch -M main
git push -u origin main

Step 6: Deploy Your Project

To deploy your React app to GitHub Pages, run:

npm run deploy

Optional: Force Pushing Changes

If you encounter conflicts or need to force push changes:

1. Pull remote changes to your local branch:bashCopy codegit pull origin main
2. Then push your changes (be cautious with force push as it overwrites remote changes):bashCopy codegit push -f origin main