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

everydaynerd/statt