DEV Community

Sidharth Mohanty
Sidharth Mohanty

Posted on

How to Add a Custom Domain to GitHub Pages (Hostinger Edition)

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,

CNAME records

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


Enter fullscreen mode Exit fullscreen mode

Once you've added the IP addresses, your DNS records should look like this:

GitHub IPs added

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.

Custom Domain GitHub
Success DNS Check

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


Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
ismaildns profile image
Ismail

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 just username. github.io

Collapse
 
sidmohanty11 profile image
Sidharth Mohanty

I've not tried it, but I think it should be username.github.io/reponame if reponame is not == username.github.io/reponame

Collapse
 
ismaildns profile image
Ismail

Thank you but I already solved it.

DNS CNAME records are designed to point to domain names, not to specific paths or URLs within a domain. In this case: username.github.io

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/",

Thread Thread
 
adleeafif profile image
Adlee Afif

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!

Collapse
 
limarich profile image
Richard Lima Ribeiro

Thanks! It works very well!👌

Collapse
 
mrjeanmichell profile image
Jean Michell

sweet! :) thank you.
just added mine: copycommands.com

Collapse
 
sidmohanty11 profile image
Sidharth Mohanty

Wow! Looks awesome and helpful!

Collapse
 
lucksinia profile image
Lucksinia

Hostinger is salty when I'm trying to add more then one IP... Nothing to worry about? Genuine question here.

Collapse
 
octapf profile image
Octavio Frangipani

Same for me! But added them anyway

Collapse
 
owoleya profile image
pyotrleya

are there any changes to the nameservers Hostinger uses or do I leave them as is?

Collapse
 
sidmohanty11 profile image
Sidharth Mohanty

I think if you're using Hostinger as the provider, you can leave them as it is