Skip to main content
sujeet.pro
Search
Theme

Implementing Redirection for Static Sites

Features

This blogs talks about handling redirects in Static Sites

Implementing Redirection for Static Sites
Server Side Redirection
Part of Series: Statically Generated Sites
Table of Contents

This approach is a two fold implementation

  • Generating pages which redirects the user on client side using javascript
  • Implementing Redirects with CDN (This talks about cloudfront)

Generating index.html for redirects

We generate an index.html page for the redirected paths. This has the below components

  • http-equiv="refresh": The number of seconds until the page should redirect to another - only if the content attribute contains a non-negative integer followed by the string ';url=', and a valid URL.
    • 0;url==https://path/to/redirect: redirects to the given url after 0 seconds.
  • robots meta tag, asks the crawlers to not index the page.
  • canonical link tag: it defines the preferred URL for the current document, which helps search engines reduce duplicate content.
  • body has a anchor tag, which points to the redirected page

Sample Code

<!doctype html>
<html>
  <head>
    <title>Redirecting to https://path/to/redirect</title>
    <meta http-equiv="refresh" content="0;url=https://path/to/redirect" />
    <meta name="robots" content="noindex" />
    <link rel="canonical" href="https://path/to/redirect" />
  </head>
  <body>
    <a href="https://path/to/redirect"> Redirect to https://path/to/redirect </a>
  </body>
</html>

Configuring Redirects with _redirects for supported hosting provider

A lot of hosting providers, supports redirection using _redirects file. Eg. For sujeet.pro, I use cloudflare pages which supports redirection in this way.

The contents of this file is space separated values in format of redirect-from redirect-to.

Below is the snippet from the redirection configuration used for sujeet.pro

/gh https://github.com/sujeet-pro
/in https://www.linkedin.com/in/sujeetkrjaiswal/
/linkedin https://www.linkedin.com/in/sujeetkrjaiswal/
/twitter https://twitter.com/sujeetpro
/x https://twitter.com/sujeetpro

Configuring Redirection for Cloudfront with lambda@edge

If your static site is in S3 and is backed by a Cloudfront CDN, you can use this approach.

Cloudfront supports interceptors using lambda@edge and cloudfront funtions.

  • Viewer Request Interceptor (lambda@edge or Cloufront Functions)
  • Origin Request Interceptor (only lambda@edge)
  • Origin Response Interceptor (only lambda@edge)
  • Viewer Response Interceptor (lambda@edge or Cloufront Functions)

Origin Interceptor for redirection
Origin Interceptor for redirection
We can use lambda@edge function to redirect the users. For data on what urls to redirect and where to redirect, we can deploy a json configuration along with the code.

'use strict'


exports.handler = (event, context, callback) => {
  let request = event.Records[0].cf.request
  //if URI matches to 'pretty-url' then redirect to a different URI
  if (request.uri == '/pretty-url') {
    //Generate HTTP redirect response to a different landing page.
    const redirectResponse = {
      status: '301',
      statusDescription: 'Moved Permanently',
      headers: {
        location: [
          {
            key: 'Location',
            value: '/somecampaign/index.html',
          },
        ],
        'cache-control': [
          {
            key: 'Cache-Control',
            value: 'max-age=3600',
          },
        ],
      },
    }
    callback(null, redirectResponse)
  } else {
    // for all other requests proceed to fetch the resources
    callback(null, request)
  }
}

Redirection using Web Server

If you serve your static files via your won web servers, all the web servers supports redirections.

Configuring Nginx

server {
 # Temporary redirect to an individual page
 rewrite ^/oldpage1$ http://www.domain.com/newpage1 redirect;


 # Permanent redirect to an individual page
 rewrite ^/oldpage2$ http://www.domain.com/newpage2 permanent;
 }

References

Tags

#Static Site Generation #Web Performance