React App on Github Pages is Blank and Returns Error 404

Hi everyone,

I deployed a react app to Github Pages and apparently it was successful, but the site shows only a blank white page. The console says ‘Failed to load resource: the server responded with a status of 404 ()’. Here is my repo: GitHub - toyosicodes/memory-game. The link to the site itself is GitHub - toyosicodes/memory-game.

I’d appreciate any help. I can’t figure out what I’m doing wrong. I’ve spent hours reading topics about this issue and applied the recommended solutions, but they haven’t worked in my case.

GitHub pages only supports static sites, it does not run npm start

1 Like

I’m sorry, I don’t understand this

GitHub pages only serves files that are committed to the repository, any files that are not committed (ex: node_modules, dist) will not be available on the site and will cause a 404 not found.

Thanks for the explanation. So how can I fix the problem? Because there has to be a way to commit node_modules, right?

Upon closer inspection it seems that the issue is caused by the links to your sources. The node_modules isn’t the problem.

Take this link for example:

/toyosicodes/memory-game.github.io/favicon.ico

When you deploy the site to GitHub pages it serves it at https://toyosicodes.github.io/memory-game/, the index.html file is expecting to find the favicon at:

https://toyosicodes.github.io/toyosicodes/memory-game.github.io/favicon.ico

The correct link would be:

favicon.ico or /memory-game/favicon.ico

Any of these changes would correct the url to:

https://toyosicodes.github.io/memory-game/favicon.ico
https://toyosicodes.github.io/memory-game/favicon.ico

I really appreciate you helping me. I have to confess, though, that I have no idea how to make the changes you’re suggesting. If you could guide me on that I’d be really grateful. I forgot to add that I’m a beginner when I originally wrote the topic :sweat_smile:

The %PUBLIC_URL% inside the href/src is incorrect, take this line for example:

After building, the link changes to /toyosicodes/memory-game.github.io/favicon.ico where the site then expects to find a file at https://toyosicodes.github.io/toyosicodes/memory-game.github.io/favicon.ico, which is results in a 404 because their is no file at the link.

The %PUBLIC_URL% should instead be /memory-game, where upon building it would change to /memory-game/favicon.ico then the site would expect to find that icon at https://toyosicodes.github.io/memory-game/favicon.ico