Introduction

Recently, I have been building a lot of websites using react. When it comes to hosting a site for free there are numerous platforms like GitHub, Heroku, firebase etc.(depending on the type of site). Hosting a plain HTML, CSS site is pretty easy on GitHub, just dragging and dropping all the files and changing the source to main in the GH-pages section.

But hosting a site built using react can get much more tedious, dragging and dropping files in the main branch won't help us this time.

In this blog, I will be sharing with you a much easier way to publish/host a react built site on the GH-pages, I prefer using this method.

Prerequisites

There are a few requisites before going any further:-

We need the GitHub desktop app, which you can download from here.
After installing the app sign in to your GitHub account. Refer to this for help regarding signing in.
Now, we need to create a react app in Vs Code
```
npx create-react-app my-first-website
```
Once we see Happy Hacking! in our terminal we are good to go.
Now we have to link this "my-first-website" folder to the GitHub desktop app and create a repository.
Click on the file in the upper left corner of the app and click "Add local repository".
After clicking on add local repository, the path selection dialogue box will appear. Click chose and select the "my-first-website" folder that we created.
Now we have all our setup ready for publishing our first react site on GH-pages. Horray!
After creating our repository our GitHub desktop window will appear like this -

Publishing the site

Assuming you have already coded your site.
Once you are done with coding and all GitHub desktop will appear like this -
After all the changes are done define the commit and click commit to master in the left corner.
Then click publish to the repository after committing to the master branch.
After clicking publish the following dialogue box will appear-

Do not forget to uncheck "keep this code private".
Once you have published your repository, you can access your repo on -

github.com{yourusername}?tab=repositories.
The next step is to deploy the app by installing gh-pages in our directory.
For that get back into vs code terminal where you have created your project and then type
```
npm install gh-pages - save-dev
```
Open package.json file and check whether GH-pages are installed in your dependencies.

Now add deploy scripts to package.json file

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

Now add the homepage property and change the private property to false
Now type "npm run deploy" in the terminal
```
npm run deploy
```
Now in your browser go to the repository settings and click gh-pages in the left side panel.
In pages -
Now we have successfully published our react app on gh-pages which can be accessed using the domain provided by GitHub. Site here.

Time to switch to a custom domain

Assuming you have purchased a domain from any platform like Cloudflare, GoDaddy, Hostinger, google domains etc.
Go to your domains. Select manage Domain against the domain you just got and head to Manage DNS for your respective domain.

Now, we need do is set A records for the domain you have selected.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Once you have edited your A records and synced the DNS with GitHub we are ready to enter our custom domain in the custom domain section.
After entering click on save and wait for a while GitHub checks the DNS, once the DNS check successful text appears, you have finally hosted your react app using GitHub on a custom domain!
Sometimes it may take a while for A records to update and DNS check, but most of the time, it happens within a few minutes. Sit back and relax till then.
Congratulations ! 🥳🙌 Your site is now live on your custom domain.

Summary

In this article, I discussed with you a very simple and easy way to host your react-app/site using gh-pages on a custom domain. This is a very simple and easy method that I use all the time.

Hope this article helped you solve all your doubts.

For any code-related help feel free to get in touch with me on Twitter or email. You can also @ me on Twitter using (@tanishhire5).

Outro:

That's a wrap.

I hope you found some value in this post.

Feel free to connect with me on Twitter.

I create content about:

Web Development
Technical Writing
Web design
Code vs No-code

Thanks for reading my blog, and see you in the next one.

Tanish Hire's Blog