A brander newer blog

"I want to redesign my blog" is the designer's curse. Thusly, I revamped my blog from the inside out. Here are all the gory details.

Since May I have been deconstructing my site and rebuilding it bit by bit. Trying to keep the soul of the last version (which I liked) yet having an all new perspective. The new design is now em-based, mobile first. I think I’ve got the hang of this mobile first thing now. How I approached it previously on my site was pretty LOLsy.

Jekyll under the hood

The biggest change is that I have moved away from WordPress and am using Jekyll, a static site generator, to build my site. There are a few needs that led me down this path:

  1. Writing posts in Markdown.
    Writing in Markdown is the future of websites. With Jekyll, my markdown files immediately get compiled into a website, similar to how Sass compiles down to CSS. No more logging into admin screens. No plugins to install. No clumsy WYSIWYG. Fewer moving parts.
  2. Better version control and local testing.
    One of my biggest pain points with WordPress was how my local and production sites were constantly out of sync. While version control with WordPress is possible, I’ve always felt that those two were somewhat at-odds or required some manual attention. With Jekyll, I just write a post, commit it, then deploy it.
  3. No plugin dependencies
    Occasionally my cache and minify plugins suddenly stopped working. Visitors would then get a slow experience, sometimes even a CSS/JS-less experience. While I respect the people who make those plugins, no doubt it’s a tough job, it pestered me. With Jekyll, caching is eliminated by static HTML generation and my CSS and JS are minified using CodeKit.
  4. Keep me in my wheelhouse
    With Jekyll, I’m able to stick to my wheelhouse. No PHP, just good old fashioned HTML/CSS/JS. Liquid keeps things simple and the Ruby dependency becomes a non-issue after awhile. My new goal in life is to not touch a database unless I absolutely have to. Front End, FTW.

Over the years, I’ve used Blogger, then Movable Type, then WordPress and I feel like Jekyll is the next logical progression. My blog is now a bunch of Markdown files in a folder, not textareas stuffed into a database. If you want more info on Jekyll, I recommend this Jekyll screencast from Mijingo.

Web Performance Stats

I love data. Here are some stats on the new site compared to the old site.

  Old Site New
HTTP Requests 43 12
Transfer size 250.13KB 196KB
onload 1.69s 868ms
DOMContentLoaded 1.10s 536ms
Num. of Databases 1 0
Total Size on Disk 18.9MB 6.08MB

Speed and rendering are (naturally) subject to network, but I think it’s a fair evaluation1. The Total Size on Disk and Num. of Databases are moot in regard to performance, but are reported to show how much garbage I had on my server how my life has been simplified.

Deployment

I wanted to break-up with FTP but at the same time make deployment as easy as possible for myself. I settled on using a rake task to deploy the generated HTML over Rsync to the server.

Now deploying updates to my site is as easy as opening the command line and typing:

$ rake deploy

It does take some novice-level CLI-fu, but I feel this workflow matches my minimalist desires for deployment.

Other Minutia

  • Fusion Ads – I’ve joined the Fusion Ad network. They provide a minimalist ad that is typically something I would purchase.
  • No social media buttons – I have more to say on this but weighing the requests vs. utility of Like/Tweet/Plus buttons, I decided to not implement them.
  • Code highlighting – Now using Prism.js by Lea Verou! It’s 1/5th the kb-weight of Google’s Prettify, it’s easy to style and suits my needs pretty well.
  • No comments – I like discourse but dislike “It’s broken” emails at midnight. So these are disabled. They may come back in the form of Disqus.
  • Art Direction – Custom post styling is being handled by a head and foot variables in my YAML Front Matter. Styling custom posts has never been easier.
  • Broken RSS – The URL to my RSS feed has changed so if you’re subscribed somewhere, you’ll likely have to resubscribe.

All said and done, I’m pleased with the site and now feel the freedom to resume blogging. I don’t know why the need to redesign causes such a recurring bottleneck in my life, so I’m going to commit to this design for at least 2 years. I’ve got some posts mostly finished, so expect more in the future.

  1. At the time of writing, assets are not being Gzipped for some reason on the new site. Expect those numbers to improve.

comments powered by Disqus