2

I'm just starting with react and I built my first application and now I'm trying to deploy it on github pages but the page is completely blank. The steps I followed are:

  1. Install gh-pages: npm install gh-pages --save
  2. Add homepage to package.json: "homepage": "https://milind452.github.io/my-reads/"
  3. Add scripts: "predeploy": "npm run build", "deploy": "gh-pages -d build"
  4. Deploy: npm run deploy

I can see that the gh-pages branch is created and a deployment is also created; but the page is blank and nothing shows on the console. I checked the sources in the dev-tools and all the files are there.

I also checked my repo pages settings and the source for deployment is set to gh-pages branch. I'm not sure what is happening.

I also checked out this stackoverflow question but none of the answers there seemed to solve it for me.

Here is the github repo and the deployment link

Improve this question

2 Answers 2

Reset to default
7

Never use BrowserRouter on GitHub Pages. There are some issues with it, it always shows blank screen. Use HashRouter instead, that will most probably work.

import { HashRouter } from "react-router-dom";

// some code here

return (
    <HashRouter base="/">
        <App />
    </HashRouter>
)
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks @tomasxboda Using HashRouter worked but it shows a '#' symbol in the url. Is there any way around this?
Unfortunately, I don't think there is. However, if you are planning to deploy your app in the future, you can use the original BrowserRouter almost everywhere. The only place where it does not work is GitHub Pages, so you'll have to stick to HashRouter for now.
Glad I could help!
I've tried using HashRouter instead of BrowserRouter, but I'm still getting a blank page with error "Failed to load resource: the server responded with a status of 404" Any idea how to fix this please ?
1

The create react app documentation says that:

GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

  • You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.

Therefore you should use hashHistory if you want to host your site on GitHub Pages. Here is the link to documentation.

If you don't wish to change router, try deploying it on Netlify which is also another free hosting provider. But again for Netlify deployment, follow the documentation, which says:

To support pushState, make sure to create a public/_redirects file with the following rewrite rules:

/*  /index.html  200
Improve this answer

1 Comment

I added the public/_redirects file with the given rule but the netlify deployment did not work. It shows a blank page. Here's the netlify deployment link. For the deployment settings I did not change anything and left the default settings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.