Danger, Danger: High Voltage! Use Rails 3.1 for Static Sites

I’m a big fan of Jekyll, but boy do I love SCSS and CoffeeScript. I recently set out to create a static site using Rails 3.1, to take advantage of the lovely Sprockets integration. There are alternatives (like Middleman, and Octopress) but I wanted to use Rails itself instead.

Our homebrewed high_voltage gem allows for static pages, so I wanted to use that to hook up my little static site that will eventually be dynamic. Here’s the process I used.

Before we start, watch this video.

Fire in the disco

Generate the app:

gem install bundler --pre
gem install rails --no-ri --no-rdoc
rails new danger_danger

Swap out your Gemfile with:

source 'http://rubygems.org'

gem 'rails', '3.1.1'

gem 'flutie'
gem 'high_voltage'
gem 'jquery-rails'
gem 'redcarpet'

gem 'sass-rails',   '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'

Rebundle and let’s remove some other cruft:

bundle
rm config/database.yml public/index.html
rm -rf app/{helpers,mailers,models} test/ doc/ db/

Rails includes all of the subframeworks (ActiveRecord, ActionMailer, etc) by default. We don’t need those, so at the top of config/application.rb, you can replace require 'rails/all' with:

    require 'rails'
    require 'action_controller/railtie'

There’s references to ActionMailer in the various config/environments/ files…it’s best to just comment them for now since we may want it back later.

# comment out this in config/environments/development.rb
config.action_mailer.raise_delivery_errors = false

# comment out this in config/environments/test.rb
config.action_mailer.delivery_method = :test

I want to write templates in Markdown, so we’ll need to tell Rails to handle that. Drop this into config/initializers/redcarpet.rb, thanks to this gist. Hopefully in future versions of Rails this will be easier if Tilt is integrated into ActionView.

class ActionView::Template
  class Redcarpet < Handler
    include Handlers::Compilable

    def compile template
      ::Redcarpet.new(template.source).to_html.inspect
    end
  end

  register_template_handler :md, Redcarpet
end

Let’s start with just a homepage. Change vim to your editor of choice!

mkdir app/views/pages
vim app/views/pages/home.html.md

In that file, you can write Markdown as normal:

# Welcome to the home page!

This should say something important.

In your config/routes.rb, point to it:

root :to => 'high_voltage/pages#show', :id => 'home'

Fire up your server, and you should be able to see your home page!

rails server

Awesome! You should now see your home page rendered in markdown. What’s even better is that you can include CoffeeScript and SCSS like you normally would with a Rails app. The Rails Guide on the asset pipeline is a great read for this if you haven’t seen it.

For more static pages, you just need to drop different markdown files into app/views/pages, and High Voltage will render them as normal at /pages/:yourpage, like so:

echo "Fire in the" > app/views/pages/disco.html.md
open http://localhost:3000/pages/disco

I’ve put a repo up on GitHub if you want to check out a working version of this.

Don’t you want to know how we keep starting fires

Ok sure, this is a lot of setup for a static site. The idea is that eventually I want to be using Rails anyway, so why not just use it to start? If I end up creating another one of these, I may end up making a Rails Template, which makes the legwork of setting this kind of Rails app up way easier. For now, this works great, and I hope it helps you out too!