How to Host a React App on GitHub Pages with a Custom Domain.

Many platforms allow us to Host a React App for free that developers like us need most for resume and portfolio websites to showcase our talent to the world and GitHub Pages is one of them.

Github, as we know is a website and a Cloud Service Provider which helps many developers save their code online, share it with other people, and can have a log of everything they have done up till now with that code.

GitHub has its hosting service that is called GitHub Pages. According to the official documentation – “GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub”.

Hosting a simple HTML, CSS website is very easy, but hosting a react app is a whole different story. For hosting a react app, you need to have a production version of it, and hosting on GitHub is no exception.

This blog will only tell us how to host our React Apps using GitHub Pages for free, assuming that you have prior knowledge of Github like making a repository on GitHub and adding your Content on it, as it will not explain that in detail.

Index

1. Creating a repository and storing the source code in it
2. Adding HomePage in our App
3. Installing GitHub Pages
4. Deploying the App
5. Adding a Custom Domain

Step I – Creating a Repository and storing the source code in it

As told already, this blog will only focus on deploying our React App on GitHub for free and with a custom domain and will not explain working on GitHub from scratch for that, visit this blog here.

Step II – Adding HomePage in our App.

For starters, let’s add the homepage link to our App through which the App will be available and accessible by others.

We just have to add the above-given code of the home page in our package.json file like this –

This link can be shared by us to others for showing off our works but only after it’s deployed.

There are certain changes that you have to make in the above link to make it active – 

1. Replace ‘myusername’ with your ‘name’
2. Replace ‘my-app’ with the name of the App

Step III – Inserting GitHub Pages

Installing GitHub Pages is very important as this way we can have it as one of our dependencies in the package.json file. 

Choose the code that best describes the type of package you are using either NPM or Yarn. We can make it one of our dependencies with any method.

After installing gh-pages, check for it in the package.json file 

Step IV – Deploying the App

The deployment phase starts with the addition of two lines of code in our package.json file as shown – 

The lines with the star at the beginning will be added in the same way as shown.

npm run deploy

The following command will make a production version of our App which will be called build and will be there in our App directory.

This folder contains the static code of our App that will be deployed and hosted by GitHub.

Finally, the moment has come when we will see our deployed App. But before that, we have to check whether GitHub pages have been selected in our project on GitHub. 

Go to the Settings, select Pages from the left menu in the GitHub Repo. There will be a link available for us that contains the hosted site. Just wait for some time and click it to see our deployed site.

In most cases, this step is automatically completed but for some reason, if that is not the case, do it manually by selecting the gh-pages branch as shown in the above image.

If there are changes to the site after deployment, run the same command npm run deploy after saving and pushing the changes to the repo, the site with all those changes will be hosted.

Step V – Adding a Custom Domain

We have our site published and ready to be shared for showcasing our skills, but there is still one problem – the domain. Our site has the default domain name given to us by Github.

There is an option where we can change that link and add our custom domain which we have bought from any hosting provider like GoDaddy, Hostinger, etc., and add that domain name in our repo and on GitHub pages to let Github Know that we are giving our site a custom domain.

This blog will not cover the part where you buy a domain and set it for hosting on GitHub, but you can read about it here, it will only cover the rest of the steps that include how to integrate how domain with your site.

Step V(A) – Adding a CNAME file

In our GitHub repo find an option to add file in the root folder, and then create a new file.

Enter the file name as CNAME and write your custom domain name in the text box provided below, and hit the commit new file button without doing anything else.

Here example.com will be replaced by your custom domain name.

Step V(B) – Adding the Custom Domain Name in GitHub Pages

Head towards the settings page of our GitHub repo and select the Pages tab from the left sidebar.

This CNAME file can only contain one domain and should be the bare minimum of your URL, like www.example.com or example.com rather than http://example.com.

Here, you will see a text box for adding a custom domain. Enter the domain name and click save and also check the Enforce HTTPS box as it will provide a free SSL certificate but may take some time depending upon the provider.

With this our App is now hosted with a custom domain name and a free SSL certificate on the web and now can be accessed by anyone around the world.