Create Github-Pages in create-react-app project

chenchengxing

Jack Chen

Posted on October 28, 2020

Create Github-Pages in create-react-app project

Today I tried to create a gh-page for my minesweeper project. Nothing fancy but I just want to publish it somewhere. It turns out to be pretty easy to do that and it was a success. Result is here.

Search around

I thought it's only possible to host only one github page under one account name, like jackchen.github.io. But I was wrong, according to https://pages.github.com/.

In fact any github user can have unlimited project sites.
GitHub_Pages___Websites_for_you_and_your_projects__hosted_directly_from_your_GitHub_repository__Just_edit__push__and_your_changes_are_live_

npm package gh-pages

The next step will be creating a new branch that contains all the static files.

But it doesn't sound right to do it manually.

Then I found this https://www.npmjs.com/package/gh-pages .

Basically, gh-pages will help you push files under some certain folder only to 'gh-pages' branch(configurable).

Just do it

So it seemed pretty straightforward until I hit something..

BTW, I'm using create-react-app for my project.
I went yarn run build, then run the gh-pages script. So all my build folder went to the correct branch.

But the site didn't work.
I found that the index.html was loading correctly but not other resources. So I can tell something is wrong in PUBLIC_URL.

By running, according to creact-react-app documentation, to PUBLIC_URL=. react-scripts build did work!

can it be better?

Yes.. I found this https://create-react-app.dev/docs/deployment/#github-pages

It turns out create-react-app has already got it covered. Amazing!

💖 💪 🙅 🚩
chenchengxing
Jack Chen

Posted on October 28, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related