Create Github-Pages in create-react-app project
Jack Chen
Posted on October 28, 2020
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.
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!
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
November 29, 2024