Eleventy fühlt sich pur und minimalistisch an. Spannend ist, was sich mit diesem einfachen Tool alles realisieren lässt.
Eleventy fühlt sich pur und minimalistisch an. Spannend ist, was sich mit diesem einfachen Tool alles realisieren lässt.

Einen Eleventy Blog auf Netlify veröffentlichen

Nachdem ich in den beiden vorherigen Posts konzeptuell unterwegs war, zeige ich Euch hier, wie ihr mit Eleventy starten könnt um einen eigenen Blog zu erstellen und diesen bei Netlify zu hosten. Eigener Blog? Bevor wir uns tiefer mit Eleventy auseinandersetzen um einen Feed zu intergrieren und daraus Seiten zu erzeugen, fangen wir mit den Basics an.

Überblick

Aber zunächst: Was ist Eleventy

Eleventy ist eine Static Site Generator. Es erlaubt uns aus verschiedenen Template-Dateien eine statische Webseite zu erstellen. Hierbei werden diverse Templatesprachen aus dem JavaScript Umfeld unterstützt (zB HTML, Nunjucks, Liquid, Handlebars, Mustache usw.) aber auch Markdown.

Ich möchte in diesem Beitrag mit Markdown starten da wir für die hier gezeigten Beispiele auch so weit kommen. Hierzu legen wir in einem Ordner eine Datei index.md an und ergänzen den folgenden Inhalt:

Meine erste Eleventy Seite

Im selben Ordner nutzen wir npx um eleventy direkt auszuführen und unsere Markdown Datei in eine HTML Datei umzuwandeln:

npx @11ty/eleventy

Eleventy erzeugt dann einen Ordner _site in dem wir eine Datei index.html mit folgendem Inhalt finden:

<p>Meine erste Eleventy Seite</p>

Der Anfang wäre also getan. Damit dies auch im Internet abrufbar ist, deployen wir das ganze noch auf Netlify. Dafür habe ich den Code auf GitHub gehostet und richte Netlify über die CLI ein.

Seite auf Netlify veröffentlichen

Wie man seine Seite auf Netlify veröffentlicht, findet man in zahlreichen Tutorials, zum Beispiel im offiziellen Blog. Ich halte mich daher hier kurz: Installiert zunächst die Netlify CLI und meldet Euch bei Netlify an.

npm install netlify-cli -g
netlify login

Damit die Seite online geht ist ein einfacher Weg, das ganze ebenfalls über die CLI zu machen. Erneut nutzt man die Netlify CLI um den aktuellen Ordner als Netlify Seite zu initialisieren:

netlify init

Ihr durchlauft dann einen Wizard bei dem ihr eine neue Seite anlegen könnt. Wichtig sind hier am Ende zwei Angaben: Der build Command (npx @11ty/eleventy) mit dem die Seite gebaut wird und die Build Directory, die später von Netlify ausgeliefert wird (_site).

Wenn ihr den Code in Euer Repository pusht wird Netlify die Seite bauen und veröffentlichen. Mit netlify open kommt ihr direkt auf die Admin-Seite, die Eure Seite verwaltet.

Zeit für einen Blog

Ein Blog zu erstellen ist jetzt erstmal nichts neues: wir legen einen Ordner "posts" an und legen dort zwei weitere Markdown-Dateien an:

In beiden Dateien schreiben wir Text und verlinken diesen auch von der index.md aus:

# Mein Blog

- [erster Eintrag](/posts/first-post/)
- [zweiter Eintrag](/posts/second-post/)

Wir können mit Hilfe der eleventy CLI auch via npx @11ty/eleventy --serve einen Webserver starten, der die generierten Seiten ausliefert. Unser Blog ist dann unter localhost:8080 erreichbar.

Zwei Punkte sind offen:

Collections in Eleventy

Wie auch andere Static Site Generatoren erlaubt uns auch Eleventy Metadaten an jedem Eintrag zu ergänzen. Wir sprechen hier von Front Matter. So können wir beispielsweise einen Titel definieren oder auch tags.

Collections ermöglichen es, Inhalte in Eleventy zu gruppieren. Ein Dokument, wie hier unser Blogpost, kann Teil mehrerer Collections sein. Die Zuweisung erfolgt hier im jeweiligen Front Matter über den tags Schlüssel.

In unserem Beispiel ergänzen wir in beiden Blogbeiträgen einen Block der die folgende Form hat (den Titel bitte anpassen):

---
tags: blog
title: Mein erster Blogpost
---

An der Seite ändert sich hierdurch nichts. Wir haben jetzt aber eine neue Collection "blog" angelegt, über welche wir in der index.md iterieren können. Leider, klappt das zumindest bei mir nicht direkt so wie erwartet. Zunächst habe ich es so versucht:

{%- for post in collections.blog -%}

- [{{ post.data.title }}]({{ post.url }})

{%- endfor -%}

Leider hat es Elventy dann nicht geschafft, eine Liste zu erzeugen. Wenn ich hier auf HTML zurückgreife, klappt es aber.

<ul>
{%- for post in collections.blog -%}
<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{%- endfor -%}
</ul>

Das Ergebnis ist eine Liste der Blogposts.

Und wir sind fertig: wenn wir die Seite in unser Repository pushen ist sie kurz darauf auf Netlify verfügbar.

Code

Photo by Todd Quackenbush on Unsplash

Webmentions

1 Like

Sandra Parsick

3 Retweets

Eleventy André Jaenisch Jens Grochtdreis

Dies sind Webmentions über das IndieWeb und webmention.io.

Send a webmention