Growing with the Web

Setting up redirects for GitHub pages


When doing my last big redesign I needed to redirect some URLs, here’s how I did it.

After my last big redesign I went from Blogger to GitHub Pages and haven’t looked back. The extra control I got from this was essential to push my blog forward and to make maintaining it less of a hassle.

As part of this I also wanted to clean up some of the URLs, just moving the page would break any active links to the page on the web as well as undo any knowledge that search engines had on the page. Luckily none of the 150+ posts needed URL changes since Jekyll allows setting of a URL scheme for posts to match Blogger exactly by adding this permalink in the site’s _config.yml:

permalink: /:year/:month/:title.html

The main candidate for change was the pathfinding visualizer page which got stuck with the URL /p/html5-demo.html since I accidentally published it on Blogger before finalizing the title. To redirect a URL like this, a HTML file will be need to be placed at the original URL with both a refresh meta tag (redirect) and a canonical link tag to ensure that the page is reindexed by search engines in the following format:

<!-- Redirect the user to <new_url>-->
<meta http-equiv="refresh" content="0; url=<new_url>">
<!-- Make it know that <new_url> is the canonical URL -->
<link rel="canonical" href="<new_url>" />

My redirect for [/p/html5-demo.html][5] looks like this:

<meta http-equiv="refresh" content="0; url=">
<link rel="canonical" href="" />

Like this article?
Subscribe for more!