Welcome to our new tech blog, which is a reboot of our old tech blog.

The old tech blog was running in PHP. Wordpress maybe? Who knows or cares. Anyway, the ops guys said something like "Hey, none of you lazy developers have written a blog post in over a year, and we've got this unpatched PHP instance running, we're going to take the damn thing down." Actually they were much nicer than that. But that's what they should have said.

None of us lazy developers objected. How could we? It was true. But silently we thought, "Having a tech blog is a good thing!" On the other hand, we didn't want to ask ops to patch PHP only to have them send the same email again in a year. Plus we wanted to do something cooler than PHP and Wordpress, I mean really.


What we really needed was a simple static blog. Then ops could just serve it up with Apache or whatever. It would be simple and fast, and it wouldn't require PHP with its patches, etc. But who wants to maintain a static site? So we decided to use Middleman which gives us some of the handy rails-like tools we are used to, and then generates a static site for you. Awesome! Now creating a new blog article is easy.

# if you don't already have it
# of course, this is a private repo so it won't work if you aren't a PLM-er
git clone git@github.com:patientslikeme/tech-blog.git 
cd tech-blog

# or if you do have it just pull any changes
git pull

# then generate your article and start the server.
bundle exec middleman article mice-eating-elephants
bundle exec middleman server

Then open your new article in your text editor (it's just markdown) and start editing. Visit http://localhost:4567 to see it in your browser.

Getting Middleman Blog to Work

Getting the whole thing going was mostly pretty easy.

gem install middleman
middleman init tech-blog --template=blog

We added a few lines to our Gemfile:

gem "middleman-livereload", "~> 3.1.0"
gem 'compass'
gem "middleman-syntax"
gem "redcarpet"

And we made some additions to the config.rb:

# Reload the browser automatically whenever files change
activate :livereload

# give us syntax highlighting
activate :syntax
set :markdown_engine, :redcarpet
set :markdown, :fenced_code_blocks => true, :smartypants => true

# add some of our own assets
sprockets.append_path File.join(root, '/common/app/assets/stylesheets')
sprockets.append_path File.join(root, '/common/app/assets/images')
sprockets.append_path File.join(root, '/common/app/assets/fonts')
sprockets.import_asset 'common/global.css'

Our styles are from another project, included in our blog using git subtree. Actually, our fonts are in /common/app/asssets/webfonts, which isn't what Middleman seems to expect, but a symolic link seems to have dealt with that (after a couple of hours messing with the internals of sprockets and middleman-sprockets, d'oh).

We added a file source/stylesheets/syntax.css.erb

<%= Rouge::Themes::Github.render(:scope => '.highlight') %>

And we included all our stylesheets in layout.erb:

<%= stylesheet_link_tag 'common/global', 'application', 'syntax' %>

Since some of the articles were really old, and we didn't want to show them in "recent posts," we made this change as well:

<% blog.articles[0...5].each do |article| %>
  <% unless article.date < 1.year.ago %> <% # added this %>
    <li><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span></li>
  <% end %> <% # and this %>
<% end %>

Actually, to get 1.year.ago to work we had to add require 'active_support/all' to config.rb.

Also, we made some changes to layout.erb to change the, um, layout.

Building the Static Site

Building the static site is wicked easy:

middleman build