A Simple Guide to Redirects on Neocities with Eleventy

eleventy web guides

Eleventy tutorials are everywhere, especially for Netlify. But what if you’re exploring platforms like Neocities? No worries, I’ve got your back.

For reasons, I’ve just moved Flamed Fury back to Neocities. Redirects is one of the things that I was relying on Netlify to handle for me. Netlify allows you to handle HTTPS redirects easily withEleventy.

After some quick web searching, it was clear that Neocities does not support HTTPS redirects, so what was I to do with my redirects where I didn’t have access or control of the server? Luckily, gold old HTML has us covered with HTML redirects.

With HTML, you can create a simple redirect with a <meta> tag.

<head>
  <meta http-equiv="Refresh" content="0; URL=https://flamedfury.com/" />
</head>

How could I do this simply in the Eleventy way? Sure, I could recreate each of the old HTML pages and fill in the <meta> tag to redirect to the new URLs, but that would be tedious to maintain.

After some more web searching I came across this post, Eleventy Redirect From by Brian Mitchell where they wanted a drop-in replacement for Jekyll redirects but in Eleventy.

Brian achieved this with a single template that I figured out after a “period of time” troubleshooting needs to be in the /src/ directory to work 😂

My redirects were configured to support the Netlify way and used the key redirectFrom.

For example, a single redirect:

---
title: I Love The Web
redirectFrom: ['manifesto']
---

Or multiple redirects:

---
title: Relics Of The Web
redirectFrom: ['/explore/', '/explore/buttonwall/', '/explore/webrings/', '/explore/blogroll/', '/explore/links/']
---

To get to work without modifying my existing frontmatter, I just had to change redirect_from to redirectFrom in the template.

---js
{
  pagination: {
    data: "collections.all",
    size: 1,
    alias: "redirect",
    before: function (data) {
      return data.reduce((redirects, page) => {
        if (Array.isArray(page.data.redirectFrom)) {
          for (let url of page.data.redirectFrom) {
            redirects.push({ to: page.url, from: url });
          }
        } else if (typeof page.data.redirectFrom === 'string') {
          redirects.push({ to: page.url, from: page.data.redirectFrom });
        }
        return redirects;
      }, []);
    },
    addAllPagesToCollections: false,
  },
  permalink: "/index.html",
  eleventyExcludeFromCollections: true,
}
---
<!DOCTYPE html>
  <html lang="en-US">
  <meta charset="utf-8">
  <title>Redirecting&hellip;</title>
  <link rel="canonical" href=".">
  <script>location="."</script>
  <meta http-equiv="refresh" content="0; url=.">
  <meta name="robots" content="noindex">
  <h1>Redirecting&hellip;</h1>
  <a href=".">Click here if you are not redirected.</a>
</html>f

If I did this correctly, then you should be able to click on the old Explore link and be redirected to the Relics Of The Web post.

Thanks again to Brian for doing the heavy lifting and getting me going.

Let me know if anything needs to be fixed or if this helped you with your Eleventy-built homepage on Neocities!

View this page on GitHub.