Tom Clarkson

I am a software developer based in Sydney, Australia.

I spent many years as a SharePoint consultant, but now focus on building HTML5 and iOS apps.
Issue Unity
An app for working with issues across multiple projects on GitHub and Bitbucket.
Chondric JS
A lightweight JavaScript MVC framework for use with jQuery Mobile
A library for building SharePoint sites using clean, strongly typed code rather than complex and fragile configuration files
See more on github
Automating app icon and splash screen creation
Using PhantomJS to turn html or svg into a full set of iOS app icons and loading images
Developing with an iPad - One week in
General impressions after developing on an iPad for a week
Developing with an iPad - CodeMirror
Setting up CodeMirror and adapting it for iPad use
Developing with an iPad - beyond the code
The text editor isn't everything
Developing with an iPad - using the on-screen keyboard
Initial impressions from writing code with the iPad's on-screen keyboard.
Full Archive

Custom 404 page for a Jekyll blog

14 November 2012

When I moved my blog from wordpress to Jekyll hosted on GitHub Pages, I set the permalink format so that post links would not change. That works well for most posts, but some older posts have links created when my blog was hosted on SharePoint, and those were going to the default 404 page, which is not at all helpful.

The normal approach to changed link formats is to set up redirects in htaccess, but that isn’t an option with this sort of hosting.

Another option that would work is generating redirect pages - I’d probably go with that if I really cared about seo for the old posts, but it requires more work to identify the appropriate redirects and I don’t.

The first step was setting up a custom 404 page. Unfortunately you can’t use a jekyll generated page, but pasting all the html from a view source of the homepage into 404.html is easy enough. I probably could have generated something with jekyll locally and copied it out of _site before uploading, but the direct approach is good enough for now.

That at least gets the user to a page where they can find a link to the post, but with a little javascript we can make it much easier. The below script detects when the url is in the old /archive/….aspx format and updates a link to what is probably the current version of the post. Otherwise, it remains as the generic archive link.

A similar script could be used for a redirect, but with a link it requires a particularly dense user to create an infinite loop.

<h2><a href="/2012/11/13/git-bash-prompt" class="dark-link">Not found</a></h2>  
<p>This file does not exist.</p>    
If you got here with a link for a previous version of my blog, try 
<a id="newLink" href="/archive.html">the archive</a>

<script type="text/javascript">
var url = document.location.href;
if (url.indexOf(".aspx") >= 0 && url.indexOf("/archive/" > 0)) {
url = url.replace(/\/archive\//g, "/").replace(/.aspx/g, "");
var link = document.getElementById("newLink");
link.setAttribute("href", url);
link.innerText = url;