How to Add Custom Domain To GitHub Pages?

GitHub Pages provides a simple and free way to host static websites directly from your GitHub repositories. While GitHub Pages offers default URLs in the format <username>.github.io, you might want to use your own custom domain for branding or personalization purposes. In this guide, we’ll walk you through the process of adding a custom domain to your GitHub Pages site.

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

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 the best in the market. However 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.