Home

To help you to get started with metalsmith templating, we've created a collection of examples that demonstrate common use-cases. The examples are written for the latest major versions of metalsmith-in-place and metalsmith-layouts.

Feel free to contribute new examples or update existing ones. To help newcomers, please keep the examples as simple and clear as possible, and try to stick to the existing style. If anything is unclear, feel free to let us know in our slack channel so we can improve it!

Examples

Basic example with markdown

A lot of people prefer to write their content in markdown instead of directly in html. This example shows you how to use metalsmith-in-place to transform markdown to html.

Basic example with nunjucks

Another common use-case is using a templating engine to render variables in your html. This example shows you how you'd use nunjucks to achieve this.

Basic example with handlebars

You might prefer using handlebars instead of nunjucks to do your templating. This example shows you how to do so with metalsmith-in-place.

Advanced example with markdown and nunjucks

This example demonstrates a common way of building a blog with metalsmith. It uses metalsmith-in-place to render your markdown source files to html, and then applies metalsmith-layouts to wrap the result in a common base template.

Advanced example with markdown and syntax highlighting

This example shows how to use engine options to configure the underlying jstransformer. It also demonstrates using metalsmith's javascript api, instead of the cli.

Advanced example with nunjucks template inheritance

If you want to skip metalsmith-layouts, and just directly use a language that supports inheritance, you can do so with metalsmith-in-place. In this case we'll show you how to do so with nunjucks.

Advanced example with custom nunjucks filter

Nunjucks already comes with a lot of built-in filters, but maybe you want to create your own. This example shows you how to add your own filters with metalsmith-in-place.