└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | # Deploying a React App to GitHub Pages
2 |
3 | ## 
Introduction
4 | This guide walks you through the process of deploying a **React.js** project to **GitHub Pages** in a few simple steps.
5 |
6 | ## 
Prerequisites
7 | - A **GitHub account**
8 | - **Node.js & npm** installed
9 | - A **React project** (create one using `npx create-react-app my-app` if needed)
10 |
11 | ---
12 |
13 | ## 
Install `gh-pages`
14 | First, navigate to your React project folder and install the `gh-pages` package:
15 |
16 | ```sh
17 | npm install gh-pages --save-dev
18 | ```
19 |
20 | ---
21 |
22 | ## Update `package.json`
23 | Modify your `package.json` file to include the following fields:
24 |
25 | ```json
26 | "homepage": "https://your-github-username.github.io/your-repo-name",
27 | "scripts": {
28 | "predeploy": "npm run build",
29 | "deploy": "gh-pages -d build"
30 | }
31 | ```
32 | 🔹 Replace `your-github-username` with your **GitHub username**
33 | 🔹 Replace `your-repo-name` with your **repository name**
34 |
35 | ---
36 |
37 | ## Initialize a Git Repository (If Not Already Initialized)
38 |
39 | ```sh
40 | git init
41 | git add .
42 | git commit -m "Initial commit"
43 | git branch -M main
44 | git remote add origin https://github.com/your-github-username/your-repo-name.git
45 | git push -u origin main
46 | ```
47 |
48 | ---
49 |
50 | ## Deploy the App
51 | Run the deployment command:
52 |
53 | ```sh
54 | npm run deploy
55 | ```
56 |
57 | This will build your React app and push the **`build/`** folder to the `gh-pages` branch on GitHub.
58 |
59 | ---
60 |
61 | ## Enable GitHub Pages
62 | 1. Go to **GitHub Repository → Settings**
63 | 2. Scroll down to **Pages**
64 | 3. Under **Branch**, select `gh-pages`
65 | 4. Click **Save**
66 |
67 | Your React app will be live at:
68 | **`https://your-github-username.github.io/your-repo-name/`** 
69 |
70 | ---
71 |
72 | ## Fixing Routing Issues (Optional)
73 | For React Router, add this to `public/index.html`:
74 |
75 | ```html
76 |
77 | ```
78 |
79 | Or use a **redirect file** (`public/_redirects` for Netlify users).
80 |
81 | ---
82 |
83 | ## 
Conclusion
84 | Now your React app is deployed on **GitHub Pages**!
85 |
86 | Let me know if you need any clarifications or additional steps! 
87 |
88 |
89 | ## 
Show Some Love!
90 | If you liked this, consider giving it a ⭐ and following me! 🚀
91 |
92 | [](https://github.com/aman-khan001)
93 | [](https://www.linkedin.com/in/aman-khan001/)
94 |
95 | 
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------