Schnelle Websites mit großen Datenmengen bei gleichzeitig einfacher Wartung sind durchaus eine spannende Herausforderung, wenn man bekannte Content-Management-Systeme wie Typo3 oder WordPress benutzt. Ein komponentenbasierter Ansatz, wie wir ihn aus modernen JavaScript-Frameworks wie React oder Vue.js kennen, ist hier nicht von Haus aus implementiert. Wer jedoch nicht auf die Vorteile von höchst dynamischen Templates mit beeindruckender Ladezeit verzichten möchte, ist schnell beim Konzept eines Static Site Generators. Der Ansatz eignet sich gerade für Webseiten mit einer großen Anzahl an Einzelseiten. Bei der abschließenden Generierung der einzelnen Dateien werden komplett statische HTML-Dateien erstellt, die auf jeden Webserver gehostet werden können. In den letzten Jahren wurden verschiedene Generatoren entwickelt, die auf moderne JavaScript-Frameworks als Basis setzen.
Dieser Artikel stellt den Static Site Generator Gridsome vor. Ein Generator für alle, die bereits mit dem JavaScript-Framework Vue.js vertraut sind. Wir zeigen in diesem Beitrag, wie ein Projekt mit Gridsome erstellt wird, wie die einzelnen Templates funktionieren und wie man schlussendlich seine statische Website zum Deployen erstellen lassen kann.
JAMstack — was, warum und wie?
Der Begriff JAMstack — eine verkürzte Form von JavaScript, API und Markup — erlebt derzeit einen Hype in der Frontend-Community. Die Vorteile des JAMstack-Ansatzes liegen für dessen Befürworter auf der Hand:
- Schnelle Ladezeiten von statischen Websites
- Kostengünstiges und leichtes Skalieren
- Größere Sicherheit gegenüber anfälliger Backends
- Bessere Entwicklungsumgebungen
Gerade für größere Websites muss der Aufwand der Erstellung von statischen Seiten im höchsten Grad automatisiert werden. Es bedarf extern gepflegter Daten, auf die mithilfe von Schnittstellen zugegriffen werden kann. Der JAMstack braucht Backends und CMS-Systeme stärker denn je. Nur ändert sich die Rolle dieser. Wir erleben einen regelrechten Hype von sogenannten Headless CMSs. Diese geben nicht mehr die Präsentationsschicht vor, wie beispielsweise WordPress mit seinen Templates in PHP, sondern stellen lediglich noch einen Endpunkt zu den Daten zur Verfügung. Das Rendering der Daten erfolgt dann im jeweiligen Build-Prozess eines Static Site Generators.
Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten
Gridsome — Static Site Generator mit Vue.js
Eines der JAMstack-Frameworks ist das auf Vue aufgebaute Framework Gridsome. Es hat Features wie Pre-Rendering, einen zentralen GraphQL-Datenspeicher und zahlreiche Plugins, die einem zur Verfügung stehen.
Arbeitsweise
Um den Ansatz von Gridsome während der Entwicklung zu verstehen, empfiehlt es sich, die Arbeitsweise des Generators genauer anzuschauen. Sowohl im Entwicklungs- als auch im Build-Modus ruft Gridsome zunächst einmal die Daten aus den definierten Datenquellen wie CMS, lokalen Dateien wie Markdown-Dateien oder externen APIs ab. Der lokale GraphQL-Datenlayer agiert als zentralisiertes Datenmanagementsystem, das die Daten verwaltet und Ihnen die Möglichkeit gibt, Daten innerhalb der erstellten Vue-Komponenten zu extrahieren und zu verwenden.
Für die Entwicklung bietet Gridsome den Befehl gridsome develop, der den lokalen Server mit Hot-Reloading und einer GraphQL-Datenschicht startet. Für die Produktion bereitet der gridsome build-Befehl die Website für die Produktion vor, indem er HTML-Dateien bündelt und generiert, die gehostet und auf jedem globalen CDN oder FTP bereitgestellt werden können.
Setup einer neuen Gridsome-Seite
Um ein neues Projekt beginnen zu können, sollten folgende Grundvoraussetzungen erfüllt sein. Die Version der installierten Node-Variante sollte mindestens Version 8 sein. Zudem ist ein Packager-Manager wie npm oder yarn notwendig. Zudem empfehlen sich natürlich grundlegende Kenntnisse zu Vue.js und GraphQL.
Installation des Gridsome CLI Tools
Sind die Voraussetzungen erfüllt, kann mit der globalen Installation der Gridsome CLI begonnen werden:
| $ yarn global add @gridsome/cli oder $ npm install –global @gridsome/cli |
Anlegen eines Gridsome Projektes
Nach der erfolgreichen Installation steht uns nun der Gridsome-Befehl im Terminal zur Verfügung, und wir können ein neues Projekt mithilfe der CLI erstellen.
| //Erstellen eines Gridsome Projektes $ gridsome create my-site |
Wenn das initiale Scaffolding des Projektes abgeschlossen ist, lässt sich im Projektordner der lokale Entwicklungsserver starten. Folgende Befehle sind dafür notwendig:
//Wechseln in das Projektverzeichnis $ cd my-site//Starten des Dev-Servers $ gridsome develop |
Die Gridsome Seite sollte nun auf http://localhost:8080 erreichbar sein. Wie angesprochen, arbeitet Gridsome mit einem GraphQL-Datenlayer. Das Interface ist im Entwicklungsmodus ebenso erreichbar und kann über http://localhost:8080/___explore aufgerufen werden.
Projektstruktur
Bevor wir mit dem Coden beginnen, ist es wichtig, die Struktur unseres Gridsome Projektes zu verstehen, denn jeder Ordner/Datei im Projekt wird für eine bestimmte Aufgabe verwendet.
- gridsome.config.js: Konfigurationsdatei für die Gridsome Seite. Unter anderem können hier Plugins hinzugefügt und konfiguriert werden.
- gridsome.server.js: Hier findet sich die Konfiguration des Node-Servers, der für den Abruf der Daten und die Erstellung der einzelnen Seiten zuständig ist. Mit vordefinierten APIs können Seiten angelegt und eigene Daten-Schnittstellen in den Datenlayer aufgenommen werden.
- static/: Verzeichnis für beliebige Dateien, die während des Builds in den Ordner dist/ kopiert werden.
- src/main.js: Enthält die Vue.js Anwendungskonfiguration für Plugins und andere Funktionen.
- src/layouts/: Layout-Komponenten von Seiten und Vorlagen.
- src/pages/: Aus Page-Komponenten werden Seiten mit eigenem Pfad generiert bspw. Impressum.vue wird dann unter …/impressum angezeigt.
- src/templates/: Templates für sich wiederholende Datentypen. Zum Beispiel kann mit einer Post.vue Komponente das Markup und Styling für Blogbeiträge definiert werden.
Komponenten
Page-Komponenten
Wie bereits beschrieben, werden alle .vue-Dateien im Verzeichnis src/pages zu einer eigenständigen Seite auf der finalen Website. Die Seiten-URL wird basierend auf dem Ort und Namen der Datei generiert. Der Pfad wird automatisch in Kleinbuchstaben geschrieben. Bindestriche innerhalb einer URL lassen sich durch das sogenannte Camel-Case im Dateinamen ermöglichen. UeberUns.vue kann beispielsweise unter …/ueber-uns aufgerufen werden.
Layout-Komponenten
Layout-Komponenten sind der ideale Weg, um wiederverwendbare Layouts zu erstellen. Es kann zum Beispiel ein Layout mit Sidebar als PageWithSidebar.vue angelegt werden. Durch die Vue-spezifischen Slots lassen sich dann Platzhalter definieren, die bei Verwendung des Layouts mit den jeweiligen Inhalten ersetzt werden. In der Abbildung sieht man das standardmäßige Layout eines Gridsome Starter Projektes.
Template-Komponenten
Die Power von Gridsome machen die Templates aus. Im Unterschied zu Seiten sind sie als wiederverwendbare und damit dynamische Seiten zu verstehen. Will ich zum Beispiel auf einem Blog die Linkstruktur …/blog/post-1 und …/blog/post-2 abbilden, sind Templates die richtige Wahl. Habe ich in meinem Datenlayer ein Datenmodell, das Posts heißt, kann ich mit der Template-Komponente Post.vue das Markup und Styling definieren.
Seiten mit Inhalten füllen
Gridsome bietet die Möglichkeit, ganze Seiten, Templates und auch einzelne Komponenten mit Daten zu füllen. Für reine Komponenten wie Header oder Navbar stehen Static Queries und für Seiten bzw. Templates stehen Page Queries zur Verfügung.
Um das Prinzip der Queries zu verstehen, ist es natürlich hilfreich, GraphQL zu verstehen bzw. zu kennen. Mit GraphQL lassen sich Datenobjekte so zusammenbauen, dass sie der benötigten Inhaltsstruktur entsprechen. Im oberen Beispiel ist ein Page Query, der von der Datenquelle die Seiten mit der URL /datenschutzerklarung abruft. Als Daten wird content benötigt, da sich hier die HTML-Daten aus einem WYSIWYG Editor befinden. Um die Daten im Markup anzuzeigen, findet sich im oberen <template>-Tag die Ausgabe $page.pageByContent.content. Mithilfe einer Vue-spezifischen Direktive v-html werden die HTML-Inhalte wie gewünscht auf der Seite gerendert.
Deployment
Sind alle Seiten angelegt und die gewünschten Inhalte hinzugefügt, kann die Website als statische Seite generiert werden. Anschließend lassen sich die Dateien wie gewohnt auf einem globalen CDN oder einfachen FTP-Server hosten. Mit der Lösung von Gridsome benötigen Sie kein Caching und keine Sicherheits-Plugins, wie in einem traditionellen CMS, wie WordPress.
Um einen Build zu erzeugen, kann nach Fertigstellung der Entwicklung der Befehl
| $yarn run build |
ausgeführt werden. Dieser startet den Node-Server im Production-Mode und erstellt alle statischen Dateien für die definierten Seiten. Sobald der Build abgeschlossen ist, kann der Ordner dist/ auf den gewünschten Server deployt werden. In modernen CI Pipelines lässt sich der Build-Prozess nahtlos integrieren, sodass mit Hilfe von Webhooks ein Deployment durch beispielsweise ein Update in einem Git-Repository getriggert werden kann.
Vorteile des Arbeitens mit Gridsome
Wer wie wir aus der Welt der klassischen Frontend-Entwicklung mit CMSs wie WordPress oder Typo3 stammt, wird beim ersten Kontakt mit einem Static Site Generator eine kurze Eingewöhnungszeit in Kauf nehmen müssen. Auch in unserer täglichen Arbeit ergaben sich Anfangs mehr Fragezeichen als Lösungen. Warum nicht einfach eine klassische Template Rendering Engine wie bei WordPress nutzen? Das Prinzip ist jedoch sehr mächtig, und es ergeben sich spannende Vorteile, die basierend auf unseren Erfahrungen nun kurz beleuchtet werden sollen.
Datenhaltung und Datenpräsentation entkoppelt voneinander
Zu allererst steht die gute Developer Experience. Ein stetig wachsendes Plugin-Ökosystem ermöglicht den Entwicklern, Plugins für Gridsome zu erstellen, freizugeben und natürlich auch zu nutzen. Plugins können von Erstellung eines RSS-Feeds, einer XML-Sitemap oder das korrekte und einfache Einbetten Ihrer Tweets bis zum automatischen Einfügen von kritischen CSS die Arbeit an einer Gridsome Site erheblich vereinfachen.
Da Static Site Generatoren von Daten zum Befüllen der vorgesehenen Templates leben – und im Falle von Gridsome sogar mehrere Datenquellen wie Markdown-Dateien, zugängliche APIs oder Headless CMSs eingebunden werden können, sind die Daten-Plugins für Gridsome von besonderer Bedeutung. Die Daten-Plugins ermöglichen Ihnen, Ihre Inhalte aus jeder Quelle anzubinden und im GraphQL-Layer verfügbar zu machen. Gridsome hat offizielle Erstanbieter-Plugins für viele gängige CMS, wie WordPress, Contentful und Sanity. Somit ist die Datenhaltung von der Präsentation auf der Website getrennt, und man hat nicht den gebräuchlichen Lock-In-Effekt wie bei WordPress oder Typo3.
Die Trennung von Datenhaltung und -präsentation bringt auch noch den Aspekt der zusätzlichen Sicherheit mit sich. Die Anfälligkeit für Angriffe von nicht ordnungsgemäß gewarteten WordPress-System ist ohnehin bekannt. Durch die korrekte Trennung ist für Website-Nutzer das genutzte Backend nicht ersichtlich.
Arbeit mit dem bekannten Framework Vue.js
Das Framework Vue.js hat bereits eine beachtliche Community aufbauen können und festigt seine Position in der Top Drei der beliebtesten JavaScript-Frameworks. Gerade für Junior-Entwickler ist der Einstieg in Vue öfters leichter als React oder Angular. Da gerade bei Vue die bekannte Dreiteilung in Markup (also HTML), Styles (also CSS) und Scripte auch bei der Entwicklung der Komponenten erhalten bleibt. Wer Vue und das komponentenbasierte Arbeiten verinnerlicht hat, kann somit auch komplett statische Websites in seinen gewohnten Mustern erstellen, ohne eine weitere Template-Syntax lernen zu müssen.
Fehlerhafter Code nicht in Production
Durch den vorgelagerten Build-Prozess von Gridsome, in dem die statischen Dateien aus den angelegten Templates und Komponenten erstellt werden, ergibt sich auch ein zusätzlicher Test für fehlerhaften Code. Kein Kunde sieht es gern, wenn Websites fehlerhaft oder gar nicht dargestellt werden. Gerade beim Parsen von externen Inhalten konnte uns der Build-Prozess schon des öfteren vor dem Deployment bzw. Publishen von fehlerhaften Websites bewahren. Auch wird die eigentliche Live-Instanz einer Website in einem modernen Deployment-Setup, wie zum Beispiel Netlify, erst ersetzt, wenn die statischen Dateien fehlerfrei erstellt wurden. Eine Absicherung, die schnell Kosten sparen und verärgerte Nutzer vermeiden kann.
JAMstack als Kosten- und Geschwindigkeitsbooster
Mit der Erstellung statischer Dateien gilt Gridsome als regelrechter Geschwindigkeits-Booster. Durch die Anwendung des PRPL-Pattern ist ein mit Gridsome statisches HTML-Dokument jedem noch so gut gecachten WordPress-Template in PHP überlegen. Der erzielte Vorteil beim Page-Loading wirkt sich zudem äußerst positiv auf den Google Pagespeed Index und Pagerank aus.
Ein weiterer Vorteil ist der Kostenaspekt, der mit dem JAMstack-Ansatz einhergeht. Gridsome gibt vollständig statische Dateien aus, die keine spezifischen Backends oder Webserver benötigen. Dies macht die Skalierung Ihrer Website oder Anwendung einfacher und kostengünstiger, da Sie die Server bei höherer Zugriffslast nicht hochskalieren müssen.
Alternative Static Site Generatoren
Vue
Falls Sie nach Alternativen für auf Vue basierenden Static Site Generatoren suchen, lohnt sich ein Blick auf Nuxt.js und VuePress.
Nuxt.js ist ein vollwertiges Applikation-Framework für Vue. Es besitzt drei Rendering-Modi: SSR, statische Website und SPA, die je nach Anwendungsfall genutzt werden können. Nuxt.js als All-in-One-Lösung ermöglicht es Ihnen, das Beste für Ihre Website zu wählen. Mit diesem Gedanken im Hinterkopf ist es eine gute Lösung für jede Art von anspruchsvollen Vue-Projekten.
In den letzten Monaten ist VuePress zum Liebling der statischen Website-Generatoren in der Vue-Community aufgestiegen. Der ursprüngliche Ansatz von VuePress ist, statische Dokumentations-Seiten für Vue-Projekte zu erzeugen. Trotzdem kann VuePress an die Bedürfnisse des eigenen Projekts angepasst werden und wird mittlerweile auch für größere Websites abseits von Dokumentationen eingesetzt.
Andere Sprachen
Zu den beliebtesten Static Site Generatoren zählt Gatsby, das React Äquivalent zu Gridsome. Tatsächlich ist Gridsome sogar stark von Gatsby inspiriert. Es hat alle Funktionalitäten, die Gridsome auch hat, und bietet eine Reihe von Plugins, mit denen Sie Daten aus unzähligen Quellen abrufen und Ihrer Website problemlos zusätzliche Funktionalitäten hinzufügen können. (Sehen Sie auch den Beitrag Static Site Generatoren — Webseiten bauen mit Gatsby).
Ein anderer auf React-basierender Static Site Generator ist Next.js. So wie Gatsby eine Alternative zu Gridsome darstellt, so ist Next.js die Alternative zu Nuxt.js. Es wurde von Zeit erstellt und ist in der React-Community weit verbreitet. Es ist nicht nur ein Generator, sondern hat auch Server Side Rendering-Unterstützung eingebaut. Damit haben Sie die Wahl, welche Art von Website Sie erstellen wollen.
Fazit
Es lässt sich nicht sagen, welcher der Static Site Generatoren der Beste ist. Es hängt davon ab, welche Funktionalitäten Sie benötigen und was Ihre Präferenzen sind. Sollten Sie jedoch bereits eine starke Expertise in der Arbeit mit Vue.js besitzen, empfiehlt sich definitiv ein Blick auf Gridsome.
Minh Huan Ngo arbeitet seit vier Monaten als Werkstudent bei PHMU. Er studiert Medieninformatik an der HTW Dresden und beschäftigt sich mit den Themen Vue.js, JAMstack und Gridsome.
- JAMstack mit Gridsome — dem Static Site Generator für Vue.js - 3. April 2020