Wenn Sie etwas mit benutzergenerierten Inhalten oder dynamischen Daten zu einer statischen Website hinzufügen, kann die Komplexität des Build-Prozesses mit der Bereitstellung eines monolithischen CMS vergleichbar werden. Wie können wir statische Websites mit reichhaltigen Inhalten anreichern, ohne mehrere Drittanbieterdienste zusammenzufügen?
Für Entwickler ist die Wahl von statischen Website-Generatoren gegenüber traditionellen Content-Management-Systemen (CMS) wie WordPress beliebt. Im Vergleich dazu sind statische Websites in der Regel leichtgewichtig, hochgradig konfigurierbar, schnell, einfach zu bedienen und können fast überall bereitgestellt werden.
Bei statischen Websites wird kein Code auf dem Server generiert; wir haben Datenbanken und serverseitigen Code durch APIs und Build-Prozesse ersetzt.
Dies ist als JAMstack bekannt, was für JavaScript, APIs und Markup steht. Ich neige stark zu JAMstack-Websites, da ich mehr Kontrolle über die Ausgabe habe als bei den oft großen und monolithischen CMS, die ich manchmal für Kundenprojekte verwenden musste.
Trotz meiner Begeisterung bin ich oft enttäuscht über die steile Komplexitätskurve, die ich normalerweise etwa auf halbem Weg eines JAMstack-Projekts feststelle. Normalerweise sind die ersten Wochen unglaublich befreiend. Es ist einfach, loszulegen, es gibt gute sichtbare Fortschritte, alles fühlt sich schlank und schnell an. Mit der Zeit, wenn mehr Funktionen hinzugefügt werden, werden die Build-Schritte komplexer, mehrere APIs werden hinzugefügt und plötzlich fühlt sich alles langsam an. Anders ausgedrückt, die Entwicklungserfahrung beginnt zu leiden.
Das sieht normalerweise ungefähr so aus
Ein Grund für diesen steilen Anstieg der Komplexität ist, dass es Grenzen für die Art von Daten gibt, die Markdown leicht darstellen kann. Beziehungen sind ein Beispiel, bei dem statische Websites Schwierigkeiten haben. Beziehungen zwischen Seiten oder Sammlungen von Assets (wie eine Bildgalerie) können nur auf ineffiziente Weise durch Markdown dargestellt werden. Es erfordert erhebliche Vorverarbeitung, um alles Komplexere als eine einfache Sammlung von Tags oder Kategorien aufzulösen. Wenn Sie dies jemals tun mussten, wissen Sie auch, dass die Autoren-Erfahrung bei der Verwaltung von Beziehungen in Markdown nicht ideal ist.
Benutzergenerierte Inhalte sind ein weiterer Bereich, der zu einem steilen Anstieg der Komplexität statischer Websites führen kann. Das Hinzufügen von Funktionen wie Kommentaren, Bewertungen, Likes oder jeder anderen Art von dynamischen Inhalten erfordert Drittanbieterdienste – jeder hat sein eigenes Konto, das verwaltet werden muss, ganz zu schweigen davon, dass das Hinzufügen von Drittanbieter-Skripten negative Auswirkungen auf die Seitenleistung haben kann.
Wenn ein Dienst nicht Ihren spezifischen Anforderungen entspricht, ist es manchmal möglich, Lösungen mit generischen Plattformen wie Google Forms oder AirTable zusammenzuflicken.
Das Endergebnis ist, dass wir die Datenbank ausgelagert, die Content-Management-Erfahrung fragmentiert und einen Kompromiss zusammengeflickt haben. Das steht in starkem Kontrast zur anfänglichen Leichtigkeit der Einrichtung und Bereitstellung einer JAMstack-Website.
Obwohl diese Komplexitätskurve nicht einzigartig für JAMstack-Projekte ist, ist das Hinzufügen von reichhaltigen Funktionen zu Markdown-gesteuerten Websites weitaus schwieriger, als wir zugeben wollen. Was ist passiert!? Ein Mangel an Komplexität war einer der Gründe, warum wir JAMstack überhaupt bevorzugt haben.
Wir haben getan, was Webentwickler tun. Wir haben die Komplexität von einem Bereich in einen anderen verlagert und uns selbst auf die Schulter geklopft 😂. Keine serverseitige Komplexität ist gut für die Frontend-Performance, aber es gibt wenig Anreiz, weiter zu optimieren, sobald wir dies tun. Lächerliche Build-Zeiten und komplizierte Toolchains sind zu einer akzeptablen Realität für die moderne Frontend-Webentwicklung geworden.
JAMstack Plus
Bevor ich zu kritisch klinge, sollte ich klarstellen, dass ich statische Website-Generatoren absolut liebe. Ich halte sie für eine perfekte Lösung für viele einfache Websites und Sie sollten sie immer noch verwenden. Ich bin jedoch der Meinung, dass eine einfache Content-Management-Schicht, die ich besitze und konfigurieren kann, vorzuziehen ist gegenüber
- schlechte Content-Management-Erfahrungen,
- komplizierte Integration von Drittanbieterdiensten und
- ineffiziente Build-Prozesse.
Ich möchte die Vorteile eines CMS mit statischen Website-Generatoren kombinieren.
Und es scheint, dass ich nicht der Einzige bin, der zu diesem Schluss gekommen ist
WordPress (et al) wird oft _gegen_ statische Website-Generatoren ausgespielt.
Ich verstehe. Sie fühlen sich wie verschiedene Welten an.
Aber SSGs nehmen nur Eingaben und erzeugen statische Ausgaben. Sie möchten/benötigen möglicherweise immer noch ein CMS, und WordPress kann das sein. Es verfügt über APIs, die ein SSG verarbeiten kann.
— Chris Coyier (@chriscoyier) 11. Juni 2019
Meine Erfahrungen mit statischen Website-Generatoren haben mich zu der Meinung gebracht, dass sie eine unglaublich überzeugende Arbeitsweise sind, aber stellen Sie sicher, dass Sie wirklich eine statische Website wollen. Zu oft sehe ich einen unordentlichen Kompromiss, um mit Dingen umzugehen, die eine DB leicht machen würde.
— Rachel Andrew (@rachelandrew) 20. September 2019
WordPress ist eine fantastische und vertraute Content-Editing-Erfahrung, aber was wäre, wenn Sie Ihre Website statisch für ultimative Geschwindigkeit, Stabilität und Sicherheit bereitstellen könnten? ⚡️ Sie können, und hier ist ein großartiger Überblick über Plugins für Headless WordPress auf Netlify: https://#/lz6fscbX3q
— Netlify (@Netlify) 30. Juli 2019
Die Lösung muss kein weiterer Drittanbieterdienst sein oder das vollständige Aufgeben von statischen Websites erfordern. Sie können eine personalisierte Content-Management-Schicht und eine einheitliche API verwenden, um eine statische Website anzureichern. Es ist vielleicht nicht so schwer, wie Sie denken.
Der erste Schritt ist die Erstellung einer API für Ihre Website. Sie können jedes Headless-CMS verwenden, aber die Herausforderung, die ich mit vielen Optionen hatte, ist, dass sie viele Annahmen über die Art von Inhalten treffen, die Sie wünschen. Sie möchten vielleicht nicht, dass das CMS Seiten und Beiträge verwaltet, sondern es verwendet, um Kommentare oder Bilder zu speichern. Das finde ich besonders schwierig mit WordPress. Ich habe oft das Gefühl, dass ich eine Blogging-Plattform zu dem Dienst mache, den ich brauche.
Die neue Version von KeystoneJS (Keystone 5) ist eine ausgezeichnete Alternative zu meinungsstärkeren Content-Management-Systemen. Es besteht aus winzigen unabhängigen Komponenten, sodass Sie nur die Teile hinzufügen, die Sie benötigen. Das bedeutet, dass es sich nicht wie die Modifizierung einer Blogging-Plattform anfühlt. Stattdessen ist es wie die Erstellung eines personalisierten Mini-CMS und einer API, die speziell mit Ihrer Website zusammenarbeitet.
Ich nenne diesen Ansatz JAMstack Plus.
Um Ihnen den Einstieg in diese Idee zu erleichtern, habe ich zwei Projekte erstellt
- Supermaya, ein Starter-Kit für den statischen Website-Generator Eleventy.
- Keystone JAMstack Plus, eine Plattform zur Anreicherung von Blogs.
Einführung in Supermaya
Das erste Projekt, das ich mit Ihnen teilen möchte, ist Supermaya, ein Eleventy-Starter-Kit, das entwickelt wurde, um reichhaltige Funktionen zu einem Blog oder einer Website ohne komplizierten Build-Prozess hinzuzufügen.
Es enthält alle "Blog-Standard"-Funktionen, einschließlich
- Beiträge und Seiten
- Pagination (Seitennummerierung)
- Tags
- RSS-Feed
- Service Worker
- Lazy Loading von Bildern
- Critical CSS (falls aktiviert)
Es verfügt auch über eine durchdachte und zugängliche Markup. Wenn es korrekt bereitgestellt wird, sollte es out-of-the-box volle Punktzahlen bei einem Lighthouse-Audit erhalten.
Ich habe Supermaya nicht speziell als Plattform zum Hinzufügen von benutzergenerierten Inhalten zu statischen Websites entwickelt. Stattdessen habe ich es gestartet, weil ich mit der Art und Weise, wie bestehende statische Website-Generatoren mit anderen Build-Tools integriert werden, nicht zufrieden war. Deshalb sind alle Vorverarbeitungsschritte in Supermaya in Eleveny selbst integriert. Dazu gehört die Kompilierung von SCSS und JavaScript. Die Vereinheitlichung der Kompilierungsschritte macht Build-Tools wie Grunt, Gulp oder Webpack, die parallel laufen, überflüssig.
Danach erkannte ich, dass der andere Grund für die zunehmende Komplexität von JAMstack-Websites die Integration mit Drittanbieterdiensten war, normalerweise für benutzergenerierte Inhalte. Um dies zu lösen, verfügt Supermaya über optionale Anbindungen an ein Keystone JAMstack Plus Starter-Kit, das das Hinzufügen von benutzergenerierten Inhalten und anderen reichhaltigen Funktionen erleichtert.
Sie können sowohl Keystone als auch Supermaya gemeinsam bereitstellen und sie gleichzeitig verbinden, indem Sie die Anweisungen während der Installation befolgen. Dies stellt Keystone auf Herouku und Supermaya auf Netlify bereit und konfiguriert Ihren Admin-Benutzer und die API-URL.
Reichhaltige Funktionen werden mit progressiver Verbesserung hinzugefügt, sodass die Website auch dann funktioniert, wenn die API nicht erreicht werden kann oder ein Serverfehler auftritt, ohne dass es zu spürbaren Beeinträchtigungen oder Verzögerungen für die Benutzer kommt.
JAMstack Plus Starter-Kit
Das Keystone JAMstack Plus Starter-Kit ermöglicht es Ihnen, reichhaltige Funktionen zu einem Blog hinzuzufügen, einschließlich
- Kommentare
- Applaus
- Leseliste und
- Logins
Ähnlich wie Supermaya kann es eigenständig verwendet werden. Nach der Bereitstellung erhalten Sie Zugriff auf eine Admin-Oberfläche, mit der Sie Inhalte erstellen und verwalten können. Sie erhalten auch einen GraphQL-Endpunkt, der mit Supermaya verbunden werden kann.
Es ist mit der Absicht konfiguriert, ein Headless-CMS für benutzergenerierte Inhalte zu sein. Es erwartet, dass Seiten und Beiträge von einem statischen Website-Generator verwaltet werden. Mit etwas Arbeit – und nach den Beispielen in Supermaya – können Sie jedoch jede Frontend-Anwendung mit der GraphQL-API verbinden.
Ich ermutige Sie, das Starter-Kit zu modifizieren: Fügen Sie zusätzliche Funktionen hinzu oder stellen Sie Inhalte für Seiten direkt von Keystone bereit. Wenn Sie Funktionen hinzufügen, die vom Rest der Community genutzt werden könnten, tragen Sie zum Starter-Kit bei und wir können es für alle einfacher machen, reichhaltige Funktionen zu ihren Websites hinzuzufügen, ohne auf Drittanbieterdienste zurückgreifen zu müssen.
Hinweis: Der automatische Bereitstellung erfolgt auf einer kostenlosen Instanz von Heroku. Diese schläft periodisch ein, wenn sie nicht verwendet wird, was nach Inaktivitätsperioden zu langsamen API-Antwortzeiten führen kann. Sie können auf eine Hobby-Instanz upgraden, um dies zu vermeiden.
Betrachten Sie den Besitz Ihrer eigenen Daten
JAMstack und Server sind nicht unvereinbar. Es gibt immer einen Server (normalerweise mehrere) – es ist nur eine Frage, wem er gehört. Wenn Sie irgendeine Art von Drittanbieterdienst nutzen, ist die Wahrscheinlichkeit groß, dass diese Ihre Kontoinformationen, Ihre Inhalte besitzen und Benutzerdaten sammeln.
Manchmal ist dies ein akzeptabler Kompromiss im Vergleich zum Aufwand für die Bereitstellung und Verwaltung eines Backend-Dienstes, aber wenn die Komplexität des Zusammenfügens mehrerer APIs mit einem CMS vergleichbar wird, glaube ich, dass die Verwaltung eines winzigen konfigurierbaren Dienstes, den Sie besitzen, eine bessere Erfahrung für Benutzer, Entwickler und Content-Manager bieten kann. Es bietet auch eine solide Plattform für Websites, die über rein statische Inhalte hinaus zu komplexeren und unterschiedlichen Arten von Anwendungen wachsen.
Ich glaube nicht, dass JAMstack durch die Verlagerung der gesamten Komplexität in den Frontend-Build-Prozess oder durch Kompromisse bei der Entwickler- und Benutzererfahrung definiert werden sollte. Stattdessen denke ich, dass JAMstack sich darauf konzentrieren sollte, schlanke, konfigurierbare statische Frontends bereitzustellen. Diese können mit APIs verbunden werden, um benutzergenerierte Daten und Content-Management-Dienste bereitzustellen. Es gibt keinen Grund, diese Dienste nicht zu besitzen und zu verwalten, wenn dies das beste Ergebnis liefert.