- Set a
"homepage"
property in yourpackage.json
file, and set it to"https://[your-user-name].github.io/[your-repo-name]"
. - Add a few extra
"scripts"
:"predeploy": "npm run build"
- specifies the command to build before deployment. This just runs the"build"
script."deploy": "gh-pages -d build"
- specifies which branch and directory to deploy.
- Install the
gh-pages
package withnpm install --save-dev gh-pages
- To get your app onto github pages, just run
npm run deploy
, and then your app should be running on the link you just set inhomepage
above.
- Not easy to use
BrowserRouter
withgh-pages
- until this point, haven't found a need for it, so just useHashRouter
. - If page doesn't update quickly, you can almost instantly update it by going to
...page/index
, hard refreshing the page (Ctrl + Shift + R), then going back to the root route'/'
and hard refreshing that url.- Example: if your root route is
https://<github username>.github.io/my-repo
, first go tohttps://<github username>.github.io/my-repo/index
, do a hard refresh (at this point your app should be working), then go back tohttps://<github username>.github.io/my-repo
and do another hard refresh - your app should be working - at least, this works for me.
- Example: if your root route is
- Jss (Css in javascript) doesn't easily do
content: ' '
when adding the:before
/:after
pseudoclasses - remember you have to docontent: '" "'
to actually keep the double-quotes in the string.
- Blog on codeburst.io - very useful intro steps and explanations, but didn't explain the
BrowserRouter
/ hard refresh issues I ran into. - Blog on itnext.io - has some interesting commentary about getting
BrowserRouter
to work, but I haven't tried it yet. - react-github-pages - some boiler plate code for getting a react app set up in Github Pages
- sample-react-github-pages - sample react app set up with github pages (including video link with some extra explanation)