I recently finished my portfolio website, and it was a dream come true to have a small space of my own on the internet. To make this happen, I bought a domain name from Hostinger. I was already using GitHub Pages to host my site, so I needed to add my new domain name to it.
There weren't any videos on how to do this, so I went through the documentation. The process is a bit different for Hostinger, but if you're like me and you want to set things up quickly, you can follow this blog post.
Refer to this.
Step 1: Go to your Hostinger domain DNS settings
The first step is to go to your Hostinger domain DNS settings. You can do this by visiting https://hpanel.hostinger.com/domain/yourdomain.com/dns. For example, https://hpanel.hostinger.com/domain/sidharthmohanty.com/dns.
Step 2: Delete the existing CNAME record and A type record
By default, there should be a CNAME record for your domain. This record points your domain to Hostinger's default website. We need to delete this record so that we can create a new CNAME record that points to our GitHub Pages site. Also delete any default A
type records so that there is no collision or clash.
Step 3: Create two new CNAME records
We need to create two new CNAME records. The first record will point www.yourdomain.com
to <your-github-username>.github.io
. The second record will point yourdomain.com
to <your-github-username>.github.io
.
- Enter Type - CNAME, Name - www, Points to - .github.io, TTL you can leave as default. This is for when someone types
www.yourdomain.com
. - Then we need the same for APEX domains or when someone just types
yourdomain.com
, for this enter another CNAME with Name - @ and Points to .github.io. This will automatically set an ALIAS type and add it to the DNS records.
It should look like this when added,
Step 4: Add the GitHub Pages IP addresses
Finally, we need to add the IP addresses for GitHub Pages to our DNS records. Add A type, Name - @, TTL can be left as default records for each of the following IP addresses (should be copied and pasted into “Points to”)
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Once you've added the IP addresses, your DNS records should look like this:
Step 5: Add the custom domain to GitHub Pages
The last step is to add the custom domain to GitHub Pages. You can do this by going to your GitHub repository and clicking on the Settings tab. Then, click on the Pages tab and enter your custom domain in the Custom domain field.
This should work out of the box if you’re using any “branch” to deploy your site as GitHub adds a CNAME file to the branch but if you’re using a static site generator, you need to add it manually to your public
folder.
public/CNAME
(should be capital with no extension)
yourdomain.com
Refer to this.
Once you've followed all these steps, you should be able to access your website by visiting https://yourdomain.com
.
Congratulations! You've now successfully added a custom domain to GitHub Pages.
Thanks for reading this post ✨. Let me know if you find it useful. If you'd like to see my portfolio or what I am upto, you can visit my website at https://sidharthmohanty.com/.
Top comments (11)
For this step Step 3: Create two new CNAME records, how about if my website url in GitHub pages is
username. github.io/reponame
Should the record point to
username. github.io/reponame
then or justusername. github.io
I've not tried it, but I think it should be
username.github.io/reponame
if reponame is not ==username.github.io/reponame
Thank you but I already solved it.
What I did to solve this is updating my package.json file (my website is a React app).
I updated this:
"homepage": "username.github.io/reponame/",
to
"homepage": "https://my_custom_domain.com/",
hey just wondering, aside from the updating the package.json, what did you set for the DNS setting in the Hostinger? Is it the same with the post? Thanks!
Thanks! It works very well!👌
sweet! :) thank you.
just added mine: copycommands.com
Wow! Looks awesome and helpful!
Hostinger is salty when I'm trying to add more then one IP... Nothing to worry about? Genuine question here.
Same for me! But added them anyway
are there any changes to the nameservers Hostinger uses or do I leave them as is?
I think if you're using Hostinger as the provider, you can leave them as it is