3 min read

Moving The Blog to The New Domain

Moving The Blog to The New Domain
Photo by Théo Dorp / Unsplash

Yesterday I got a notification email saying my blog domain: agung.io will be expired soon. I planned to renew, however the price is quite hefty: 60 USD (around IDR 900k), double in price than my first year of renting this domain.

Since I want to keep my blog setup cost as low as possible without sacrificing many things, I excercised how easy it is to move my blog to a new domain. So, I purchased new cheap domain agung.tech with only USD 3 for the first year in GoDaddy. There are 2 outcome from my experiment of migrating this blog to new domain:

  • either it is really painful and error prone process, hence I would keep paying the 60 buck to continue using agung.io domain, or
  • it is relatively easy, so it is better to use the new agung.tech domain for this blog

Result

It was super easy and quick. In fact, I managed to migrate this in 1-2 hours. The migration process basically involved few configuration changes. It also worth to mention that my blog content doesn't have any hardcoding of the blog domain to link resources (e.g: image resources).

The Migration Process

To give you some context, I use:

  • GitHub to put my blog content, using hugo
  • Netlify to host the blog. Domain agung.io is also managed within the Netlify.
  • New domain agung.tech is purchased on GoDaddy.

Transfer DNS Control from GoDaddy to Netlify

Just to be clear, the main reason why I delegate the DNS control to Netlify is to keep my life simple. Rather than managing the DNS from GoDaddy, but using Netlify to manage the blog, I'd instead choose Netlify for both.

The easy way (I would say the only way, but CMIIW) to do this is by configure the NS record of agung.tech in GoDaddy to Netlify's nameservers.

Note that this can take some times to propagate. To check it:

dig agung.tech -t NS

When it is already reflected, in the ANSWER SECTION it should print out the new nameservers.

;; ANSWER SECTION:
agung.tech.             3600    IN      NS      dns1.p04.nsone.net.
agung.tech.             3600    IN      NS      dns2.p04.nsone.net.
agung.tech.             3600    IN      NS      dns3.p04.nsone.net.
agung.tech.             3600    IN      NS      dns4.p04.nsone.net.

Then, I added agung.tech in Netlify domain setting so I can start configuring the DNS there.

Points blog.agung.tech to My Netlify Blog Domain

By default, Netlify will give your blog the netlify.com domain. For instance, my blog domain is agung.netlify.com.

So I added CNAME record of blog.agung.tech to agung.netlify.com. This basically means that agung.netlify.com is the canonical name of blog.agung.tech, hence will return the same IP location

Configure Netlify Custom Domain

In order for Netlify able to route the new domain to my site, I added blog.agung.tech in the Custom Domain list. Even I set it as Primary Domain.

Change Hugo BaseURL

In the config.toml, it was set to

baseURL = "https://blog.agung.io/"

I changed to

baseURL = "https://blog.agung.tech/"

Now, I can access my blog via the new domain.

However, there is one more step to properly routing someone who access my blog via old domain to the new domain.

Redirect Old Domain to New Domain

Beside setting the old domain CNAME to blog.agung.tech, I also modified Netlify _redirect file

https://agung.netlify.com/* https://blog.agung.tech/:splat 301!
https://blog.agung.io/* https://blog.agung.tech/:splat 301!

Basically that will redirect agung.netlify.com or blog.agung.io to my new domain.

That's it. Quite easy right :D

References:

Published by:

Agung Pratama

Member discussion