Blogging Like a Hacker

The greenhills.co.uk website has remained mainly unchanged for over a decade. Its main design dates back to the "homepages" of the early Web, using the most basic of HTML. The look and feel was one of simplicity and contrast, with some minor usability features (keyword high-lighting, breadcrumbs), and un-constrained resizing. For its extremely limited purpose, that has been just fine. But by today's standards it is looking dated, is too light on content, and doesn't suit modern screen sizes.

The implementation was based on some Perl scripts that convert XML into HTML, applying some common page elements, with some minimal CSS. The deployment used a simple Makefile and rsync, and a standard Apache server, later replaced by lighttpd. I still prefer markup-based content and command-line based management over UIs, and I still find static sites appealing, but there are better templating options available today.

So, it's time for an updated approach, and a fresh look and feel.

I'm resisting the temptation to turn this into a play project with the latest crop of server-side technologies (I'm sure there is Node.js/MongoDB fun to be had), because that's not conducive to either achieving a result in a reasonable timeframe, or simplifying long-term maintenance. I could give up and migrate to some hosted blog service, but I like independence. I could follow the path of least resistance with WordPress, but I've managed to stay away from PHP for too long to admit defeat now.

I decided to use jekyll (intro, code, wiki), and named this blog post in its honour.

Jekyll uses text markup (Markdown), is managed from the command-line, and works well with git. It has a decent templating engine. It's a mature project, and open source. It uses ruby, which I'm familiar with. It's a static site generator, which makes hosting easy. All good.

For the page layout I chose a standard blog design, to make it instantly recognisable: header, horizontal navigation, main content, with a sidebar. Visually, I've toned down the contrast, and removed the keyword highlighting and breadcrumbs, to get a more relaxed look. I've applied a maximum width, and use flush left / ragged-right alignment, to keep the content readable. Post pages work well with Safari's Reader.

As I don't expect to be blogging much, but want to give visitors some updated content, I added Twitter and Google Reader content in the sidebar. For now that uses standard webclips, which are slow to load, but that can be addressed later.

I've used a newer photo for accuracy, reduced it in size for modesty, and moved it to the sidebar to make the site content more personal, and to tie in with the more real-time elements from the sidebar.

The header photo is from a recent visit to San Francisco's Baker Beach. I chose the photo because it has green(ish) hills, but with some rock faces and trees for interest, and chose this crop because it is somewhat symmetrical and draws the eye to the middle of the page.

While more tweaking is to be done, this a good start.