Github won't let me change the source of my personal website to gh-pages branch?

Question

I made a personal website using github pages a while ago but recently recreated it from scratch using ReactJS. I changed the name of my old website repository and made my new one username.github.io and moved the CNAME over. I then started following:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#github-pages

I'm stuck, however, on step 4 where I'm supposed to change the source to gh-pages branch. The option to change it is not clickable and right below it says "User pages must be built from the master branch".

My thoughts are that this is because my repository is named username.github.io thus being a user page. I'm guessing the tutorial may be specifically for a project pages? I also originally had a custom domain if that makes a difference. I think maybe the problem might be that my homepage is not set correctly? I was a bit confused on how the homepage should be set up since my app (repository) is named username.github.io. I tried username.github.io/username.github.io and username.github.io for homepage on my package.json but it just publishes my ReadMe.

Answer 1

That tutorial must have been done without taking into account user pages: see August 2016 ("Simpler GitHub Pages publishing").

Nowadays, the publication is done directly from the master branch (or the docs folder of the master branch) for a user page (not a project page)

As mentioned in facebookincubator/create-react-app issue 2976:

You can keep source in another branch, and copy contents of build folder to master branch after every build.
I don't think there's anything special you need to do—just more manual steps.
Maybe you could automate it somehow.

Answer 2

VonC's answer is correct. I wanted to, however, clarify and also add on to his answer. The build process for your project will build to a folder (dist/build/etc) that contains an index.html file. Github is looking for this file which in turn looks (most likely) for other files such as style sheets, media, and whatever else you use to build your website.

What VonC is saying is that you can literally just copy and paste necessary files over to the root (what appears upon opening the project folder). Push this and it should work.

However, this is not the ideal solution. You'd have to manually move it over every time you want to build. The way to automate this process is by using symlinks to connect the files in the root to your build folder. This isn't really ideal either but it works!