blog/content/articles/2023-09-23-astro-redirect-from/index.md

date	updated	title	image	tags	changelog	toc
2023-09-23T19:20:50.153Z	2023-10-25T00:04:03.153Z	Redirect Plugin for Markdown Pages in Astro	./astro-redirect-from-teaser.png	astro development goodies	kremalicious/astro-redirect-from	true

Integration plugin for Astro to create redirects based on a list in your Markdown frontmatter, mimicking the behavior of jekyll-redirect-from and gatsby-redirect-from.

Imagine you've just revamped your blog, and some of your old URLs have changed. You don't want to lose the SEO juice, nor do you want to leave your readers with broken links. This is where redirects come into play. But managing redirects can be cumbersome, especially if you have to do it manually or through server and deployment tools configurations.

This plugin automates this process allowing you to add a redirect_from list in the frontmatter of your Markdown files and the plugin will update Astro's configuration to handle these redirects automatically.

How it Works

By adding a redirect_from list in your Markdown frontmatter, the plugin integrates these redirects into Astro's redirects configuration automatically.

The plugin operates during the astro:config:setup lifecycle hook. It scans all Markdown files for the redirect_from key and updates Astro's configuration using updateConfig(). This ensures that any existing redirects in astro.config.mjs are merged with the ones generated by the plugin.

Astro takes over from there, handling the redirects based on your site's build mode and in combination with any other integrations you might be using:

For statically-generated sites with no adapter installed, this will produce a client redirect using a <meta http-equiv="refresh"> tag and does not support status codes.

When using SSR or with a static adapter in output: static mode, status codes are supported. Astro will serve redirected GET requests with a status of 301 and use a status of 308 for any other request method. Astro Configuration Reference: redirects

This plugin works with various Astro hosting integrations, most of them generate further redirect files in the places they require so this plugin works in combination with them:

Provider	Plugin
Netlify	@astrojs/netlify
Vercel	@astrojs/vercel
Cloudflare	@astrojs/cloudflare

Prerequisites

The plugin is designed to work without configuration, especially if your project aligns with Astro's default settings.

• Astro v3 (v2 probably works too, but is not tested)
• Markdown files should be in a directory (default is src/pages/)
• Slugs are extracted either from the frontmatter or the file/folder path

Installation

cd yourproject/

npx astro add astro-redirect-from

If installing manually:

npm i astro-redirect-from

Then load the plugin in your Astro config file, making sure this plugin comes before any other integrations which make use of the redirects config:

import { defineConfig } from 'astro/config'
import redirectFrom from 'astro-redirect-from'

export default defineConfig({
  // ...
  integrations: [
    redirectFrom()
  ],
  // ...
)}

That's it. Your redirects will be automatically added the next time you run astro dev or astro build. If any of them have a redirect_from field, that is.

For easy debugging, a redirect_from.json is written out into Astro's cacheDir setting, which by default is under node_modules/.astro.

See Usage

Options

All options are optional and can be passed in Astro's config file:

import { defineConfig } from 'astro/config'
import redirectFrom from 'astro-redirect-from'
import { getMySlug } from './your-slug-function'

export default defineConfig({
  // ...
  integrations: [
    redirectFrom({
      contentDir: './content',
      getSlug: getMySlug
    })
  ]
  // ...
)}

contentDir: string

Default: src/pages/

Specify a different directory for your Markdown files, relative to the project root.

getSlug: (filePath: string) => string

Default: getSlugFromFilePath(), see below

If you need a custom slug structure, pass a function to construct your slug from the file path. The file path should be relative to the content directory.

If you use a slug field in your frontmatter, this will be preferred by the plugin and passing any getSlug function will have no effect in that case.

The default function is a great starting point:

function getSlugFromFilePath(filePath: string) {
  const parsedPath = path.parse(filePath)
  let slug

  // construct slug as full path from either:
  // - folder name if file name is index.md, or
  // - file name
  if (parsedPath.base === 'index.md' || parsedPath.base === 'index.mdx') {
    slug = parsedPath.dir
  } else {
    slug = `${parsedPath.dir}/${parsedPath.name}`
  }

  return slug
}

Usage

In your Markdown file's frontmatter, use the key redirect_from followed by a list.

---
redirect_from:
  - /old-url-1
  - /old-url-2
  - /old-url-3.html
---

Alternatively, you can use a string instead of a list for a single redirect:

redirect_from: /old-url

Check out & contribute

Head over to GitHub to take a peek into the code, or to report some bugs.

GitHub