Implementing Redirections for Static Sites

This blogs talks about handling redirects in Static Sites

Server Side Redirection
Part of Series: Static Site Generation (SSG)
Table of Contents

This approach is a two fold implementation

Generating index.html for redirects

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

Sample Code

<!doctype html>
    <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" />
    <a href="https://path/to/redirect"> Redirect to https://path/to/redirect </a>

Configuring Redirects with _redirects for supported hosting provider

A lot of hosting providers, supports redirection using _redirects file. Eg. For, 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


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.

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$ redirect;

 # Permanent redirect to an individual page
 rewrite ^/oldpage2$ permanent;



Next In Series: Optimizing Content Delivery by Serving Pre-compressed content