Blank page after deploying to github pages

Question

Here are the steps I did to deploy to github pages:

1. Install the gh-pages package as a "dev-dependency" of the app

   npm install gh-pages --save-dev

2. Add homepage property "homepage":

   "http://{username}.github.io/{repo-name}"

3. Deploy script

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

   npm run deploy

4. Setup source to the gh-pages branch.

I go to the link and find a blank page with an empty console. I've looked around and everyone suggests these 4 steps, and nothing seems to work. I use npx create-react-app to setup my React application. Here is the link to my repository: https://github.com/yuivae/yuivae

Please let me know if you have any suggestions

Answer 1

2 minutes I posted this thread I found the answer. I needed to change the react-router-dom path setting from <Route exact path="/" component={Home} />

to

<Route exact path="/{app-name}" component={Home} />

because when deploying to gh pages by default I change / homepage path to the http://{username}.github.io/{repo-name} After making this change I pushed, commited and deployed again and 10 seconds later it worked.