Deploying and updating a React App to Github Pages correctly

Question

When I deploy my React App to Github Pages with 'npm run deploy' I am consistently running into a 404 'File not found'. The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.

One concern I have here, is finding that other operational Github Pages repositories only contain the build folder in their 'gh-pages' branch, not the rest of their source code. A second point of confusion, is that on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.

So, my questions are:

• Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
• Can you describe a process to update the site once it's up?

If you want to check out my repository, you can find it at: https://github.com/edmundweir/doe-website

And the site I am trying to get live is: https://descendantsofearth.com/

Any help on the matter would be immensely appreciated as I am 500 metres down a troubleshooting rabbit hole and my flashlight has run out of batteries.

With thanks, Betty.

Answer 1

TLDR: Delete the gh-pages branch on GitHub and then run npm run deploy.

404 'File not found'

This is happening because your gh-pages branch does not have an index.html file at the root and you didn't specify a source folder to use in the GitHub Pages settings. A quick remedy here would be to set the source folder to be /build, but that won't achieve the setup you're looking for with the gh-pages npm pkg.

The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.

This is the root cause of your issue. Your deploy npm script is currently set to commit the contents of the build folder only to the gh-pages branch. The package will manage this branch for you as a branch with a completely separate history from master.

on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.

Possibly it worked when you ran your deploy script and then you later broke it by manually pushing to the branch?

Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?

The package is handling all of this for you, which is really cool. For some history - when GitHub Pages first came out - the instructions were to create an orphan branch where you would push your static build to, manually. Note that there are a few ways to achieve this though.

Can you describe a process to update the site once it's up?

master should not contain your static build, just like it doesn't contain node_modules etc. You should add build to your .gitignore so that it doesn't get committed. That way you're only committing the actual source code - which minimizes the size of your code base and gives you a clean revision history.

Whenever you want to "deploy" your changes, you should run npm run build to build your static app from your source code and then npm run deploy to have gh-pages push your static build to the gh-pages branch (which GitHub Pages will then use for your site).