Custom domain using create-react-app for github pages

Question

I'm not sure what I'm doing wrong. i've followed all the steps to set up a custom domain name, but maybe I'm missing something.

I followed the steps in this article so my settings look like this:

A Record @ 192.30.252.153 Automatic
A Record @ 192.30.252.154 Automatic
CNAME Record www myusername.github.io. Automatic

I added a CNAME file which only has my domain name in it.

I added the CNAME file to the public folder of my react app as the instructions here state.

I went to my github settings and set the domain name. It currently has a checkmark saying that my site has been published.

Going to my site here gives a 404 error. What else am I supposed to do?

Answer 1

I had a similar issue when trying to set a custom domain with create-react-app on a github project page.

An easy solution worked for me is:

1. Add a "CNAME" file in the "public" folder with only the domain in this file(start with "www" without "https://");

2. Change the homepage in the "package.json" file from "https://xxx.github.io/xxx" to your domain that you put in the "CNAME" file with "https://";

3. In Git Bash, follow the basic steps 'git add .', 'git commit -m "change"', 'git push origin master' to update the changes;

4. In Git Bash still, run "npm run deploy", then type the domain in your browser (clear previous history), it should show up the lovely "welcome to React" page.

Regards,

Answer 2

It is definitely not giving a 404. It seems some of the links to your loaded js/css files are malformed, but the index.html is loading just fine.

You should keep in mind that your ISP and your computer both try to cache information about where a given domain name should route to. This can sometimes mean that the path to the destination IP is cached and will show you the out of date resource immediately after a new CNAME is added.

Most ISPs guarantee a refresh of the related cache within 48 hours. If you need to check faster than that, I would try to find a different internet connection and device to use to access the page after you have everything set up. Smart Phones are invaluable for this, just make sure the wifi is turned off.