---
title: Prototype with Proteus
teaser: A collection of static site generator starter kits.
tags: web,design,proteus,news
author: Joshua Ogle
published_on: 2014-12-08
---

![Proteus](https://images.thoughtbot.com/proteus-logo.svg)

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](https://thoughtbot.com/blog/the-product-design-sprint)),
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](http://thoughtbot.github.io/proteus).

## All of our favorite tools

Proteus is inspired by [Suspenders](http://github.com/thoughtbot/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 <abbr
title="Cascading Style Sheets">CSS</abbr> should be written in Sass including
the Bourbon suite (Bourbon, Neat, and Bitters). We add in
[Refills](http://refills.bourbon.io) components as needed.

## The Kits

The three kits we are starting with are:

* [Middleman](http://github.com/thoughtbot/proteus-middleman):
  A favorite at thoughtbot that does almost everything already.
* [Jekyll](http://github.com/thoughtbot/proteus-jekyll):
  Comes with blogging support, features a large community, and a tons of plugins.
* [Gulp](http://github.com/thoughtbot/proteus-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:

```bash
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.

```bash
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](http://github.com/thoughtbot/guides)
as much as possible.