Redirecting pages in jekyll (Without Plugins)

Hosting your site on Github Pages is fantastic, easy and inexpensive. Using Jekyll to generate your pages is easy and very configurable. It’s the perfect solution for a static site (as well as what I use for this blog). Sometimes, however, you may run into situations where you need to redirect a page to another page, and without access to your backend to use server-side redirects you need to do it manually.

Understanding URL Redirects

Generally speaking, URL redirects are used to inform search engines that a page has moved to a new location, and to ensure that visitors to your site are not presented with a broken link. Ideally, this would be performed using a 301 redirect, but what can you do if you don’t have access to your server?

Client-Side Redirects

While there are multiple ways to perform client-side redirects, a meta tag redirect is generally considered to be the most reliable; it is also the most compatible with search engines.

<meta http-equiv="Refresh" content="0; url=http://www.example.com/newlocation" />

If the browser is not able to complete the redirect it is also useful to inform the user that the page has moved and that they should follow the link. Javascript can also be used to redirect the user, but this is not recommended as it is not compatible with search engines.

window.location.href = 'http://www.example.com/newlocation';

SEO Considerations

While it is not recommended to use client-side redirects for SEO purposes, it is still a good idea to do so. Google and other search engines will take some time to update their indexes but this is generally not an issue. Google specifically provides guidance about meta tags that their crawler understands. Meta tags that Google understands

How to redirect a page in Jekyll

When using Jekyll, you can make use of layouts and YAML frontmatter to redirect a page. easily. The first step is to create a file named ‘redirected.liquid’ in the _layouts folder. This file should contain the following

Create a helper layout file

<!DOCTYPE html>
<html>

<head>
  <link rel="canonical" href="{{ page.redirect_to }}" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="refresh" content="0;url={{ page.redirect_to }}" />
</head>

<body>
  <script>window.location = '{{ page.redirect_to }}';</script>
  <h1>This page has moved to </h1>
  <a href="{{ page.redirect_to }}">Click here if you are not redirected.<a>
</body>

</html>

Create a copy of your original page

Once your layout file is created, you can create a copy of the page you wish to redirect. Its content can be blank, but it will need to have the frontmatter updated to use the helper layout file, and specify the new location. You may also wish to add directives to the page so that they will be excluded from sitemaps or navigation.

---
layout: redirected
sitemap:
  exclude: 'yes'
permalink: /old-url/
redirect_to: /new-url/
---

That’s it! You can now redirect your page to the new location, do a bit of testing, and then publish your site.