Was ist Metalsmith

Metalsmith ist ein Static-Site Generator, heißt es generiert statische HTML Seiten aus zuvordefinierten HTML Templates und Markdown Inhalten. Dadurch können ohne großen Aufwand hunderte von Artikel veröffentlicht werden ohne neue Templates, etc. anzulegen.

Installation

Um mealsmith zu nutzen müssen die benötigten NPM Pakete im Projekt installliert werden.

npm install --save-dev metalsmith metalsmith-markdown metalsmith-layouts metalsmith-in-place nunjucks

Als Templating Engine, also das Tool um den Content in die HTML Templates einzubinden wird Nunjucks von Mozilla genutzt. Es kann aber auch eine andere Engine, wie z. B. handlebars genutzt werden.

Danach muss eine JavaScript Datei erstellt werden, in der metalsmith mit den verschiedenen Plugins konfiguriert wird, z. B. build.js.

const Metalsmith = require('metalsmith'),
const markdown = require('metalsmith-markdown'),
const layouts = require('metalsmith-layouts');
const nunjucks = require('nunjucks');

const env = nunjucks.configure('src', { watch: false, noCache: true });

console.log('⚙️  Building site...');
Metalsmith(__dirname)

    // Konvertiere Markdown Inhalte zu HTML Fragmenten
    .use(markdown())

    // Füge die HTML Fragmente mit Hilfe von Nunjucks in ein Template ein
    .use(layouts({
      engine: 'nunjucks',
      pattern: '**/*.html',
      directory: 'src/layouts',
      }))

    .build(function(err, files) {
      if (err) {
        throw err;
      } else {
        console.log('✓ Build successful.');
      }
    });

Eine Liste von weiteren Plugins, die auf der Seite genutzt werden können findest du hier.

Inhalte erstellen

Inhalte können nun in Form von markdown Dateien erstellt werden. Ein simples Beispiel sieht wie folgt aus:

---
title: Example
description: This is an example page
---

## Lorem ipsum

Dolor sit amet, consectetur __strong__ adipiscing elit. Morbi 
faucibus, *em* purus at gravida dictum, libero arcu convallis 
lacus, in commodo libero metus eu nisi. Nullam commodo, neque 
nec porta placerat, nisi est fermentum augue, vitae gravida 
[link](https://metalsmith.io) tellus sapien sit amet tellus. Aenean non diam orci. Proin quis elit turpis. Suspendisse non 
diam ipsum.

### Suspendisse nec ullamcorper odio.

- Vestibulum arcu mi, sodales non suscipit id.
- Sed ac sem sit amet arcu malesuada fermentum.
- Nunc sed.

Die title, description und layout Attribute werden von metalsmith ausgelesen und zusätzlich für die Layouts verfügbar gemacht. So kann für jeden Inhalt eine eigene Überschrift oder ein Seitentitel, etc. angezeigt werden. Um ein bestimmtes Layout für den Inhalt zu nutzen muss der Name davon in das layout Attribut geschrieben werde. Z.