From Wordpress To Jekyll: Layout & Design
written by André Gawron, 29. March 2012It 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.
The only major layout overhaul was the gallery. The photos, while on the gallery's page, should move into the focus of the reader. The old thumbnails were very small and there were pages you had to go through when not using the Javascript-Viewer. For most galleries, I wanted to keep every photo on a single page to easily skim the photos. I planned to let large galleries use pagination but after loading the Zombiewalk 2009 Gallery with its 170+ photos, I saw it instantly loaded more or less. So why bother creating pagination? I'm totally inline with others on removing as much pagination as possible.
I'll remove pictures from the gallery anyway in the near future, so I should be fine.
Missing Features & Display Issues
With the move to Jekyll I also removed some things I had on the previous blog, mainly archive pages like tags. Some of them are gone forever, some of them will find it's way back to the blog in the near future - at least a simple list of all published posts. Another currently missing feature is a nice javascript-based image viewer. I used lightbox but will now roll my own, to keep it as simple as possible on one hand, but to write more javascript stuff on the other hand. Last but not least, the sharing link at the end of every blog post is also missing right now - on purpose, but not forever.
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.
Technical Walkthrough
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!
