The Minimill project template is the best way to build static sites fast. With one command, build a static page using Gulp, ES6, Handlebars.js, and SCSS.

• Install the project in just three commands (see "Developing" below).
• Use Handlebars.js to keep our HTML organized into templates and partials.
• Use SCSS to keep our CSS organized into logical components.
• Use Autoprefixer to automatically insert browser prefixes where necessary to handle cross browser compatibility.
• Use Browsersync to automatically launch a development version of our website, reload the page whenever we change the HTML, and inject changes to CSS, JavaScript, and images with needing to reload.
• Use HTML Minifier, [CSSNano][cssnano], UglifyJS, and ImageMin to compress and optimize our HTML, CSS, JavaScript, and images, respectively.
• Use SCSS-Lint, JSHint, and JSCS to perform linting and style checking on our SCSS and JavaScript files.
• Use Bable to allow us to write JavaScript with new ES6 features.

All with one command from the terminal:

gulp serve

Install npm. Then, install gulp:

npm install -g gulp  # May require `sudo`

npm install
gem install scss_lint
gulp serve

An overview of Gulp commands available:

Builds the site into the dist directory. This includes:

• SCSS w/ linting, sourcemaps and autoprefixing
• JS linting, uglification, and ES6 to ES5 conversion
• Handlebars to HTML

This is used for distributing an optimized version of the site (for deployment). It includes everything from gulp build as well as:

• SCSS minification
• CSS / JS inline-sourcing

Watchs for changes in local files and rebuilds parts of the site as necessary, into the dist directory.

Runs gulp watch in the background, and serves the dist directory at localhost:3000 with automatic reloading using Browsersync.

For use by the Minimill team only. Deploys to work.minimill.co/TITLE/, but won't do so without proper authentication.

├── Gulpfile.js       # Controls Gulp, used for building the website
├── README.md         # This file
├── data.yml          # Metadata associated with the site.
├── dist/             # Gulp builds the static site into this directory
├── package.json      # Dependencies
└── src/              # All source code
    ├── font/         # Font files
    ├── img/          # Images and SVGs
    ├── js/           # Javascript libraries and scripts
    ├── partials/     # Handlebars HTML partials that are included / extended
    ├── sass/         # Stylesheets
    └── templates/    # Handlebars HTML files, one per page on the site.