Eigener Blog mit Metalsmith
Mit dem statischen Seitengenerator Metalsmith kann schnell und einfach ein Blog oder eine Website erstellt werden.
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.B.: layout: content-wide.html
Layoute definieren
Um den erstellten Inhalt anzeigen zu können muss zuletzt eine HTML Vorlage definiert werden, welche die von metalsmith ausgelesenen Inhalte integriert. Das genutzte layout Plugin scannt hier das Projekt nach einem Ordner namens layout/. Falls dieser noch nicht existiert kann er erstellt werden, um darin das erste Layout zu definieren.
Ein simples Nunjucks Template, das den zuvor geschriebenen Inhalt integriert sieht folgendermaßen aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{description}">
<title>{ title }</title>
</head>
<body>
{ contents }
</body>
</html>
contents enthält hier den Markdown Inhalt als HTML Fragmente. Um mehr über die Syntax zu erfahren kann ich die offzielle Dokumentation empfehlen.
Seiten generieren
Nachdem alles definiert ist und wir mit dem Inhalt zufrieden sind, kann nun die Seite generiert werden. Dazu muss in der Kommandozeile das build.js Skript ausgeführt werden.
node ./build.js
Nach fertiger Generierung können die statischen Seiten auf den Webserver übertragen werden und die Seite ist live!
Weitere Infos zu Metalsmith gibt es auf metalsmith.io.
