Yes, hosting your react website like regular HTML and CSS websites with GitHub pages is possible. And that is what I am going to cover in this article. So let's begin.

1. Create a GitHub repository

First, create a GitHub repository to upload your files. If you still don't have any account then sign up now.

After you've clicked on create a new repository, you will get a page where you will be asked to provide information about the repository.

Fill in the name of the repository and choose the visibility as public and leave the rest of all the fields as they are. If you are a pro user of GitHub then you can also choose private otherwise GitHub pages are only available for public repositories so please choose public. Then simply hit that create repository button.

2. Push code to GitHub repository

After you have created a repo, you now need to push code to the repo. There are two ways to do that:

• Drag and drop files
• Use the git commands

Note: If you are planning to drag and drop files then maybe you want to do that after the next step. Otherwise, just use those good old git commands.

3. Configure package.json

Add this line to your package.json file

  "homepage": "https://myusername.github.io/my-app",

Be sure to replace myusername with your username and my-app with your repository name. After changing your package.json file should look like this:

4. Install gh-pages package

Next, you should install gh-pages with either of the following commands.

For NPM:

npm install --save gh-pages

For Yarn:

yarn add gh-pages

And add these lines inside of your script:

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"

And your package.json will look like this:

5. Deploy

Deploy the app by running this command:

npm run deploy

Unfortunately, if you are trying to make things work with just drag and drop then please keep in mind that the process will get over complicated. I advise you to go with the good old git terminal. You can still do with drag and drop by creating a new branch and selecting that branch, I am not saying it is impossible but it is terribly possible.

At last, you will see a message that says Published, if you see that then congrats your site is published. But it may take some time to reflect.

Maybe you're thinking where you can find your react app, right? Then let me tell you my little friend, the URL of your website is on your package.json file. The homepage property you set is your website's URL. In my case, it is https://aashishpanthi.me/react-gh-pages-deploy/.

If you get stuck in any of the above steps then you can follow this video tutorial or feel free to ping me anytime.