Getting into a new home could be excited!
You’ve scoped out the location, you’ve dreamed about all the experience you’ll be having there and you’re excited to share your new home with your family and friends.
Leading up to moving day, you call to have super fast Internet set up at your new place, you pack up all your boxes—maybe even start moving some stuff over that you can manage and usually the last thing you’ll do is submit a change of address form.
The post office where I live makes it super easy to change your address so that mail will be forwarded from your old place to your new place. So easy, you could do it online and be done in less than 5 mins.
But you aren’t here to read about how to change your home address, you’re here to read about how to change the domain for your website. More specifically if your site is hosted on Netlify.
I wish I could tell you, the process is as easy as going to your post office’s website and spending 5 minutes to fill out a form. Changing domains is not as easy, but this article should make the process less painful because I lay out all the steps involved.
Just a heads up, the domain example I used in this article is fictitious. At the time of writing this article, the domains I use aren’t owned by anyone. If you go to the domain mentioned in this article I can’t vouch for the contents of the domain if someone ended up buying it.
The desired results
So let’s say a couple of years back I started an online community of friends that live in North Carolina, hangs out and talks about our favorite pizza joints and pizza toppings.
The pandemic of 2020 hit and with people sheltering in place and ordering their favorite pizzas in, they’re finding a lot more time to share their thoughts with the community about their pizza experiences.
Needless to say the site’s traffic is blowing up and I’m getting requests for people outside of North Carolina who would like to join the community. But the name of the community—Your Pizza Friends of NC—and its domain—https://yourpizzafriendsofnc.com—is location specific, preventing people from joining.
So I hop on my favorite registrar, do a quick search for yourpizzafriends.com and it is available! I quickly buy the domain, do a slight tweak to the logo but now what?
So let’s walk through this backwards.
I know that when people go to any of these domains,
https://www.yourpizzafriendsofnc.com
https://yourpizzafriendsofnc.com
http://www.yourpizzafriendsofnc.com
http://yourpizzafriendsofnc.com
they should be automatically redirected to the new domain https://yourpizzafriends.com.
Likewise, when folks do a Google search for, “Your Pizza Friends”, they should get search results for the new domain and not the old.
An overview of the specific infrastructure setup
Before diving into the process of changing website domains, I wanted to list out the specific infrastructure I’ll be covering in this article.
Your set up might be slightly different but you should be able to take different sections and apply it to your site’s specific set up.
For the registrar, I’m using Hover.
The Domain Name System (DNS) is managed through Amazon Route 53.
For hosting, the site is hosted on Netlify.
Hover points its name servers to Route 53.
Route 53 then has A and CNAME records pointing to Netlify.
Netlify hosts the site, manages SSL certificates and handles redirects.
Add the new domain to Netlify
Since my site is already hosted on Netlify, I’ll want to set up the new domain yourpizzafriends.com.
To do this I’ll navigate to my site on Netlify, then navigate to the Settings, then the Domain management tab.
Under the heading of Custom domains I’ll want to add two new domain aliases; one for the bare URL—yourpizzafriends.com and the other one for the www subdomain of www.yourpizzafriends.com.
Adding these two domain aliases, Netlify will provide details of how to point the DNS to associate the domain with your site in the form of an A record and CNAME record. This information could be found in a link labelled Check DNS configuration after I created the new aliases. I’ll want to write these two record details down for later.
Since I want the primary domain to be yourpizzafriends.com I’ll want to select Set as primary domain under the Options.
Now we’ll hop on over to AWS Route 53 to update the DNS for the new domain.
Set up your DNS to point to your project on Netlify
In AWS Route 53 for the new Hosted zone (domain) I’ll want to add a couple of new records.
The first will be for the bare domain yourpizzafriends.com which will be an A record.
To do this, in the modal that says Define simple record I’ll leave the Record name alone. For the Record type I’ll select A - Routes traffic to an IPv4 address and some AWS resources and finally for the Value/Route traffic to I’ll select IP address or another value depending on the record type and give it a value of 104.198.14.52 or whatever the current Netlify load balancer IP is.
Next will be the www subdomain which will be www.yourpizzafriends.com which will be a CNAME record.
To do this, in the same modal, this time I’ll add www in the Record name field. For the Record type I’ll select CNAME - Routes traffic to another domain name and to some AWS resources and the Value/Route traffic to should be IP address or another value depending on the record type and pass it the value that Netlify had provided which should be in the format of some-unique-subdomain.netlify.app.
With these two records in place, now we’ll want to go back to Netlify to renew the SSL so that all the domains are covered.
Renewing certificate so that there’s SSL coverage for all domains
Back in Netlify under the Domain management tab under Settings, we’ll want to scroll down to the section titled, HTTPS.
In this section, we’ll want to renew the certification so that we’ll have SSL coverage on all the domains and not just the old one.
To do this, under SSL/TLS certificate there should be a button that says, Renew certificate
This should cause a modal to pop up asking you to confirm, click on the button that also says, Renew certificate on this modal and now in the area which indicates which domains are covered with the SSL certificate, it should indicate both the old and new certificate.
Setting up redirect rules in your project folder for Netlify
Netlify has made setting up redirect rules super easy by setting up a file in your project’s root directory.
There are two ways to achieve this, either by using a _redirects file or by using a Netlify configuration file
For the this article, I chose to use the _redirects file option.
In root of my project folder, I’ll create a new file called _redirects with no extensions.
Then the contents of the files will be,
http://www.yourpizzafriendsofnc.com/* https://yourpizzafriends.com/:splat 301!
https://www.yourpizzafriendsofnc.com/* https://yourpizzafriends.com/:splat 301!
http://yourpizzafriendsofnc.com/* https://yourpizzafriends.com/:splat 301!
https://yourpizzafriendsofnc.com/* https://yourpizzafriends.com/:splat 301!
Now we’ve got rules to do a 301 permenant redirect on each line. Whether the request is for a www or the bare URL for yourpizzafriendsofnc.com or secure https or unsecure http, they all will redirect to https://yourpizzafriends.com.
Each line is made up of three values. The first value is the domain I’m redirecting from. You’ll notice that for each of the first values, I trail it with a * symbol. This is referred to as a splat which tells Netlify that anything after the trailing slash should redirect to the same resource on the new domain.
For the second value, it’s the final destination I want to redirect to. This has the :splat which is a dynamic path to help match the * from the first value.
For the third value, I explicitly indicate that the kind of redirect is a 301 although a 301 is the default type. As for the exclamation mark after the 301, that’s to deal with shadowing which is better explained here.
Once you’re done updating your _redirects file, you’ll want to commit it to source and push it up so that Netlify can do another build and set up all the redirects.
Now with all my variations of the old domain pointing to the new domain, it’s time to let Google know which domain is the correct domain we want traffic to show up at which is yourpizzafriends.com.
Let Google know of domain change in Search Console
This portion assumes that you’ve got both domains on the Google Search Console dashboard and they have been verified with Google via the DNS.
For a more detailed write up of all the things that you’ll need to do before letting Google know a domain has changed and how to change it, check out this article from Google.
With both domains on Google Search Console and verified with Google, you’ll want to go to the domain which you want to indicate that it has a Change of address—in my case pizzafriendsofnc.com. Then you’ll go to Settings and under the heading Property settings you’ll want to click on Change of address.
On the next screen you’ll see two steps, one that indicates you’ll want to set up 301 redirect rules—which we’ve already done.
The other is labelled Update Google which is where we’ll find a dropdown that has a list of the domains associated with our Google Search Console account. I’ll select the new domain yourpizzafriends.com, then select Validate & Update.
Yay, you’re done!
At this point, you’re done and your domain should now be pointing to the new domain. Google will do its thing and search results should show up over time as using your new domain. Even though it might show up as your old domain for a little while, no worries because you’ve set up the redirect rules in Netlify.
As an added bonus, I saved one more section till the last. This was because this particular step isn’t part of the right process for setting up domain changes with Netlify, but it was something I experimented with and learned from.
I wanted to share what didn’t work in hopes others will learn from it.
What I tried and didn’t work with AWS S3
Before discovering that Netlify could handle redirects, I thought I could solve the domain change problem by setting up S3 buckets to host static sites and then updating the DNS records on Route 53.
I was unfortunately wrong. The issue is because, while this would fix the routing of the non-secure connections it won’t handle secure connections. This is because you can’t issue certificates to S3 buckets.
You would however set up CloudFront—AWS’ CDN solution—the complexity of setting all this up felt like too much of an overhead. For this reason, after I realized secure connections weren’t being handled with this solution, I had Netlify handle everything for me and it worked out perfectly.