☺ 2022
Last updated Tuesday, November 22 ∙ Edition 1669100576
Danny White

Clean URLs for Figma links via Eleventy and Netlify

Suppose you have a Figma file that serves as your online portfolio. It looks something like this:

https://www.figma.com/file/gnziUDsg08y4397dgz/File-Name-%E2%80%A2-Portfolio?node-id=2%4B517

Gross. No one wants to open that.

No matter, because you are a web master and happen to run your own website on Eleventy and host it on Netlify. You can use redirects to share a portfolio URL like yourname.com/work that then redirects to the Figma link.

Here’s now.

Create a file called _redirects in the src of your Eleventy project. You read that right: without a file extension. Then fill that file with redirects in the following syntax:

/old-url                /new-url
/old-blog/some-post /new-blog/some-post

For your Figma use-case that might look like:

/work              https://www.figma.com/file/gnziUDsg08y4397dgz/File-Name-%E2%80%A2-Portfolio?node-id=2%4B517

That’s it. Now we just need to turn it on.

Eleventy ignores files and folders by default. You need to tell it to pass through the _redirects file by leaving instructions in the .eleventy.js file like so:

config.addPassthroughCopy("src/_redirects");

Here are some more thorough resources that helped me: