Paul Cook,
Back

Redirects with Gatsby and Netlify

I recently migrated my site to Gatsby, part of that migration involved me creating a new URL structure for my posts.

Previously my sited used WordPress, and while you can change the URL structure for self-hosted versions of WordPress you can't with the plan I was on for WordPress.com (a commercial offering separate from WordPress.org).

I’ve never really liked the default URL structure WordPress uses for posts.

It's year/month/day/title which ends up looking like this: yoursite.com/2019/12/1/cool-post instead of a clean URL like: yoursite.com/cool-post.

I much prefer the clearer structure so as I planned my migration to Gatsby that was one of the first changes I wanted to make.

How you would redirect URLs normally

In WordPress you might use something like a redirect plugin that handles all the business of making redirects for you, or, if you want to get fancy you could do the redirection yourself with Apache mod_rewrites or Nginx rewrites or write something in your .htaccess file.

Sure, there's plenty of other ways to do redirection, but if you're doing something with a blog that probably covers what you'd want to do.

How you redirect URLs in Gatsby

That's all well and good if you control the server, but I don't with my site anymore.

I'm not running some VM in Digital Ocean that I can SSH into, and add in the redirections manually with Apache or Nginx.

And, to be honest, I'm really glad that's the case... but I still need redirects.

Enter Google searching for doing redirects in Gatsby.

createRedirect

The first thing I ran across is the createRedirect method.

You usually (and perhaps always) run this method while you're creating your pages in gatsby-

node.js like this:

exports.createPages = ({
      graphql,
      actions
    }) => {
      const { createRedirect } = actions;
        createRedirect({
          fromPath: '/2017/08/06/how-i-got-a-job/',
          toPath: '/how-i-got-a-job/',
          isPermanent: true
        });
    }

The fromPath is the old URL to redirect from.

The toPath is the new URL to redirect to.

The isPermanent sets the redirect status code to be a 301 which basically tells Google that this new URL is the permanent home for this content now.

301 redirects are super important for maintaining the search rankings of whatever you're redirecting.

Problem: Adding createRedirect alone isn't enough to do server side redirects for your site.

The code above won't redirect... anybody. We need to add a plugin that will plug-in (bad pun very much intended) our redirects into our host.

Adding the Netlify plugin

In this case, we want to add the plugin for Netlify:

npm install --save gatsby-plugin-netlify

Once that's done installing we need to add it into our plugins in gatsby-config.js:

plugins: [gatsby-plugin-netlify]

From there we are off to the races.

Try its handiwork out for yourself:

paulrcook.com/2017/09/07/building-context/

paulrcook.com/2019/03/05/fewer-better-books/

What my structure looks like now

One additional thing you could rather than creating dozens of calls to createRedirect is to have an array of objects that you loop and call createRedirect on each of them like so:

const redirects = [
    		{
          fromPath: '/2017/07/22/fun-with-react-and-the-wordpress-rest-api/',
          toPath: '/fun-with-react-and-the-wordpress-rest-api',
          isPermanent: true
        },
        {
          fromPath: '/2017/08/06/how-i-got-a-job/',
          toPath: '/how-i-got-a-job/',
          isPermanent: true
        },
        {
          fromPath: '/2017/09/07/building-context/',
          toPath: '/building-context/',
          isPermanent: true
        },
        {
          fromPath: '/2018/12/16/totally-winging-it/',
          toPath: '/totally-winging-it/',
          isPermanent: true
        },
        {
          fromPath: '/2019/01/11/that-app-wont-save-you/',
          toPath: '/that-app-wont-save-you/',
          isPermanent: true
        },
         // ...other posts
    ];


    redirects.forEach(redirect => createRedirect(redirect));

That's all, folks

So there you have it. With Gatsby, you may not always own the server, but you can still redirect your content.

Further resources