How to deploy commited code of react app to Github Pages

Question

I am not very good with github. I have very two doubts. I created a react app using cra and and followed steps of deployment I could find in google.

Now I have two branches main and gh-pages.

1. So I want to confirm, that main will contain my source code and gh-pages will hold build code.

2. My committed code will go to main and then I need to run npm run deploy. It will update the gh-pages?

Answer 1

Committing build files directly to git repo is not a good practice, but lets see how this could be possible first.

You have two branches in your git repository: main and gh-pages. Two branches are separated so your code committed to main branch would not update the gh-pages branch. To update the gh-pages branch, you need to switch to gh-pages branch to commit your build. But when you switch to gh-pages branch, it would not contain the changes you have committed on main branch because it was branched out from a previous commit, you must rebase first.

So your git workflow would be:

1. commit your code to main branch
2. rebase gh-pages branch onto main
3. switch to gh-pages branch
4. build your app, commit your build to gh-pages branch
5. force push your gh-pages branch
6. switch back to main branch for future commits

Instead of doing above tedious git operations, you should consider using the Deploy to GitHub Pages GitHub Actions. The build and deploy work would be done by the CI/CD systems on cloud, so you don't have to build and commit files locally.