At Awkward we’d like to focus on product instead of re-inventing the wheel over and over again and we like to automate things where possible to improve our workflow. If we learned one thing over the last couple of years it is that every product we ship needs to be supported by a lot of static pages such as terms of service, marketing pages and a teaser page. To make our life easier we’ve selected a development stack we feel comfortable with and created a tool which helps us getting started.
For those who aren’t familiar with Slush — Slush calls itself a streaming scaffolding system based on Gulp. But simply put it’s a tool to run Gulp tasks globally on your machine. This might not seem very useful at first but once you’ve combined the power and simplicity of Gulp with a couple of Node modules such as inquirer and gulp-template it suddenly becomes a highly customisable scaffolding tool.
Every developer has a development stack he or she feels the most comfortable working with. For us this quickly became a fully Node-based stack consisting of Jade, CoffeeScript and SASS for the basics, Bourbon to provide some useful SASS mixins and Neat as a minimalistic responsive grid system.
When we need to go modular we’re picking Browserify to stay as close to the Node module system as possible and we’re running our tasks using Gulp due to its simple API and blazing speeds.
One last thing, if you’re familiar with LiveReload, and I think you are, you should take a look at BrowserSync. It’s basically LiveReload on steroids since it leverages the power of WebSockets to sync not only file changes but also scroll-, click-, and keyboard-events to all connected browsers.
You can imagine that setting all these things up each time we need to create a project can be quite a pain. So we’ve created a Slush generator called slush-static-site and is responsible for quickly scaffolding a new project including the techniques mentioned above. We even threw in a few extra’s like the option to choose between Bourbon & Neat or going for Twitter Bootstrap and an automated deploy task for when you’re hosting your static pages on AWS S3 like we do.
Our Slush generator depends on Gulp and Slush to be installed first, but no worries you’ll be all set and ready to go with a simple command: npm install -g gulp slush slush-static-site. Once that completes you can mkdir a new directory and start our slush generator inside the directory by running slush static-site. That’s it, that is all you have to do to get started creating a new static webpage.
Check out the Github repository for slush-static-site.
