Prototype with Proteus

We use static site generators for everything from design prototypes to marketing websites, to just testing out a quick idea.

There are quite a few static site generators out there and they all have their purpose. The one for you depends mostly on your preferred programming language. In the case of creating a prototype for a project, it is helpful to build assets for the static site that you can bring straight into the full app, rather than spending time rewriting it. If you are pressed for time while building your prototype (and that’s often the case with Product Design Sprints), anything that speeds up your setup is going to mean more time to polish or squeeze in one more feature.

That’s why we made a collection of static site starter kits called Proteus.

All of our favorite tools

Proteus is inspired by Suspenders, a handy way to help eliminate the process of setting up a Rails project with a common starting point. These kits help us get the same thing for static sites. It is still the normal generator, but with those tools preinstalled and some tweaks to make the structure more consistent where possible.

Our usual front-end toolset is one that is pretty common these days. It lets us write much simpler code to keep us moving quickly. We like Haml for writing templates, CoffeeScript for the JavaScript we write, and of course our CSS should be written in Sass including the Bourbon suite (Bourbon, Neat, and Bitters). We add in Refills components as needed.

The Kits

The three kits we are starting with are:

• Middleman: A favorite at thoughtbot that does almost everything already.
• Jekyll: Comes with blogging support, features a large community, and a tons of plugins.
• Gulp: A great introduction to the world of simple Javascript build tools.

Some handy shortcuts

You can install the proteus gem to make things even easier:

gem install proteus-kits

To grab a kit from the collection, just use proteus new followed by the kit you would like to use (“middleman”, “jekyll” or “gulp” for now), and then your project name. It will clone the repo into a new directory with your project name. Then cd into your project folder to get started.

proteus new middleman my-project-name
cd my-project-name

Now you have access to a few more shortcuts so you don’t have to remember the commands for each generator.

• proteus setup: Installs dependencies
• proteus server: Runs your server
• proteus deploy: Builds your files if necessary and deploys to Github Pages

If you want to deploy to another server, just follow the normal instructions for the generator you are using.

We want to see more kits

If you have experience with a generator that we haven’t listed, put something together and let us know about it. A new kit should include all of the tools above, and should conform to the thoughtbot style guides as much as possible.