AndreKelling / metalsmith-onepager-boilerplate

Metalsmith Starter for Onepager websites with Gulp, Browserify and Jest

metalsmith-gulp-boilerplate

A starter template for Metalsmith + Gulp + Jest projects.

Build created Demo Site.

Hardly inspired by metalsmith-gulp-boilerplate.

Installation

1. Make your project folder and clone metalsmith-onepager-boilerplate into it

2. Run the following command within your new project directory:

   $ npm install
   

3. Assuming you have installed Gulp globally, start the dev task build/watch process with this command:

   $ npm run dev
   

4. If this is your first build, you might want to package your javascript dependencies with this command:

   $ npm run build
   

5. Now you are ready to start Metalsmithing! 👍

Usage Notes

General

This boilerplate represents an opinionated setup for building static websites with Metalsmith and Gulp. It assumes you want to use Browserify with your custom scripts and helps you wrap all your javascript dependencies into one file. It uses the Sass precomplier and Handlebars templates. Gulp is responsible for the live-reloading (via BrowserSync) and the CSS / Browserify steps. Metalsmith is responsible for compiling/generating the site files.

Onepager

There is currently the collection of all sections of the onepager under src/onepager. They get looped in the homepage template layouts/layout-index.hbs with {{#each collections.onepager}}.

It's possible to configure the order the sections get displayed with the order index variable given to the single entries.

Images

Original images shall get put into images directory. They get transpiled into build/img. To use an image inline properly please use the shortcode [img src="dropworks.jpg" alt="a sample image"][/img] wich will additionally render for an optimum output. Images get formatted to .webp. This is actually just tested with .jpg and .png!

Cache Busting

Raise package.json version for proper cache busting of CSS and JS via metalsmith meta property version.

Features and Defaults

These are the current defaults, but you can swap these out for anything you want.

• Templating: Handlebars via metalsmith-layouts
• Easy Template Helper Integration: Any node modules dropped into layouts/helpers will automatically be available to your Handlebars templates
• Browserify: Browserify your javascript source automatically
• Unit Testing: via Jest
• Responsive Images picture sourcesets optimized with lazy loading lazysizes

Dependency

"metalsmith-collections": "spacedawwwg/metalsmith-collections"

Fix for duplicate output of collections content when running multiple times metalsmith build while dev

Issues

gulp image task not really nice working. this is the reason why i run the gulp webp task after the gulp build task with npm run build.

License

To the extent possible under law, André Kelling has waived all copyright and related or neighboring rights to this work.