If you want to have a custom domain for your blog deployed on Github Pages, let me help you. As a reminder, we previously talked about how you can setup your blog for free. If you haven't read it yet, here it is 👉 Creating your tech blog ✍️.
If you already own the domain you want to use, you can just skip this part. For those that don't and are pretty new everything that falls into buying a domain name and things like setting up DNS, etc. Let me share with you my experience so you want have to fight like I did 😅. You have noticed that I said "buying" but this process can work also if you can acquire it for free. Here goes a list of things to consider for your domain.
Github pages only works with apex domains and subdomains. Simply put, an apex domain is a root domain without any prefix usually composed of 2 parts like
code4life.io. A subdomain however is an apex domain with a prefix. The usual subdomain you run into the web is
www. As example
www.code4life.io is a subdomain of
code4life.io. So make sure that wherever you gonna find your domain, it will be one of these two types and that you can customize its DNS settings (really important ⚠️).
Now this is a trap for the uninitiated. You see, domains cost vary of course following the extension you want,
.net, etc. but that's not just it. In fact, there are two main types of cost to consider when buying a domain, the initial cost (first time you buy it) and the renewal cost. Yeah, domain names actually expire unless renewed for those that didn't know.
Many domain name providers will give you initially a domain name at a fairly low cost but the renewal cost will be too high (I've seen one with
1$ as initial price but
99$ for the renewal 💀). So my advice is to use a domain name price comparator to find the one that will be appropriate for you. For this blog, I used this one, after having choosed the .io extension of course.
I think it's an important think considering spammers and identity thiefs out there. There are some domain name providers that offers WHOIS Privacy which is basically hiding the information of a domain name owner from public database. Some providers may charge additional fees for this service so be on the lookout.
Well mine is free because I went to Dynadot.
Now that you've found yourself a domain, let's go through the 2 steps of linking it to your Github Pages repository.
To tell Github that the domain of your blog should be the one you just acquired, you just have to create a file called
CNAME at the root of your repository containing only one line that specify your new domain.
And that's it for Github, you're done.
Github knows that your blog will be available at your domain but your registrar doesn't know anything about your repository yet! So you should configure your domain DNS so that when someone tries to browse it, it will serve him your deployed Github pages. And this is done by adding in your domain configuration, 4 entries of A record as stated by the docs. Now where to do that configuration is will depend on your provider. It will be somewhere in your dashboard, just look for it. As a helper, here follows the for IP addresses to add as A record entries:
This configuration may take some time to apply depending on your provider and to know if it's active, go to your repository settings in Github and look for something like this 👇
If you've seen a green alert on your repo settings that says
Your site is published at http://your_domain_name.extension
Then Congratulations. Click on that link and be amazed 😎.
Another thing magic is now whenever someone tries to reach
username.github.io, he will be automatically redirected to your domain.
I know you're happy but there is a last thing to do. Your blog is directly linked to the root of your domain so when people put in there browser the subdomain
www.your_domain_name.extension, they want get an answer ! So you need to add another DNS entry in your domain configuration. This time, instead of an A record, you will use a CNAME record and when it will ask for an URL, put
username.github.io. This is basically an alias for your Github pages repo. Now when someone want the subdomain www of your domain, it will get redirected to username.github.io which will again redirect him to your root domain without even him noticing 🙌.