Überblick über beliebte Static-Site-Generatoren

Alle Generatoren für statische Seiten haben eine einzige und scheinbar unkomplizierte Aufgabe: eine statische HTML-Datei mit all ihren Assets zu erstellen.

Das Bereitstellen einer statischen HTML-Datei bietet viele offensichtliche Vorteile, z. B. einfacheres Caching, schnellere Ladezeiten und eine insgesamt sicherere Umgebung. Jeder statische Seitengenerator erzeugt die HTML-Ausgabe anders.

Der Zweck dieses Beitrags besteht jedoch nicht darin, in die Feinheiten ihres Mechanismus einzutauchen und diese zu diskutieren, sondern den Funktionsumfang zu vergleichen, den jedes Framework bietet, und die einzigartigen Aspekte und Merkmale jedes Frameworks hervorzuheben.

Überblick über beliebte statische Seiten-Frameworks

In diesem Beitrag werden wir uns die folgenden statischen Seiten-Frameworks genauer ansehen: Jekyll , Middleman , Hugo und Hexo . Dies sind keineswegs die einzigen Generatoren da draußen, aber sie sind die am häufigsten verwendeten, unterstützt von großen Communities und vielen nützlichen Ressourcen.

Schauen wir uns jeden von ihnen genauer an und vergleichen ihre Grundfunktionen:

• Jekyll
  • in Rubin geschrieben,
  • unterstützt die Liquid-Template-Engine von Haus aus;
• Mittelsmann
  • in Rubin geschrieben,
  • unterstützt standardmäßig ERB- und Haml-Template-Engines;
• Hugo
  • geschrieben in Go,
  • unterstützt die Go-Vorlagen-Engine von Anfang an;
• Hexo
  • in Javascript geschrieben,
  • unterstützt EJS und Pug von Haus aus.

Hinweis: Es sei darauf hingewiesen, dass jeder dieser Generatoren für statische Seiten mithilfe von Plugins und Erweiterungen angepasst und erweitert werden kann, sodass Sie die meisten oder alle Ihre Anforderungen abdecken können.

Static-Site-Generatoren einrichten

Die Dokumentation für jedes dieser Frameworks ist umfassend und einfach hervorragend und Sie können sie hier herunterladen:

Jekyll-Dokumentation

Mittelsmann-Dokumentation

Hugo-Dokumentation

Hexo-Dokumentation

Wenn Sie einfach den Installationsanweisungen folgen, sollten Sie die Entwicklungsumgebung innerhalb weniger Minuten bereit haben. Nach der Installation können Sie ein neues Projekt starten, indem Sie Befehle vom Terminal ausführen.

So starten Sie beispielsweise ein neues Projekt in verschiedenen Frameworks:

Jekyll

jekyll new my_website

Mittelsmann

middleman init my_website

Hugo

hugo new my_website

Hexo

hexo init my_website

Aufbau

Die Konfiguration wird normalerweise in einer einzigen Datei gespeichert. Jeder statische Website-Generator hat seine Besonderheiten, aber viele Einstellungen sind bei allen vier gleich.

Sie können angeben, wo Quelldateien gespeichert werden oder wo erstellte Quellen ausgegeben werden sollen. Es ist immer nützlich, Daten zu überspringen, die im Build-Prozess nicht verwendet werden, indem Sie die Option exclude oder skip_render . Sie können die Konfigurationsdatei auch verwenden, um globale Einstellungen wie den Projekttitel oder den Autor zu speichern.

Migration zu einem statischen Generator

Wenn Sie bereits ein einsatzbereites Wordpress-Projekt haben, können Sie es relativ einfach zu einem statischen Seitengenerator migrieren.

Für Jekyll könnten Sie das Jekyll Exporter-Plugin verwenden. Für Middleman könnten Sie ein Befehlszeilentool namens wp2middleman verwenden. Sie können Wordpress zu Hugo Exporter für die Hugo-Migration verwenden, und für Hexo können Sie unseren Leitfaden zur Migration von Wordpress zu Hexo lesen, den ich letztes Jahr geschrieben habe.

Das Prinzip ist nahezu identisch und ganz einfach – exportieren Sie zuerst alle Inhalte in ein geeignetes Format und fügen Sie sie dann in den richtigen Ordner ein.

Inhalt

Statische Seitengeneratoren verwenden Markdown für den Hauptinhalt. Markdown ist mächtig und man kann es schnell lernen. Das Schreiben von Inhalten in Markdown fühlt sich aufgrund seiner einfachen Syntax natürlich an. Das Dokument sieht sauber und organisiert aus.

Sie sollten Artikel in einem Ordner ablegen, der in der globalen Konfigurationsdatei angegeben ist. Artikelnamen sollten der vom Generator festgelegten Konvention folgen.

In Jekyll sollten Sie einen Artikel im Verzeichnis _posts . Der Artikelname sollte folgendes Format haben: JAHR-MONAT-TAG-Titel.MARKUP. Andere Generatoren haben ähnliche Regeln und bieten einen Befehl zum Erstellen eines neuen Artikels.

Hier sind die Befehle zum Erstellen eines neuen Artikels in Middleman, Hugo und Hexo:

Mittelsmann

middleman article my_article

Hugo

hugo new posts/my_article.md

Hexo

hexo new post my_article

In Markdown sind Sie auf eine bestimmte Syntax beschränkt. Zum Glück können alle Generatoren auch reines HTML verarbeiten. Wenn Sie beispielsweise einen Anker mit einer bestimmten Klasse hinzufügen möchten, können Sie ihn wie in einer normalen HTML-Datei hinzufügen:

This is a text with <a class="my-class" href="#">a link</a> .

Vordere Angelegenheit

Front Matter ist ein Datenblock über der Markdown-Datei. Sie können benutzerdefinierte Variablen festlegen, um die Daten zu speichern, die Sie zum Erstellen besserer Inhalte benötigen. Anstatt HTML in Markdown zu schreiben, was zu einer unübersichtlichen und hässlichen Dokumentenstruktur führen könnte, könnten Sie eine Variable in der Titelei definieren.

So könnten Sie beispielsweise Tags zu Ihrem Artikel hinzufügen.

 tags: - web - dev - featured

Vorlagen in Generatoren für statische Seiten

Statische Seitengeneratoren verwenden eine Vorlagensprache, um Vorlagen zu verarbeiten. Um Daten in eine Vorlage einzufügen, müssen Sie Tags verwenden. Um beispielsweise den Seitentitel in Jekyll anzuzeigen, könnten Sie schreiben:

{{ page.title }}

Lassen Sie uns versuchen, eine Liste von Tags aus der Titelsache in unserem Beitrag in Jekyll anzuzeigen. Sie müssen prüfen, ob eine Variable verfügbar ist. Dann müssen Sie Tags durchlaufen und sie in einer ungeordneten Liste anzeigen.

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

Mittelsmann:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

Hugo:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

Hexo:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

Hinweis: Es empfiehlt sich, zu prüfen, ob eine Variable vorhanden ist, um zu verhindern, dass ein Erstellungsprozess fehlschlägt. Es könnte Ihnen Stunden des Debuggens und Testens ersparen.

Verwenden von Variablen

Ein statischer Seitengenerator stellt globale Variablen zur Übergabe von Vorlagen bereit. Unterschiedliche Variablentypen enthalten unterschiedliche Informationen. Beispielsweise enthält eine globale variable Website in Hexo Informationen über Beiträge, Seiten, Kategorien und Tags einer Website.

Die Kenntnis der verfügbaren Variablen und ihrer Verwendung könnte das Leben eines Entwicklers erleichtern. Hugo verwendet die Vorlagenbibliotheken von Go für die Vorlagenerstellung. Das Arbeiten mit Variablen in Hugo könnte ein Problem sein, wenn Sie mit dem Kontext oder „dem Punkt“, wie sie es nennen, nicht vertraut sind.

Middleman hat keine globalen Variablen. Sie könnten jedoch die Middleman-Blog-Erweiterung aktivieren, mit der Sie Zugriff auf einige Variablen erhalten, z. B. eine Liste von Artikeln. Wenn Sie globale Variablen hinzufügen möchten, können Sie dies tun, indem Sie Daten in Datendateien extrahieren.

Datendateien

Wenn Sie Daten speichern möchten, die nicht in Markdown-Dateien verfügbar sind, sollten Sie Datendateien verwenden. Zum Beispiel, wenn Sie die Liste Ihrer sozialen Links speichern müssen, die Sie in der Fußzeile Ihrer Website anzeigen möchten. Alle Generatoren für statische Seiten unterstützen YAML- und JSON-Dateien. Darüber hinaus unterstützt Jekyll CSV-Dateien und Hugo unterstützt TOML-Dateien.

Lassen Sie uns diese sozialen Links in unserer Datendatei speichern. Da alle Generatoren das YAML-Format unterstützen, speichern wir die Daten in der Datei social.yml:

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll speichert Datendateien standardmäßig im Verzeichnis _data . Middleman und Hugo verwenden das Datenverzeichnis und Hexo verwendet das source/_data directory .

Um die Daten auszugeben, könnten Sie den folgenden Code verwenden:

Jekyll

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

Mittelsmann

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

Hugo

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

Hexo

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

Helfer

Vorlagen unterstützen häufig die Datenfilterung. Wenn Sie beispielsweise den Titel in Großbuchstaben schreiben möchten, können Sie dies folgendermaßen tun:

{{ page.title | upcase }}

Middleman hat eine ähnliche Syntax:

<%= current_page.data.title.upcase %>

Hugo verwendet den folgenden Befehl:

{{ .Title | upper }}

Hexo hat eine andere Syntax, aber das Ergebnis ist dasselbe.

<%= page.title.toUpperCase() %>

Wie statische Seitengeneratoren mit Assets umgehen

Asset-Management wird bei statischen Seitengeneratoren unterschiedlich gehandhabt. Jekyll kompiliert Asset-Dateien, wo immer sie platziert sind. Middleman verarbeitet nur Assets, die im Quellordner gespeichert sind. Der Standardspeicherort für Assets in Hugo ist das Assets-Verzeichnis. Hexo schlägt vor, Assets im globalen Quellverzeichnis zu platzieren.

SASS

Jekyll unterstützt Sass von Haus aus, aber Sie sollten einige Regeln beachten. Middleman unterstützt Sass auch standardmäßig. Hugo kompiliert Sass durch Hugo Pipes für Sass. Hexo macht es über ein Plugin.

ES6

Wenn Sie moderne JavaScript-Funktionen von es6 verwenden möchten, sollten Sie ein Plugin installieren. Möglicherweise gibt es mehr als eine Version eines ähnlichen Plugins, daher möchten Sie vielleicht den Code überprüfen oder offene Probleme sehen oder sich neu dazu verpflichten, das beste zu finden.

Bilder

Auch die Bildoptimierung wird standardmäßig nicht unterstützt. Außerdem gibt es, wie bei den es6-Plugins, mehr als ein Plugin zum Optimieren von Bildern. Machen Sie Ihre Hausaufgaben und versuchen Sie, das beste Plugin für den Job zu finden. Alternativ können Sie eine Lösung eines Drittanbieters verwenden. In meinem mit Hexo erstellten Blog verwende ich den kostenlosen Cloudinary-Plan. Ich habe ein Cloudinary-Tag entwickelt und stelle responsive und optimierte Bilder über Cloudinary-Transformationen bereit.

Plugins, Erweiterungen

Generatoren für statische Seiten verfügen über leistungsstarke Bibliotheken, mit denen Sie Ihre Website anpassen können. Jedes Plugin dient einem anderen Zweck. Sie können eine große Auswahl an Plugins finden, von LiveReload für eine bessere Entwicklungsumgebung bis hin zum Generieren von Sitemaps oder RSS-Feeds.

Sie könnten ein neues Plugin oder eine Erweiterung schreiben. Prüfen Sie vorher, ob ein ähnliches Plugin existiert. Siehe Jekyll-Plug-in-Liste, Middleman-Erweiterungen und Hexo-Plug-ins. Hugo hat keine Plugins oder Erweiterungen. Es unterstützt jedoch benutzerdefinierte Shortcodes.

Shortcodes in Markdown

Shortcodes sind Codeschnipsel, die Sie in Markdown-Dokumenten platzieren können. Diese Ausschnitte geben HTML-Code aus. Hugo und Hexo unterstützen Shortcodes. Es gibt eingebaute Shortcodes, wie die Abbildung in Hugo:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Hexo YouTube Shortcode:

{% youtube video_id %}

Wenn Sie keinen richtigen Shortcode finden, können Sie einen neuen erstellen. Beispielsweise unterstützt Hexo keine CanIUse-Einbettungen, und ich habe ein neues Tag entwickelt, das die CanIUse-Einbettung unterstützt. Vergessen Sie nicht, Ihr Plugin auf npm oder der offiziellen Generatorseite zu veröffentlichen. Die Community wird es Ihnen danken.

CMS

Statische Seitengeneratoren könnten für eine nicht-technische Person Overhead sein. Das Erlernen der Verwendung von Befehlen oder Markdown ist nicht für jeden einfach. In diesem Fall könnte ein Benutzer vom Content Management System für JAMstack-Sites profitieren. In dieser Liste finden Sie ein System, das Ihren Anforderungen am besten entspricht. Beachten Sie, dass die Konfiguration des CMS einige Zeit in Anspruch nimmt, aber langfristig könnten Sie und andere Benutzer von einer effizienteren Veröffentlichung von Inhalten profitieren.

Bonus: JAMstack-Vorlagen

Wenn Sie nicht zu viel Zeit mit der Konfiguration Ihres Projekts verbringen möchten, können Sie von JAMstack-Vorlagen profitieren. Einige dieser Vorlagen sind bereits mit CMS vorkonfiguriert, was Ihnen viel Zeit sparen könnte.

Sie können auch viel lernen, indem Sie den Code untersuchen. Versuchen Sie, eine Vorlage zu installieren, vergleichen Sie sie mit anderen und wählen Sie die beste für Sie aus.

Einpacken

Statische Seitengeneratoren sind eine schnelle und zuverlässige Möglichkeit, eine Website zu erstellen. Heutzutage können Sie mit einem Generator sogar nicht-triviale und hochgradig angepasste Websites erstellen.

Zum Beispiel ist das Smashing Magazine letztes Jahr zu JAMstack umgezogen und hat es geschafft, seine Website erheblich zu beschleunigen. Es gibt andere erfolgreiche Beispiele für statische Websites, die alle dasselbe Prinzip verfolgen – statische Ressourcen zu erstellen und sie über Content Delivery Networks bereitzustellen, um schneller geladen zu werden und eine hervorragende Benutzererfahrung zu erzielen.

Es gibt noch viel mehr, was Sie mit Ihrer statischen Website machen könnten: von der Verwendung der Wordpress REST API als Backend bis zur Verwendung von Lambda-Funktionen. Selbst für einfache Websites gibt es hervorragende Lösungen, z. B. die Verwendung von HTTPS vorkonfiguriert oder die Verarbeitung von Formularübermittlungen.

Ich hoffe, dieser Überblick über statische Seiten-Frameworks hat Ihnen dabei geholfen, ihr Potenzial auszuschöpfen, und erwägen Sie, sie das nächste Mal zu verwenden, wenn Sie an ein neues Projekt denken.