How to Add Custom Domain To GitHub Pages?

GitHub is an online version control system by Microsoft, where developers can host their source codes. GitHub Pages are an extension to GitHub. GitHub Pages are a wonderful and easy way of hosting websites or showcasing projects directly from GitHub. If you want to know how to deploy your static website to GitHub refer to these articles:

• How to Publish a Static Website on GitHub?
• How to Deploy Your React Websites on GitHub?

Although GitHub pages provide us free hosting and a URL. But some times if we are showcasing an important project like a business website or a portfolio then we would like to have a custom domain of our choice rather than the default one. So here we are going to see how to add a custom domain to GitHub pages or to the website we have deployed on GitHub.

Prerequisite:

The only prerequisite that needs to be fulfilled before starting is that our project must be already on the GitHub. Here we are going to add a custom domain to a website named WebRachna, which is a website making company.

Step 1: Getting the custom domain

The first step is to buy a domain of our choice. We can buy from any domain registered, usually, Google domains are considered best in the market. But I chose to go with GoDaddy because of their discount price on the domain of my choice. I got webrachna.in which will be connected to GitHub pages in the subsequent steps.

Step 2: The gh-pages branch

In this step, we will create a new branch in our project repository and give it a name gh-pages.

Now we will make gh-pages the default branch in this repository. By first going to settings and clicking the branch tab.

Now we will go the options page inside settings and scroll to GitHub Pages section. Here we will get a URL to the website that we just hosted. In this case the URL id https://ankitkj1999.github.io/WebRachna.

Step 3: Connecting domain to the website

Now we will visit the DNS management page of the domain that we have bought and below is the view of GoDaddy’s DNS page.

Here we will delete all and then add the four A type records as shown in the image below. The first four records are what we have to add.

Now we will go back to the GitHub Pages section in the settings and add our custom domain in the field asking for it and hit save. 

Then the page will reload, and we will see our custom domain in the place of the default github.io URL. Now we can see our website hosted on our custom domain. Most of the time it works quickly but it can take up to 24 hours to connect our custom domain to GitHub pages.

And if you want to host your static website on Firebase which is a comparatively better option refer to this article: Hosting A Static Website On Firebase For Free.