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
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
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!
Check out the Github pages for the three tools mentioned for complete info on all they’re capable of: