Blank Page after deployment

[cap-oglu]

After, i git clone my repository in another PC and make some changes on the code and run "npm run deploy" i saw blank page.
I tried everything and read the previous issues but could not find the solution.
The website works in local.

Category

Which of these applies to you? (Select all that apply)

• I'm following the tutorial as-written from start to finish in link https://github.com/gitname/react-gh-pages
• I'm using a custom domain (note: not covered in tutorial)
• I'm using React Router (note: not covered in tutorial) HashRouter

Links

Tell us where we can find your code and your GitHub Pages site:

• GitHub repository (source code): https://github.com/cap-oglu/PortfolioWebsite
• GitHub Pages site (deployed app): https://cap-oglu.github.io/PortfolioWebsite/

Everything else

The console error:

The homepage property:

The blank page:

...

[koushikromel]

Yes facing the same issue. Hope we'll get a reply...

[Yuskhosmith]

I am facing the same issue, I think it is caused by the React Router, I have deployed this same repo using gh-pages without react router, now I decided to update it and viola, blank page and 404s

[jmanuelmartinez]

Same issue here. I have followed the instructions but after deploy my user site, it shows only a blank page.

[jmanuelmartinez]

Hey guys! Good news!

I found the issue #152 and after ran "npm run build" and then "npm run deploy" the site has been deployed succesfully.

Therefore is not a routing error but a build one.

Hope it helps. My site is now running as expected.

[Yuskhosmith]

Hi,

So, I just tried it again, still the same issue, #152 mentioned that predeploy script isn't running because of yarn but I am certain that my predeploy script ran and it published. I would like to know if you're using react router as well, maybe this is as a result of code structure or something @jmanuelmartinez

[jmanuelmartinez]

Hey!

I'm not using react router, maybe that could be the reason.

[jmanuelmartinez]

Hello!

I have added react router to my project to try new things and it is giving me blank page. So going seems to be related to the project structure or how the react-gh-pages handles that routing. I will investigate more :(

[Yuskhosmith]

Alright, I have tried #132 structure by adding Browser Router to Index.js and not app.js, but it didn't work, that might be a good place to start as the PR is about react router, which is evidence that people have used it with react router :)

[jmanuelmartinez]

Hi, I have found that the cause of routing not working in GitHub Pages is that it does not allow browsing history. However, if you implement HashRouter instead of BrowseRouter, it works.

ReactDOM.render( <React.StrictMode> <HashRouter> <App /> </HashRouter> </React.StrictMode>, document.getElementById('root') );

Hope it helps!

[Yuskhosmith]

Hi, I have found that the cause of routing not working in GitHub Pages is that it does not allow browsing history. However, if you implement HashRouter instead of BrowseRouter, it works.

ReactDOM.render( <React.StrictMode> <HashRouter> <App /> </HashRouter> </React.StrictMode>, document.getElementById('root') );

Hope it helps!

This works, thanks 🫱🏾‍🫲🏾

[jmanuelmartinez]

Glad it works!

[llariola00]

Hi, I have found that the cause of routing not working in GitHub Pages is that it does not allow browsing history. However, if you implement HashRouter instead of BrowseRouter, it works.

ReactDOM.render( <React.StrictMode> <HashRouter> <App /> </HashRouter> </React.StrictMode>, document.getElementById('root') );

Hope it helps!

Thanks a lot! Fixed mine too. 😁

[GurpreetSingh-Projects]

Facing Same Issue, my old build had no router at all, but after adding react router, whoosh

[jmanuelmartinez]

Glad it worked out!

[Tathya551]

Hi, I have found that the cause of routing not working in GitHub Pages is that it does not allow browsing history. However, if you implement HashRouter instead of BrowseRouter, it works.

ReactDOM.render( <React.StrictMode> <HashRouter> <App /> </HashRouter> </React.StrictMode>, document.getElementById('root') );

Hope it helps!

Thank you very much, was stuck here since 2 days, read countless articles yet nothing worked, this worked...!!!

[JosephBARBIERDARNAL]

Worked for me too!
Additional info for those who made the same mistake than me: make sure to don't put the HashRouter twice (like one in App.js and one in index.js), otherwise changing from Browse to Hash will have no impact

[AbdulrahmanZaki]

I have the same problem but I'm just using html, css, and js. sometimes it shows me the content of the readme file