From Wordpress To Jekyll: Layout & Designwritten by André Gawron, 29. March 2012
It took a while, but I finally moved the blog to the new server I got a couple of months ago. I refused to install MySQL & PHP onto the new rig because I don't have any use for those at the moment - and running a blog off a database? It's basically just text with an straight-forward, minimalistic design. I don't have a lot of dynamic content, comments or other features which would justify a database. So I decided to search the Internet for alternatives compared to a heavy, resource-hungry Wordpress installation - I found Jekyll.
Static To Rule Them All
Jekyll is a static site generator written in Ruby. You basically design your website and then write posts using Markdown. This is all done in your favourite editor - and since I'm spending most of my time in Emacs, it makes sense to use it for writing my blog post - utilizing the markdown-mode of course.
There's another reason why I wanted to roll something new: I didn't know what Wordpress was doing. It resulted in a viewable blog but it seemed quite messy. Dozen of includes and requests for a single, simple blog post. Changing the design wasn't that easy as well and trying to optimize the order of requests is a bit of work when you have little or no idea how Wordpress works. It was a black box, running, but changing was not an option when you don't want to spent time learning the Wordpress internals. Unfortunately, I wasn't even close to being interested in expanding my knowledge in that area. So I started from scratch. First stop: new design.
Solarized Influenced Design
Although my old blog design was also quite simple, I wanted something new, not just recreate the feel and look I got used to over the year. Additionally I wanted to focus more on the actual content, make it easier to read and understand. As I'm also not a good image designer, there had to be close to no images on the page. Heavy use of CSS was preferred.
I stumbled upon a color scheme a couple of months ago: Solarized. It is designed after the "CIELAB lightness relationships a refined set of hues based on fixed color wheel relationships". By the time I found the color scheme, I couldn't find an Emacs version1 so I sticked to my tango theme. But as I wanted to redesign the blog, it came back to my mind.
I didn't use all of the suggested colors. Especially the background color I'm using is more blueish than the golden-brownish which Ethan set for his design. The blog just felt too golden in general and since I doubt my readers will reading my blog for hours without interruption, I think the eyes don't get enough time to feel pleased by the choice of background color.
Don't Touch The Layout
While changing the visual design of the blog, I mostly kept the layout. Top header, left blog post, right sidebar. Easy. Only the navigation moved into the header. It might be a little bit hidden up there but I'll see how this works out.
I'll remove pictures from the gallery anyway in the near future, so I should be fine.
Missing Features & Display Issues
Although it has a big HTML 5 Logo in the header, I hardly use any specific HTML5 feature BUT that doesn't mean my website is running fine in every browser. The usual suspects are bothersome: IE 7 & 82.
I'm no expert regarding CSS and since the developer tools available for those browser are primitive, I don't feel like labeling those problems as urgent or even blocker.
Porting my blog to Jekyll wasn't only a positive expierience: I'm missing some features which were quite nice while I was blogging via my Wordpress solution but I'm sure I'll find a workaround for that. Also, it was not Download & Done, while it was not especially hard to port, I encountered some pitfalls and had a few "hmpf" moments.
More on that next time though!