Github pages still shows README after deploying React app

Question

I have a create-react-app project (https://github.com/khpeek/beomaps/tree/master) which I'd like to deploy to Github pages using gh-pages. Following this tutorial, https://medium.com/@serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6, I've added the following to my package.json:

However, if I run npm run deploy, it is published,

but the Github page, https://khpeek.github.io/beomaps/, still shows default content based on the README.md. Do I perhaps need to change the deploy directory?

Girovard

It doesn't now. Did you fix it? – Gamboa

Yep! It turns out you need to select the gh-pages branch as your Source in the repository's Options. – Girovard

Answer 1

In the Options page of the repository, I had to select the gh-pages branch instead of the master branch:

(I also re-installed gh-pages as a normal dependency, not a development one (i.e. npm install gh-pages --save instead of npm install gh-pages --save-dev), though I'm not sure whether this was important).

Now the page is visible on Github pages:

Girovard

Just adding that in my case I also needed to re-install gh-pages as a production dependency, and that was what did the trick. – Redevelop

npm install gh-pages --save-dev doesn't matters for me – Antefix

in my case I only chose that branch and it was resolved. Thanks ! – Bring

this worked for me, so +1. One thing to note though -- it takes some time for the change to actually reflect. So may be wait for 15 mins before retrying. – Carbonyl

Answer 2

I think this has to do with github not knowing which branch it should use (master vs main or idk). Changing my deploy script as follows solved the issue for me:
"deploy": "gh-pages -b main -d build"
This tells github pages that it should use branch main.

Bayne

At first after pushing this change and deploying, I got the "404" page on GitHub pages - not even a README! But after a few minutes it resolved to my app. Also, I had this problem twice. For the first app I set my branch name to master locally and then pushed the repo. But gh pages really wants your master branch name to be "main". I had to delete the first app because nothing worked to publish it properly. – Penguin

Answer 3

I had the same error even after selecting gh-pages branch, but then I again changed it to master branch and it worked!!!

Helbonnah

Answer 4

In my experience, it was simply a latency issue. I was able to see the correct page, after few minutes.

Incredulous

Answer 5

I had the same problem - when I deployed my React app to GitHub pages, it showed the README.

Then I pushed the build directory I had created locally to my remote repository. When I did that, my React app worked with GitHub pages.

Internee

Answer 6

if you with gh-pages, you have to select it as defualt branch for this repo. It worked for me.

Lightfooted

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Chenee