but you knew that
How I Blog
January 6, 2013
tags: nanoc, heroku, dnsimple
Table of Contents
Add A Page

How do I blog?

Poorly. Infrequently. Yes, but here are the technical specs for how I pull that off.
nanoc v3.4.3, heroku cedar, disqus, ruby v1.9.2, rvm, bundler, git, jquery, bootstrap, less, guard, horriblelogos.com, dnsimple
I'm using nanoc to generate static html content and I'm using heroku to host the web site. From the nanoc web site: "nanoc is a ruby based web publishing system for building small to medium-sezed websites."
Ruby, for me, for now, means rvm and bundler. Here's my Gemfile:
source :rubygems

gem 'rb-readline'
gem 'guard'
gem 'guard-shell'
gem 'rb-fsevent', :require => false
gem 'nanoc'
gem 'adsf'
gem 'rack'
and my .rvmrc file:
rvm 1.9.2-head@butyouknewthat
The guard, guard-shell, and rb-fsevent gems are for guard. nanoc and adsf are for nanoc. rack is for heroku. The rb-readline gem is also for guard but indirectly. I think ultimately it has to do with xcode tools and Mountain Lion but the bottom line is guard wouldn't work correctly for me until I added this gem.
Guard has gems for nanoc and for less but I struggled with making them work[1] so I settled for guard-shell. Here's my Guardfile:
ignore %r{.swp$}
ignore %r{output/}
ignore %r{tmp/}

guard :shell do

  watch %r{content/styles\.less} do
    `lessc content/styles.less > content/stylesheet.css`

  watch /.*/ do
    `nanoc compile`
[1] The struggle is a result of my xcode/Mountain Lion issues, not the guard-nanoc and guard-less gems, which I'm sure work fine. I had given up and moved on to guard-shell before I discovered the rb-readline "fix".
Configuring the Domain within Heroku and dnsimple
It took me a few tries before I could get my browser, dnsimple, and heroku to play nice with the "butyouknewthat' domain. Here's the setup I ended up with:
heroku heroku domain setup
dnsimple dnsimple domain setup
At this point it's just a matter of me using the tools in place to create content. nanoc and heroku(which implies git) are the main players and I won't repeat their excellent documentation here.
Add A New Page
First, in a terminal window from the project root directory, fire up guard:
bundle exec guard
In a second terminal window, start the nanoc webserver.
nanoc view
In yet another terminal window, use nanoc to create a page
nanoc create-item foo
Here's the directory structure before the create-item command: create-item. before.

And here's the after picture

create-item. after.

nanoc, via guard, has compiled the new page and because we fired up the web server via nanoc view we can see the page in the browser: foo web page

You can see the nanoc/ruby goodness has done the heavy lifting of putting my "foo" content into the pre-existing default layout.

Does my logo look like it was slapped together in 5 minutes time? Good. You can thank Horrible Logos for that.

Now it's up to me to add content to the foo page. At this point it's just html, css, and javascript, which is why I like nanoc.

Pushing New Page to Heroku

The last thing I have to take care of before I push my new content to Heroku is update the config.ru file. I copied the config.ru file defined in Heroku's devcenter. From the code below you can see I added the "/posts/foo" item to the urls array.

use Rack::Static,
  :urls => ["/images", "/img", "/js", "/css", 
  :root => "output"

run lambda { |env|
      'Content-Type' => 'text/html',
      'Cache-Control' => 'output, max-age=86400'
    File.open('output/index.html', File::RDONLY)


After a git commit and a push to the Heroku remote, my page can be accessed at butyouknewthat.com/posts/foo.html

comments powered by Disqus
Mark Haskamp
navigating crankiness toward simplicity