Statt

A Metalsmith workflow and boilerplate for building static sites.

It uses Browsersync to autoreload on file changes, synchronize scrolls and clicks between browsers, and provide a public URL for easy cross-device development. It compiles, autoprefixes, minifies, and sourcemaps SCSS and concatenates and uglifies JS. It has some default layouts and partials written in Handlebars and some blog posts written in GitHub Flavored Markdown. Easily deploy your project with a custom domain for free using Surge.

Installation

1. Make sure Node and npm are installed.

2. Clone this repo into a new empty project folder:

git clone https://github.com/jamiewilson/ore.git <folder-name>

3. Install the dependencies:

npm install

Usage

Build your site and launch the dev server:

npm start

To rebuild a clean site with each file change:

npm run clean

Build without launching the dev server:

npm run production

Et voil.

Complete list of plugins/packages:

Metalsmith An extremely simple, pluggable static site generator.

Browsersync Keep multiple browsers & devices in sync when building websites.

Handlebars Clean logicless templates based on the Mustache Templating Language.

Surge Publish web apps to a CDN with a single command and no setup required.

Metalsmith Plugins

metalsmith-assets Include static assets in your build. Used to create a separate /assets folder.

metalsmith-autoprefixer Automatically add vendor prefixes to CSS.

metalsmith-collections Groups files together into collections, which it adds to the global metadata.

metalsmith-static Copy public assets into the build directory. Used to create a /repo folder that includes files like a README, CNAME, or .gitignore

metalsmith-date-formatter Format dates defined in the YAML Front Matter.

metalsmith-drafts Hide any files marked as drafts.

metalsmith-in-place Allows you to render templating syntax in your source files.

metalsmith-layouts Allows you to apply layouts to your source files.

metalsmith-markdown Convert Markdown files to HTML.

metalsmith-data-markdown Use markdown content within html tags via data-markdown attribute.

metalsmith-permalinks Apply custom permalinks and rename files to be nested properly for static sites, basically converting about.html into about/index.html.

metalsmith-sass Convert Sass/SCSS syntax to CSS.

metalsmith-uglify Concats/uglifies/minifies your JavaScript files.

metalsmith-watch Watches for a changes and triggers rebuilds.

Misc.

Chalk Terminal string styling done right.

Updating

To fetch and merge the latest version of Statt without losing any customizations you've made, and to also avoid having to deal with any potential merge conflicts, add and then stash your changes, pull the latest code and rebase, then pop your changes back on top:

git add .
git stash
git pull --rebase
git stash pop