Redirecting a Wordpress.com blog to Netlify
For the recent redesign and rebuild of historyofvaccines.org my team and I had to migrate a blog hosted and managed at WordPress.com to a subdirectory within a static Gatsby site, deployed to Netlify. We wanted to have any requests for historyofvaccines.blog land at the appropriate new url of historyofvaccines.org/blog.
WordPress domain management #
Part one was pointing the
historyofvaccines.blog domain to Netlify. WordPress’s documentation suggested having the default
A record point to the IP address for Netlify’s load balancer, in this case
Netlify domain/redirect configuration #
In the Netlify admin panel I added
historyofvaccines.blog as a custom domain alias.
Then, in my Netlify
_redirects file (in the Gatsby codebase) I added in some redirects. I put in the more specific redirects first, since Netlify will take the first one that matches.
https://historyofvaccines.blog/* https://historyofvaccines.org/blog/:splat 301!
https://www.historyofvaccines.blog/* https://historyofvaccines.org/blog/:splat 301!
http://historyofvaccines.blog/* https://historyofvaccines.org/blog/:splat 301!
http://www.historyofvaccines.blog/* https://historyofvaccines.org/blog/:splat 301!
Redirecting to the base directory of the blog #
With my original set of redirects (before the working version above) things almost worked as expected—individual blog posts were correctly relayed to the right URL (for ex: https://historyofvaccines.blog/2021/01/04/keeping-track-of-covid-19-vaccination-rates/ was correctly redirected to https://historyofvaccines.org/keeping-track-of-covid-19-vaccination-rates/.
But the root level historyofvaccines.blog was redirecting to historyofvaccines.org, not historyofvaccines.org/blog. Turns out
! is a very important part of a redirect rule.
I originally had:
301! at the end of my rule things started working as expected. From Netlify’s docs:
Refer to the note on shadowing for the reasoning behind the ! — it is presumably the case that you have a
/blog/index.htmlthat you’d rather serve than your site’s main
index.htmlin this case!
This was a little bit hard to understand, but here’s what I think is happening:
- Without the
!in the redirect rule,
historyofvaccines.blogwill resolve to
historyofvaccines.org/index.html, because that page actually exists. It seems the presence of a page that matches the same pattern as the source takes precedence over the redirect.
!in the rule says to ignore that default match and force the redirect to the URL you have defined, in strict terms:
URL pattern redirects #
I’ve written about this before, but WordPress by default goes with a year/month/day/slug arrangement for permalinks. With the new blog we simplified that to be simply
/blog/[slug]. So part of the redirect pattern used Netlify’s redirect tokens to transform the URLs:
That takes a URL like
https://historyofvaccines.blog/2020/03/15/our-coronavirus-coverage/ and redirects it to