Basic example with handlebars

Since handlebars is quite a popular templating language, this example will show you how to render handlebars templating syntax in your source files. Make sure that the files that should be rendered as handlebars have a .hbs extension, since @metalsmith/in-place uses the file extension to select the appropriate jstransformer.

Install metalsmith and @metalsmith/in-place:

$ npm install metalsmith @metalsmith/in-place

Install jstransformer-handlebars

Since we're using handlebars, we'll also need to install jstransformer-handlebars:

$ npm install jstransformer-handlebars

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": {} }
  }
}

./src/index.hbs

---
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>