Eine Einführung in Static Site Generators

Static Site Generators können zur Erstellung von statischen Websites verwendet werden. Wir zeigen Ihnen die Grundlagen und Technologien hinter diesen immer beliebteren Anwendungen.

In der Welt der Website-Erstellung

Es gibt eine Vielzahl von Software und Tools. Ein Tool, das immer beliebter wird, ist der sogenannte „Static Site Generator“ (SSG). Ein SSG ist eine Anwendung, die automatisch die HTML-, CSS- und JavaScript-Dateien erstellt, die zur Anzeige einer Website benötigt werden. SSGs sind aufgrund ihrer Flexibilität immer beliebter geworden. Sie können als eigenständiges Werkzeug verwendet oder tief in die Architektur einer Website integriert werden.

Statisch

Wenn ein Benutzer eine Seite auf einer Website aufruft, sendet der Webserver eine Anfrage. Der Webserver antwortet dann mit einer spezifischen Datei, die auf dieser Anfrage basiert.

Auf einer statischen Website hingegen befinden sich die angeforderten Dateien bereits auf dem Webserver. Das bedeutet, dass die Dateien, die zur Darstellung der Website verwendet werden (HTML, CSS und JavaScript), unverändert sind, da sie bereits den erforderlichen Code enthalten. Im Gegensatz dazu werden Seiten auf traditionellen oder dynamischen Websites bei jeder Anfrage generiert, was in diesem Fall eine Datenbankabfrage und die Erstellung der HTML-Datei erfordert.

Eine statische Website kann dennoch interaktiv sein. JavaScript-Code, CSS-Animationen, Video- und Audioelemente sowie Datenformate wie JSON werden nach wie vor unterstützt und können auf einer statischen Website normal ausgeführt werden. Der einzige Unterschied besteht darin, dass die Dateien im Voraus generiert werden, anstatt bei Bedarf.

Website

Auf jeder Website benötigen Sie eine Möglichkeit, Inhalte zu organisieren und zu erstellen. Static Site Generators bieten eine effiziente Möglichkeit, diese Aufgabe zu erledigen. Mit einem SSG können Sie die Struktur Ihrer Website erstellen und organisieren und gleichzeitig direkten Zugriff auf die Inhalte haben. Eine der wichtigen Technologien, die in vielen SSGs verwendet wird, um all dies zu verwalten, ist ein sogenannter Template Engine.

Template Engine

Eine Template Engine ist eine Software, die Vorlagen für gemeinsame Elemente erstellt, die auf Ihrer Website erscheinen. Anstatt wiederholten HTML-Code für jede Seite Ihrer Website manuell zu schreiben, hilft eine Template Engine dabei, diese Elemente für alle Seiten zu erstellen. Zum Beispiel können Sie den Header und Footer, die auf jeder Seite Ihrer Website erforderlich sind, einmal schreiben und diesen Code dann auf den Seiten mit Template-Code anwenden. Sie können auch Variablen und Ausdrücke verwenden, um Werte innerhalb einer Vorlage zu erstellen oder zu ersetzen.

Markdown

Markdown ist eine Auszeichnungssprache, die verwendet wird, um Textdokumente zu formatieren, bevor sie in HTML umgewandelt werden. Obwohl Markdown kein vollständiger Ersatz für das Schreiben von HTML ist, kann es Ihnen helfen, Ihren Inhalt zu strukturieren, ohne sich zu sehr um HTML-Tags kümmern zu müssen.

Viele SSGs ermöglichen es Ihnen, Ihren gesamten Inhalt in Markdown zu schreiben, abgesehen vom umgebenden Code. Auf diese Weise können Sie sich auf das Schreiben von Inhalten anstelle von Code konzentrieren, obwohl Sie die Möglichkeit haben, in einer Markdown-Datei auch reinen HTML-Code zu schreiben.

Metadaten und Front Matter

Eine weitere leistungsstarke Funktion in der SSG-Toolbox sind Sprachen, die bei der Konfiguration und Formatierung von Metadaten helfen. YAML, TOML und JSON sind die Sprachen, die zur Definition von Metadaten im sogenannten „Front Matter“ Ihrer Inhaltsdateien verwendet werden. Front Matter ist strukturierte Daten, die Attribute zum Inhalt beschreiben oder definieren. Diese Daten werden normalerweise am Anfang jeder Inhaltsdatei platziert.

Mit Front Matter können Sie beispielsweise einen Titel, einen Autor, eine kurze Beschreibung Ihres Inhalts und ein spezifisches Layout aus Ihren Vorlagen definieren.

Generator

Nachdem Sie die Struktur erstellt und Inhalte für Ihre Website erstellt haben, müssen Sie sie noch erstellen. Während dieses Build-Prozesses werden alle Ihre Assets – einschließlich CSS, Bilder, JavaScript, Metadaten und mehr – in einen Prozess eingegeben und zusammengesetzt. Diese Assets und diese Einführung werden normalerweise minimiert, transpiliert, kompiliert und schließlich als statische Dateien an den Benutzer ausgeliefert.

Schlussfolgerung

Static Site Generators sind mächtige Werkzeuge für die Erstellung von Websites. Sie ermöglichen die Erstellung von schnellen und effizienten statischen Websites. Darüber hinaus können sie in Kombination mit anderen Webtechnologien die Grenze zwischen statischen und dynamischen Websites verwischen und eine wichtige Rolle im Jamstack-Ökosystem spielen. Die Verwendung von SSGs ermöglicht es Entwicklern, flexible und performante Websites zu erstellen, die die Bedürfnisse ihrer Benutzer optimal erfüllen.