Basic example with nunjucks

If you want to render nunjucks templating syntax in your source files you'll need to use @metalsmith/in-place. Since @metalsmith/in-place uses the file extension to select the appropriate jstransformer, all the files that we want to render with nunjucks must have a .njk extension.

Install metalsmith and @metalsmith/in-place:

$ npm install metalsmith @metalsmith/in-place

Install appropriate jstransformers

In this case we're using nunjucks, so we'll also need to install jstransformer-nunjucks:

$ npm install jstransformer-nunjucks

Configure metalsmith

We'll create a metalsmith.json configuration file and a file for @metalsmith/in-place to process:

./metalsmith.json

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "@metalsmith/in-place": true
  }
}

./src/index.njk

---
title: This is a variable, defined in the file's frontmatter
---
<h1>{{ title }}</h1>
<p>Some text here</p>

Build

To build just run the metalsmith CLI (note that you'll need [email protected] or higher to use npx):

npx metalsmith

Which will output the following file:

./build/index.html

<h1>This is a variable, defined in the file's frontmatter</h1>
<p>Some text here</p>