Adding Netlify redirects to an Eleventy site

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

How to add Netlify redirects to an Eleventy site

So then how do we go about adding them?

I'm going to showcase my approach, there might be more sides to this, but for me just needing some 301 redirect this worked perfectly.

I've added the _redirects file to my src and the content looks like this:

/posts/javascript-map-function/ /posts/javascript-map-method/ 301 /posts/javascript-reduce-function/ /posts/javascript-reduce-method/ 301 /posts/javascript-filter-function/ /posts/javascript-filter-method/ 301

As you can see I decided to rename function to method, since it's correct that way.

Now if we would deploy this file would not be passed through, so open the .eleventy.js file and adjust accordingly.

module.exports = function (config) { //All other stuff // Passthrough copy // All other passthroughs config.addPassthroughCopy('src/_redirects'); return { dir: { input: 'src', output: 'dist' }, passthroughFileCopy: true }; };

As you can see, my setup is to take from the src directory and output to the dist. This might be different from your setup, so be aware of making changes.

Where the magic happens is this line:

config.addPassthroughCopy('src/_redirects');

Here we tell Eleventy to add the src/_redirects file to our output (which is the dist folder).

If we then run this deployment Netlify deploy center will show the following:

Cool, we now have three redirects setup!

You can also do the same for the _headers file if you need that.

See it in action by opening the following URL:

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Adding Netlify redirects to an Eleventy site

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

How to add Netlify redirects to an Eleventy site

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

How to add Netlify redirects to an Eleventy site

Thank you for reading, and let's connect!