Skip to content

Instantly share code, notes, and snippets.

@mwhuss
Created September 22, 2012 16:37
Show Gist options
  • Save mwhuss/3766692 to your computer and use it in GitHub Desktop.
Save mwhuss/3766692 to your computer and use it in GitHub Desktop.
Static Sites with Ruby on Heroku
This article includes contributions from [Lee Reilly](http://www.leereilly.net). Lee is a toolsmith and master pintsman hacking on [GitHub Enterprise](https://enterprise.github.com).

Static Sites with Ruby on Heroku

Cedar

Sometimes you just have a static website with one or two pages. Here is a simple way to host your static site and cache it on Heroku using a Rack app.

Your folder should be organized like this:

- MySite
  |- config.ru
  |- Gemfile
  |- Gemfile.lock
  |- public
    |- index.html
    |- images
    |- js
    |- css

To create this structure run the following commands:

:::term
mkdir -p MySite/public/{images,js,css}
touch MySite/{config.ru,public/index.html}

In Gemfile file add the following:

:::ruby
source :rubygems

gem 'rack'

You should use bundler to generate the Gemfile.lock file by running the command bundle install from within the MySite directory:

GEM
  remote: http://rubygems.org/
  specs:
    rack (1.4.1)

PLATFORMS
  ruby

DEPENDENCIES
  rack

In config.ru file add the following:

:::ruby
use Rack::Static, 
  :urls => ["/images", "/js", "css"],
  :root => "public"

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

This assumes that your template uses relative references to the images and stylesheets. Go ahead and deploy the app. If you are not sure how to deploy to Heroku check out the quickstart guide.

And there you go, a static site being served on Heroku completely cached and easily served using a single dyno.

You can see a GitHub repository with a working example here; the deployed site on Heroku can be seen here.

Bamboo

Bamboo apps are fronted by Varnish, an HTTP Accelerator, and we should take advantage of it. You may have noticed in the config.ru file we set the Cache-Control header to 86400 seconds (24 hours). This tells the accelerator to go ahead and cache the page. The accelerator already caches any Rack::File for 12 hours as well meaning all your stylesheets and images will also be cached.

To confirm it's working, let's take a look at the HTTP headers returned from your site. The Age header indicates that it's being served from the HTTP cache.

:::term
$ curl -I http://nezumiapp.com/
HTTP/1.1 200 OK
Server: nginx/0.7.67
Date: Sat, 30 Apr 2011 02:26:12 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
X-Runtime: 29
ETag: "a90d1cf7a727aee09abfc7df23bc0b71"
Cache-Control: public, max-age=86400
Content-Length: 3400
X-Varnish: 695131796 695100190
Age: 98
Via: 1.1 varnish


TODO: Deploy same app above to bamboo and change curl URL to that
@rwdaigle
Copy link

Hey Marshall, This is great coverage of the necessary files but is a little thin on context (why and what are we doing in each part) and steps (i.e.: Create folder structure, run bundler install etc...) We should try and be as direct as possible and show terminal commands and output. Since this is such a generic topic we should probably assume a very low technical barrier to entry (i.e. could your designer follow these directions and get something up?)

Could we provide a link to a GitHub project that has a barebones site (perhaps w/ Twitter Bootstrap css and js) that is ready to deploy to Heroku (the readme should have the basic deploy-this-app-to-Heroku steps).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment