how to update a custom GitHub Pages with create-react-app as root

Question

Hello I have read many docs online on connecting gh-pages with create-react-app. But most guides either assume that one does not already have a github pages set up, and that the react app is to be hosted as a directory (ie. username.github.io/react-app) instead of the homepage/root (username.github.io). I am hoping someone can help me out:

1. I have an existing repo for a github pages custom domain. It is currently hosting an older site I built with gulp and static html/css/js, and a CNAME file for custom url.

2. I built a new website redesign with create-react-app in a separate repo (It uses react-router for multiple pages).

3. I want to overwrite the contents of my old github pages site with my new create-react-app website as the root homepage.

Is this possible? If so, what is the best way to achieve this? Thanks

Answer 1

1. In the existing Github Pages app, remove the CNAME and/or delete master branch. Deleting master branch will remove the site, while deleting CNAME will clear up the custom domain back to default [username].github.io.

2. In create-react-app, add CNAME to /public folder.

3. In create-react-app, add line "homepage":"./" to package.json .
4. In create-react-app, run npm run build then run gh-pages -d build build process, then run npm run deploy