Hello Sunil
custom-domain-with-github-pages-feature-image

How to Use Custom Domain With GitHub Pages

GitHub Pages are an extension to GitHub and is 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 article:

Also Read: How to Publish a Website on GitHub Pages

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.

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 my personal portfolio.

Step 1: The first step is to buy a domain of our choice. We can buy from any domain registered. But for this tutorial we are going to us GoDaddy.

Step 2: 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.

GoDaddy’s DNS page

What’s an A Record?

An A record (Address Record) points a domain or subdomain to an IP address.

For example, an A Record is used to point a logical domain name, such as “google.com,” to the IP address of Google’s hosting server, “74.125.224.147”.

This allows the end-user to type in a human-readable domain while the computer can continue to work with numbers.

Manage DNS

  • In the DNS provider’s console (GoDaddy in our case), create four A records and one CNAME.
  • In GoDaddy and a few other DNS providers, you will have to specify @ in the name (Leave in black in AWS Route 53).
  • IP addresses for four A records:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Four A records added to GoDaddy's DNS page

Note: These can change over time; refer to the documentation.

Now create a CNAME record to point www.example.com (in our case – www.sunilpradhan.com) to <GITHUB-USERNAME>.github.io (in our case – https://sunil-pradhan.github.io/)

CNAME pointing to github pages

Also delete duplicate CNAME from the DNS page else it can throw an error while adding a new CNAME.

delete-existing-CNAME

What’s CNAME?

CNAME records are used to create aliases for your domain.

For example, if you have a website at www.example.com, you can use a CNAME record to set up an alias such that if someone types in www.example.com/blog, they will actually be taken to blog.example.com—instead of being taken to the root domain itself (www.example.com).

You can also use CNAME records to set up redirects between different versions of your website or app or between different subdomains on the same site.

Users can create a CNAME record for their domain www.example.net pointing to the server www.example.com.

Step 3: Head to the Settings tab of the repository and then click on Pages from the left side.

Scroll down to where it says Custom domain section and enter your domain name and hit save.

Enter your custom domain name under github settings page

This adds a new CNAME file to your repository.

Step 4: Now confirm CNAME and A records by running dig www.example.com +nostats +nocomments +nocmd;

It should return the four 185.x.x.x IP addresses and one CNAME with <GITHUB-USERNAME>.github.io

Or you can use dnschecker website to confirm DNS entries.

Kindly note that this can take between an hour to 24 hours for the DNS entries to resolve/propagate.

dns-check-in-progress
dns-not-resolved

Step 5: Once DNS is resolved then check enforce HTTPS checkbox.

Sometime the checkbox takes time and is not clickable, and it can take as long as a day at times.

After you Enable HTTPS, once again, it can take between 1 hour to a day.

Here is our final result:

website is secured by https on github pages

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.