Blog Setup

Github Pages

Where to host our blog? Github of course! Github is the best place to collaborate on open source code and content. Github Pages offers free hosting, page generation with themes, and manually generated pages. We want to dig into some code, so we're going the manual pages route of course! Rails is famous for the 15 minute blog but we decided to go with a different Ruby solution that we could use with Github Pages.

Our blog code can be found at


Middleman is a command-line tool for creating static websites using all the shortcuts and tools of the modern web development environment.

Middleman assumes familiarity with the command-line. The Ruby language and the Sinatra web framework form the base of the tool. Familiarity with both will go a long way in helping users understand why Middleman works the way it does.

$ gem install middleman


Middleman-blog is an official extension to support blogging, articles and tagging. If we use the middleman generator with a blog template, middleman-blog with automatically be added to our Gemfile.

$ middleman init rgsocbundler --template=blog
Sass is in the process of being separated from Haml,
and will no longer be bundled at all in Haml 3.2.0.
Please install the 'sass' gem if you want to use Sass.

      create  rgsocbundler/Gemfile
         run  bundle install from "."
The source :rubygems is deprecated because HTTP requests are insecure.
Please change your source to '' if possible, or '' if not.
Fetching gem metadata from
Fetching gem metadata from
Resolving dependencies...
Using i18n (0.6.4)
Using multi_json (1.7.7)
Using activesupport (3.2.12)
Using builder (3.0.4)
Using bundler (1.3.4)
Using chunky_png (1.2.8)
Using coffee-script-source (1.6.2)
Using execjs (1.4.0)
Using coffee-script (2.2.0)
Using fssm (0.2.10)
Using sass (3.2.9)
Using compass (0.12.2)
Using ffi (1.9.0)
Using tilt (1.3.7)
Using haml (4.0.3)
Using hike (1.2.3)
Using kramdown (1.0.2)
Using rb-fsevent (0.9.3)
Using rb-inotify (0.9.0)
Using rb-kqueue (0.2.0)
Using listen (1.2.2)
Using syntax (1.0.0)
Using maruku (0.6.1)
Using rack (1.5.2)
Using rack-test (0.6.2)
Using thor (0.18.1)
Using middleman-core (3.1.2)
Using middleman-more (3.1.2)
Using sprockets (2.10.0)
Using sprockets-helpers (1.0.1)
Using sprockets-sass (1.0.1)
Using middleman-sprockets (3.1.2)
Using uglifier (2.1.1)
Using middleman (3.1.2)
Using tzinfo (0.3.37)
Using middleman-blog (3.2.0)
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.
      create  rgsocbundler/.gitignore
      create  rgsocbundler/config.rb
      create  rgsocbundler/source
      create  rgsocbundler/source/2012-01-01-example-article.html.markdown
      create  rgsocbundler/source/calendar.html.erb
      create  rgsocbundler/source/feed.xml.builder
      create  rgsocbundler/source/index.html.erb
      create  rgsocbundler/source/layout.erb
      create  rgsocbundler/source/tag.html.erb
      create  rgsocbundler/source/stylesheets
      create  rgsocbundler/source/javascripts
      create  rgsocbundler/source/images

Change directory into the new blog directory.

$ cd rgsocbundler

Start the server to make sure everything works.

$ bundle exec middleman server
== The Middleman is loading
== The Middleman is standing watch at
== Inspect your site configuration at

Point your web browser to and you should see an example page!

The server can be killed with control+C and restarted with bundle exec middleman server or bundle exec middleman.

Push to Github as soon as possible!

$ git init
$ git add .
$ git commit -m "$ middleman init rgsocbundler --template=blog"
$ git remote add origin
$ git push -u origin master

Add .gitignore

# See for more about ignoring files.
# If you find yourself ignoring temporary files generated by your text editor
# or operating system, you probably want to add a global ignore instead:
# git config --global core.excludesfile ~/.gitignore_global

# Ignore bundler config

# Ignore the build directory

# Ignore Sass' cache


# (optional) local gems, installed with
# bundle install --path vendor/bundle
# also a checkout of bundler for manpages and releases

# Bundler binstubs

Add Twitter Bootstrap files. First, download it and unzip it.

$ cp ~/Downloads/bootstrap/css/*.min.css ./source/stylesheets
$ cp ~/Downloads/bootstrap/img/* ./source/images
$ cp ~/Downloads/bootstrap/js/*.min.js ./source/javascripts

Include Twitter Bootstrap files in ./source/layout.erb

<link href="stylesheets/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="javascripts/bootstrap.min.js" />


Middleman-deploy is an unofficial extenstion that helps deploy middleman sites. Since we are making an Organization Github Page, Github expects our compiled site to be on the master branch. Middleman-deploy will take care of that for us if we give it a little configuration.

Add dependency to the Gemfile.

gem "middleman-deploy"


$ bundle

Activate deploy in config.rb and tell it to deploy to master. If you are not creating a user or organization Github page then Github expects the compiled site to be on the gh-pages branch.

activate :deploy do |deploy|
  deploy.method = :git
  deploy.branch = "master"

Edit Rakefile to add helpful tasks.

require "middleman"

task :build do
  sh "middleman build --clean"

task :publish do
  sh "middleman build --clean"
  sh "middleman deploy --clean"

Publish to Github.

$ rake build
$ rake publish