Domain-level Redirects in Netlify

Whenever I buy a new domain name, I try and make sure to grab multiple common TLDs to cover all of my bases. For instance, in addition to seanherron.com, I also own seanherron.net and seanherron.org.

With my site hosted on Netlify, I wanted to make sure I had an easy way to redirect visitors who may come across one of those domains to my main .com site. Additionally, I wanted to make sure that the default Netlify subdomain (https://seanherron.netlify.app) redirected to the right domain. This is particularly important for search-engine optimization, as I want to make sure there is only one canonical URL for my content.

Netlify makes this quite easy to do. First, add the domains to your site as aliases on the admin site. Once they are added, you'll find that browsing to any of the domains renders your site, but they are not redirected to your primary domain.

To add the redirects, create (or modify) your netlify.toml file in the root directory of your site repository with the following content:

[[redirects]]
from = "https://seanherron.net/*"
to = "https://www.seanherron.com/:splat"
status = 301
force = true
[[redirects]]
from = "https://seanherron.org/*"
to = "https://www.seanherron.com/:splat"
status = 301
force = true
[[redirects]]
from = "https://www.seanherron.net/*"
to = "https://www.seanherron.com/:splat"
status = 301
force = true
[[redirects]]
from = "https://www.seanherron.org/*"
to = "https://www.seanherron.com/:splat"
status = 301
force = true

(obviously replace the domains with your own).

What does this do?

For each of my personal domains, I've created two redirects - one for the root domain (eg. https://seanherron.net) and one for a www subdomain (eg. https://www.seanherron.net). The /* at the end of the domain indicates that I want all (wildcard) content to be directed, and the /:splat at the end of the destination address indicates that Netlify should copy the path over to the new URL. For instance, both https://seanherron.net/blog and https://www.seanherron.net/blog will redirect to https://www.seanherron.com/blog.

The 301 status indicates that this should be a permanent redirect rather than a temporary (or 302) one. Finally, I set force = true to force Netlify to redirect even though the original URL technically exists.

A note on HTTPS

You'll notice I am only redirecting the https URLs, as opposed to both http and https. This is because Netlify automatically redirects http to https, so I can save some typing and rely on the defaults for that.

If you're interested in learning more about the redirect syntax for Netlify, they have a wealth of documentation on the topic - though I had to do a bit of tinkering to get these rules down just right!