Organising, building and deploying static web sites/applications

Build remotely

At the simplest end of the scale is GitHub Pages, which uses Jekyll to build the app on GitHub’s servers:

The benefit of this approach is that you can edit the source files through GitHub’s web interface, and the site will update without needing to do any local building or deployment.

Jekyll will build all CSS/SASS files (including those pulled in from bower_components) into a single CSS file. However, it doesn’t yet have something similar for JS/CoffeeScript. If this was available it would be ideal, as then the bower_components folder could be left out of the built app.

Directory structure of a Jekyll GitHub Pages app
Directory structure of a Jekyll GitHub Pages app

Build locally, deploy the built app as a separate branch

If the app is being built locally, there are several steps that can be taken to improve the process:

A good example of this is the way that the Yeoman generator for scaffolding a Polymer app structures a project (other Yeoman generators are similar):

Directory structure of a Polymer app
Directory structure of a Polymer app

Tools