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.
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
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/)
Also delete duplicate CNAME from the DNS page else it can throw an error while adding a new 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.
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.
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:
