Gatsby JS: Redirect blog posts to new path

Question

I want to transfer all the blog posts from the current path /blog-post-slug to a new subdirectory /blog/blog-post-slug .

Currently, I create all the blog post pages inside the gatsby-node file and I just have to add the prefix to create the new routes. However, all the previous blog post and their backlink will not be valid. That's why I want to redirect the old post to the new ones.

The blog is deployed at Netlify, if it helps somehow.

Is there a way in Gatsby to match the old path and redirect it to the new one?

Answer 1

Solved it by using the createRedirect action in the gatsby-node and these two plugins gatsby-plugin-meta-redirect and gatsby-plugin-netlify .

I added the following code in the gatsby-node file:

   const oldPath = "/random-slug/";
   createRedirect({
      fromPath: oldPath,
      toPath: "/blog" + oldPath,
      isPermanent: true,
    })

After running the gatsby build command check your public folder. It should have been generated the _redirects file that includes all the desired redirects.

You can run gatsby serve to find out if it works correctly!