Introduction

First off, welcome to my new site! Its been long in the making, I can tell you. I wanted to replace my previous site with something a little more snazzy and integrated (you can view that one at my archive).

I started this project in April during my Easter break. Its main goal was to create an improved, more functional, blog-oriented site. Unlike my previous website, this one is meant to have more content; stuff I had originally intended to release on a separate website. However due to concerns of being able to maintain both sites, I decided to integrate them together into what you see now. Furthermore, I am intending to use this design on my academic site, or at least a variation thereof.

Finding a CMS

Because I wanted a more blog-oriented site, I went out and looked at various CMS. At the top of my list was Wordpress. I have used it several times over the years and it works very well. However, I wanted something that I didn’t have to hack too much in order to get what I wanted. So I kept looking. A friend of mine advised me to look at Flask and Hyde, two static site generators using Python.

I initial had a close look at Hyde simply because it looked more like what I wanted to use. But due to huge changes occurring within the project at the time, I decided to pass over it. Flask reminded me a lot of Sinatra, in that it gives you a lot of control over how the application acts in regards to serving the website assets; in other words it is very low-level. In my case, too low-level. I skipped over Flask as well.

I then had a look into Github Pages, after another friend pointed it out to me. This then led to me looking into Jekyll. From what I read in the documentation and having had a look through some of the source code, I knew I had found a winner.

Jekyll is, at its simplest, a blog-oriented static-site generator. However, through the use of plug-ins it can be expanded to fulfil a variety of purposes. That however wasn’t too important to me. Instead I was happy to find a system that just worked. You gem install jekyll, you setup a few config files and a directory structure, then you write the template file(s), and then the actual content (e.g. pages, posts, etc.). Done!

Design

The next step for me was the actual design of the site. My previous site was fairly minimalistic and I wanted this one to follow the same principle. However I wanted it to be less artsy (have a look at it, you’ll know what I mean). So I decided to keep it three-tonal except in the case of the links page, which I wanted to reflect my previous site’s colourfulness. Furthermore, I wanted the site to be more user friendly. The previous site wasn’t designed with a viewer in mind (at least when it came to choice of font and placement of the elements).

I decided to keep a few design principles from my previous site, such as having the navigation and website title left aligned with the content in the middle offset to the right. I decided to move away from having the footer be right aligned and directly under the content. Instead I expanded it to the full width of the page and made its position absolute to the bottom of the page. I also wanted to use a different typography, something easier to read. The site now uses Lacuna in the title and OpenSans for everything else.

I won’t go into more detail of why I did what and where, such as my choice of font size, the colour scheme, or even the placement of various elements. This is all meant to be a short overview. What I will talk about are some of the extra things I did, like how I add new entries to the links page or how I create the CHANGELOG file including all git commits.

Extra stuff

Lets start with the links page. I opted, just because I am dealing with static content, to use a flat file containing all my link entries. I created a plug-in to take the data and turn it into HTML using a template. I also included a set of functions so that every time I regenerate the site, I get different colours for the links (the plug-in source code). The cool thing is that because I am using the HSV colour model, all the colours I generate have all the same saturation and brightness, meaning the colours don’t clash. The tricky bit was actually converting between HSV and RGB values, the function I created with the help of the Wikipedia page.

The changelog file I created using a plug-in as well, this time using the git command-line tool to get the log output. The interesting part was figuring out how to dynamically create a static page and add it to Jekyll’s generation process. It turns out that there is a StaticFile class to do just that. I had a look at a similar plug-in (to create a sitemap.xml file) and copied from it a bit of code regarding an issue when using Jekyll to serve the site, see line 94. Another thing I did was change the format of the git log output, using # %h --- <%aD>%n%B to create something that looks like this:

# <rev-short> --- <date>
<Commit Title>

<Commit Comment>

Conclusion

Well, that’s basically it in a nutshell, just a quick overview of everything. I hope to be adding a few more things in the future to this site.

Also, have a look at the humans.txt file; I have used a variety of tools and services to create this site, and I would like to thank the developers and service providers, without there work, this would have been much harder.