How can I setup GitHub Pages to host my React App? Other free options?

Question

I have been trying to figure out how to host my React App on GitHub Pages. I found these two guides, but neither seem to work:

https://github.com/gitname/react-gh-pages

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

The first guide seems to only work with a pre-made React-App (step 2 of procedure). On the other hand, it seems to work correctly otherwise. The issue with this guide for me is that I made my app from scratch, so I don't have the same names for codes. For example I had to use (because dist/ is my build path):

"scripts": {
    //...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist/"
}

The other guide seems to have the same issue (not custom app), but I'm not sure because I don't recognize all of the code. Since a lot of the code is different, for example they have:

“scripts”: {
    “start”: “react-scripts start”,
    “build”: “react-scripts build”,
    “test”: “react-scripts test — env=jsdom”,
    “eject”: “react-scripts eject”,
    “predeploy”: “npm run build”,
    “deploy”: “gh-pages -d build”

}

When I deployed gh-pages, a different branch was built in my github repo, but I'm not sure if it's supposed to be working automatically. Essentially, I'm kind of new to this, so I'm not sure what I'm doing wrong. I'd really like to finish creating this website with GitHub Pages because it seems that I am close, but if this is futile, is there a free alternative that would be easy to setup?

Here is a link to my github master branch: https://github.com/NumaKarolinski/PersonalWebsite

I think by looking at my package.json, and webpack.config.js, it should be obvious as to what I am doing differently from usual?

I don't get any errors when following the guide, but the intended URL just has a 404 error. There are no errors in the console (except on Chrome which has a favicon.ico error which doesn't make much sense since I don't have a favicon).

Answer 1

For your other options i prefer firebase for reactjs app.Just follow this steps to deploy app build to firebase.

install firebase cli
cd to project
npm run build
firebase init
firebase deploy  

and you are done.Hope this help

Answer 2

In the examples you linked, they are using create-react-app as a boilerplate, that's why it looks so different. All the build scripts are given to you. I would recommend using create-react-app for small to even medium size projects, and you can always eject to config the boilerplate if needed. Github pages are probably the easiest option around, but you are really close.

Option 1:

You need to create a build directory, and push that directory to a Gitbub branch and have Github host that branch for your website. To do that, you will need to go to settings in that repo and set it to use a different branch. Just make sure only built app is in that branch. Basically, all your js files should be compressed into one file and etc.

Option 2:

You have a pretty small app, just create a create-react-app and copy everything over, and then follow the instruction again for deployment.