Redirecting from sub-domains with Netlify

After merging two websites that deployed from different branches, I had to figure out how to redirect my old blog posts to their new home.

Published

July 20, 2022

This post outlines how to redirect from a subdomain with Netflify for people who—like me—who don’t really understand what that means.🌝🌚

Is this relatable?

I used to have two websites.

One was the “main” one, and it was a fork of a college friend’s slick JavaScript setup that I didn’t really understand. But—it looked awesome on a desktop, which made me think it looked awesome everywhere, until I completely finished putting it all together and then tried to show it to a friend on my phone. Completely incomprehensible on mobile.

And then there was the blog. That one lived on a subdomain, blog.simonpcouch.com, and it was a fork of Julia Silge’s (you’re the best, Julia!) old blog. I also didn’t really understand that one, but it was a Hugo Academic type deal that I found pretty easy to work with. Except when it didn’t typeset math properly, or… build on any computer except the laptop I originally wrote it on. The production build of that site was set up as a branch deploy—I pushed commits to a different GitHub branch, and the site used different build settings for that site.

So.

I merged them! My main website is now a Hugo Apéro site, and the blog lives on the same site. How modern.

The problem

The content that used to live at:

blog.simonpcouch.com/blog/blog-post-slug

…now also lives at:

simonpcouch.com/blog/blog-post-slug

I’d rather that those old blog posts only live in one place, and preferably on my new website. So, it’d be great if, when someone heads to that first URL, the website will automatically send them to the same post on my new one.

Netlify’s docs about redirects seem pretty clear for the problem of redirecting within a domain, but I had trouble wrapping my head around how to solve this problem between domains. So, here’s the I-don’t-know-anything-about-web-dev version.

Wheee

Let’s say your Branch Deploy deploys from the blog branch to blog.yoursite.com.

You’ll first need to find your publish directory of your branch-deployed site. That’s the folder where your deploy-ready website lives.

If you use the netlify.toml config file, that’s the publish entry in your context.branch-deploy config. Mine looked like this:

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
publish = "public"
HUGO_VERSION = "0.68.3"

If you’ve set up your site build settings on the Netlify site, that entry lives in Site > Site Settings > Build & Deploy > Build settings > Publish directory.

For Hugo sites, that publish directory is public.

Navigate to that publish directory on the branch that you’d like to redirect from. That is, I wanted to redirect from blog.simonpcouch.com to simonpcouch.com, so I went to public folder in the blog branch.

Now, you’ll create a new text file here called _redirects. No extension needed. :)

To be clear, you don’t need to do anything on the main, production branch to make this work!

Configuring _redirects

Depending on your setup, this file might only be a couple lines. Generally, the format is like so:

https://blog.yoursite.com/* https://www.yoursite.com/blog/:splat 301!

The LHS side entry matches URLs on the branch site, and RHS side entry matches URLs on the new site. Some things worth pointing out:

  • The * at the end of the LHS URL means “anything can go here.” Anything that starts with blog.yoursite.com/ will be matched.
  • The :splat at the end of the RHS URL will be replaced with whatever * was. If you want anything from blog.yoursite.com to just go to your new site’s homepage, you can just leave out :splat.
  • The ! at the end of the RHS URL is weird. I’m just pattern matching. See these docs from Netlify for more on what’s happening there.

Once you have this entry set up as you like, it seems like it’s also worth making sure you do the same thing to URLs that are prefixed with http:// rather than https://. You’ll still want to send them to https:// on the RHS, though. For example, if you were using the rule above, pair it with:

http://blog.yoursite.com/* https://www.yoursite.com/blog/:splat 301!

…on a new line.

For an example, you can check out my redirect rules here:

http://blog.simonpcouch.com/* https://www.simonpcouch.com/:splat 301!
https://blog.simonpcouch.com/* https://www.simonpcouch.com/:splat 301!

All of the URLs for blog posts on my old website just have that first blog. bit taken away. Slick. 🦆

I’m not sure how niche this problem is and how obvious this solution may be to others. I guess I could set up analytics on this website and see how many people view this post, but that would require more messing around with web stuff. 🤪

Hehe. I appreciate you dropping by, and hope this will be helpful for some!

Back to top