React on GitHub Pages

Hiya,

So I am fairly new to React and JavaScript as a whole. I have used GitHub a bit before but never pages. I am learning how to use React currently and would like to link my GitHub pages to it. I watched a video tutorial but it hasn’t seemed to have worked out to well for me. Currently all you are able to find is a blank page, and I am not too sure what I have done wrong.

https://hampiongh.github.io/webpage/ <- 

https://github.com/HampionGH/webpage <-

There are the two links for the react app, if anyone could give me a pointer on what I have done wrong here, would be much appreciated. Thanks.

Hi @hampiongh,

Thank you for being here! React usually has a build step that will compile your site and send the output to a folder called dist/ or build/ or something similar. In order to serve this site successfully on GitHub Pages you’ll need to push only the contents of this folder—and not the whole repository—to the gh-pages branch.

There is a community-created tool that can help with this; the gh-pages npm package. Here is a nice tutorial which includes instructions for installing the gh-pages gem.

https://github.com/gitname/react-gh-pages/blob/master/README.md

And here is another that I found to be very clear.

https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48

Any time you wish to deploy your site you’ll need to run npm run deploy, and that will automatically publish the correct folder to GitHub for you.