A Fun Little Workflow for Developing Static Sites

This tutorial assumes you’re familiar with Ruby and will be using it on your local machine. If you want to deploy to Amazon S3, be sure to work through configuring an S3 Bucket as a website and adding your S3 Bucket as a CloudFront distribution.

I’ve recently been interested in different ways to develop and serve static sites, and have been exploring all the different platforms and deployment options. In preparation for creating a basic portfolio site for myself, I came up with this quick solution using a few simple tools that works very well!

I work in Ruby, so Jekyll is the first thing that comes to mind for static sites, but it seems both too powerful and not powerful enough – I wanted to go with it since the code was tested and proven, but it’s very locked-down and adding a bunch of extensions to a simple static site generator becomes a bit kludgy.

Build the site

There are plenty of other static site options, but I went with Stasis, which I’d only recently discovered. Two things stood out immediately that made me a fan: It’s very Sinatra-ish and it uses Tilt to support a wide variety of file formats, instead of being hard-coded to Markdown, etc.

Building a site with Stasis is simple: Install the gem, put together a folder of Tilt-compatible files, run stasis inside that folder, and it will spit out a directory of rendered files. When you’re developing your site, run stasis -d to re-generate static files each time a file is saved.

Preview the site

Previewing a static site in a browser as file:/// URLs can cause some annoying gotchas, so if you run Stasis with stasis -d <PORT NUMBER>, it will start up a WEBrick server for easy in-browser previewing!

If you ever have some static files that you want to test out in a browser, you can also install Node Static, which is a dead-simple nodejs utility that will kick up a quick server at whatever directory you’re in just by running the static command.

Deploy the site

After running Stasis inside your directory of templates, you’ll have a public subdirectory containing rendered files that you can upload to any host you like! HTML can be rendered using a common layout file, SASS and Less can be compressed if you like, and images are copied over as-is.

Static sites are durable and can handle a huge amount of traffic with little impact, but I wanted to go a step further and host everything on S3 with CloudFront. Another clever utility called fog_site makes uploading to S3 and invalidating caches on CloudFront a breeze. Fog Site takes a set of config variables that include the folder you want to upload, your S3 credentials, and your CloudFront distribution ID (different than your URL!), then uploads the site with one quick deploy!

I put the whole config info into a Rake task, so that, when I want to deploy the static site to S3, I just call rake deploy from the command line and the script uploads any changed files in the public directory to S3. Now you’ll have an incredibly quick site served with the power of Amazon!

More info

Check out the Github pages for the three tools mentioned for complete info on all they’re capable of:

https://github.com/winton/stasis/
https://github.com/cloudhead/node-static
https://github.com/bpo/fog_site

To get your domain name pointed at the S3 bucket or CloudFront URL, use DNSimple and you can use their custom ALIAS record type to use a bare domain and end your www-troubles.

If you’re interested in similar solutions to static sites, both Middleman and Frank may be what you’re looking for!