After fiddling around a bit with Octopress, I figured it was time to give other static site generators a try. This time, I figured I’d try using Middleman and port the content over from Octopress.

Middleman already has an extension which supports blogging. This extension has multiple features, including tagging, archive pages by year, month and day, summary generation and pagination. However, the default template is quite bare, so this was an opportunity to try using Bootstrap . If you haven’t heard of Bootstrap before, it’s a CSS and Javascript framework targeted for mobile-first layouts. This was really the hard part - building a layout from scratch, since I am no web design expert. I went with a simple two-column layout, with a header and footer, that reverts to a single column layout when viewed on mobile. Bootstrap also made it easy to collapse the navbar to a dropdown menu when the screen width shrinks.

The basic blog template generated when you type middleman init -T blog has code to generate a calendar page which groups pages by year, month and day. I opted not to enable this, as it’s a lot of pages with very little content. Instead, I went with a single archive page, and disabled the calendar template by setting blog.calendar_template = nil in config.rb. Since the tag and archive pages are fundamentally the same layout, with minor modifications, I opted to go with a partial, and passing in either blog.articles or page_articles, depending on whether it was the archives page or the tags page.

The sidebar is a bit of code I wrote - since Middleman already gives you a list of articles sorted in reverse-chronological order, all I had to do was pick the first 5 and link to them. The tags are also available using blog.tags, but they are not necessarily sorted, so I call sort on the object and pass the tag and associated articles to a block, which simply outputs the tag name and article count.

The general structure is a nested layout, with a top-level layout containing the navbar, a content block and the footer. Below this, is a page layout, which splits the content block into the content column and the sidebar. The post layout, which all the blog posts use, enhances the content column to display the title, post body and a footer for the post timestamp and tag list. The page layout also has support for Disqus commenting.

Finally, since Middleman already has support for syntax highlighting, I added that, and a Solarized SCSS stylesheet for code highlighting. Previous posts with code blocks display this stylesheet.

Middleman also has support for helper functions, which pretty much correspond to Liquid tags, the real difference being that you can write almost any code in the helper function. For example, the tags list that is shown at the bottom of each post is generated using a helper function, which displays a tag or tags icon followed by links to each tag page.