Step 1: Prepare Your React Project
Ensure your React project is ready for deployment and all changes are committed to GitHub.
git add .
git commit -m "Prepare for deployment"
git push origin main
Step 2: Install gh-pages Package
Add the gh-pages package as a development dependency:
npm install gh-pages --save-dev
Step 3: Update package.json
Add the following fields to your package.json:
{
"homepage": "https://yourusername.github.io/your-repo-name",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
}
Step 4: Update vite.config.js
Add the base URL to your Vite configuration:
export default defineConfig({
base: '/your-repo-name/',
plugins: [react()]
})
Step 5: Deploy
Run the deploy command to publish your app:
npm run deploy
Note: After deployment, go to your repository settings and ensure GitHub Pages is configured to use the gh-pages branch.
Step 6: Verify Deployment
Visit your GitHub Pages URL to verify the deployment:
https://yourusername.github.io/your-repo-name