Recently I tried deploying my portfolio web made from React to github pages with the url user.github.io/portfolio-web but when it got deploy, my pages (/contact or /about) got defaulted into usesr.github.io/about.
What I have right now is:
user.github.io/about
What I want is:
user.github.io/portfolio-web/about
Sample of my React code:
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/about" element={<AboutMe />} />
<Route path="/contact" element={<Contact />} />
<Route path="*" element={<NotFound />} />
</Routes>
In the package.json I already add the "homepage": "https://user.github.io/portfolio-web",
I tried reading the documentation and searching stack overflow but I don't know which keyword I should use for this search.
I assume you have installed gh-pages:
npm install gh-pages
You need to have something similar in your package.json, right?
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
},
This script will build your React app and then deploy it to the GitHub Pages repository.
As you want to make changes to the routes in your React project, you will need to deploy:
npm run deploy
This will create a gh-pages branch in your GitHub repository with the necessary files to serve your app from the desired subdirectory path.
Oh, and I forgot the most important thing... have you configured your project in Github as gh-pages? If not, go to your GitHub repository settings, scroll down to the GitHub Pages section, and ensure that the branch is set to gh-pages.
If you have any further issues or questions, please let me know.