Static-Site-Generator: Erklärung, Funk­ti­ons­wei­se und Vorteile

Um eine statische Website zu erstellen, greifen Ent­wick­le­rin­nen und Ent­wick­ler immer häufiger auf Jamstacks mit Static-Site- bzw. Static-Website-Ge­ne­ra­to­ren zurück, die den Pro­gram­mie­rungs­pro­zess erheblich ver­ein­fa­chen und eine schnelle Be­reit­stel­lung der Seiten er­mög­li­chen. Jegliche dy­na­mi­schen Funk­tio­nen werden auf eine verteilte Ar­chi­tek­tur aus­ge­la­gert. Cli­ent­sei­ti­ges Ja­va­Script, das mit den APIs von Mi­cro­ser­vices kom­mu­ni­ziert, sorgt dabei für die not­wen­di­ge Dynamik.

Was ist ein Static-Site-Generator (SSG)?

Static-Website-Ge­ne­ra­to­ren sind fertige Code­ge­rüs­te, auf deren Basis sich statische Websites erstellen lassen. Anders als Content-Ma­nage­ment-Systeme, die Inhalte aus Da­ten­ban­ken abrufen, erzeugen Static-Site-Ge­ne­ra­to­ren die HTML-Dateien einer Seite mithilfe eines Skripts aus Ein­ga­be­da­tei­en, die in einem Da­tei­sys­tem ge­spei­chert sind. Dieser Prozess findet außerdem bereits zum Er­stel­lungs­zeit­punkt statt, also während Än­de­run­gen an Code und Content vor­ge­nom­men werden, und nicht erst dann, wenn der Besucher oder die Be­su­che­rin die Seite mit dem Browser aufruft.

Wie funk­tio­nie­ren Static-Website-Ge­ne­ra­to­ren?

In­stal­la­ti­on und Bedienung eines Static-Site-Ge­ne­ra­tors funk­tio­nie­ren über die Kom­man­do­zei­le. Die ei­gent­li­chen Website-Inhalte schreibt man in Aus­zeich­nungs­spra­chen wie Markdown. Markdown-Dokumente lassen sich ganz einfach im Web-Tool des Ver­sio­nen­kon­troll­sys­tems GitHub anpassen. Al­ter­na­tiv funk­tio­niert auch die Nutzung von be­lie­bi­gen Text­edi­to­ren oder spe­zi­el­len Markdown-Editoren. Anhand von Metadaten am Anfang der Dateien (häufig als „Front Matter“ be­zeich­net) sorgt der Generator dann dafür, dass die Website im Browser dar­ge­stellt wird.

Welche Vorteile hat es, eine statische Website zu erstellen?

In be­stimm­ten Fällen wie Blogs oder Un­ter­neh­mens­prä­sen­zen steht die bloße Über­mitt­lung von In­for­ma­tio­nen im Fokus. Content-Ma­nage­ment-Systeme und Homepage-Baukästen sind zwar auch für derartige Projekte ver­wend­bar, Static-Site-Ge­ne­ra­to­ren haben hier jedoch ent­schei­den­de Vorteile gegenüber den klas­si­schen Lösungen:

• Ge­schwin­dig­keit: Projekte, die mit einem Static-Website-Generator erstellt werden, zeichnen sich durch eine her­vor­ra­gen­de Ge­schwin­dig­keit auf Nut­zer­sei­te aus, die auch aus SEO-Sicht relevant ist. Hin­ter­grund ist, dass die Ver­ar­bei­tung der Dateien bereits zur Ent­wick­lungs­zeit bzw. Auf­bau­zeit der Seiten statt­fin­det und nicht erst zum Zeitpunkt der Abfrage der Seite (Stichwort: Da­ten­bank­ab­fra­ge).
• Ver­si­ons­kon­trol­le für Content: Während die Inhalte dy­na­mi­scher Web­pro­jek­te von der Codebasis getrennt in Da­ten­ban­ken ge­spei­chert werden, liegt der Content einer sta­ti­schen Website ty­pi­scher­wei­se in einfachen Text­da­tei­en vor. Struk­tu­rell un­ter­schei­den sich die in­halt­li­chen Elemente daher nicht von anderen Kom­po­nen­ten der Codebasis, weshalb sich ohne Probleme eine Ver­si­ons­ver­wal­tung ein­rich­ten lässt. So lässt sich bei­spiels­wei­se nicht nur das Code­ge­rüst eines Blogs in einem GitHub-Ver­zeich­nis verwalten, sondern auch die einzelnen Blog­bei­trä­ge.
• Si­cher­heit: Ein weiterer Vorteil von Websites, die mithilfe von Static-Website-Ge­ne­ra­to­ren erstellt wurden, ist, dass sie nur wenig An­griffs­flä­che bieten – anders als z. B. Content-Ma­nage­ment-Systeme wie WordPress, die bereits von Haus aus die Gefahr von Si­cher­heits­lü­cken mit­brin­gen und re­gel­mä­ßig ak­tua­li­siert werden müssen. Das komplette Ri­si­ko­po­ten­zi­al ist auf den einzelnen Zugriff durch den Client beim Aufruf der Seite be­schränkt. Da dabei in der Regel nicht viel mehr als struk­tu­rier­te HTML-Seiten aus­ge­lie­fert werden, ist die Wahr­schein­lich­keit eines un­ge­wünsch­ten Zugriffs auf ein Minimum reduziert.
• Einfache Server-In­stand­hal­tung: Auch ein Static-Site-Generator hat als Software-Paket seine Ab­hän­gig­kei­ten, die es zu erfüllen gilt. Die Zahl be­nö­tig­ter Kom­po­nen­ten fällt ver­gleichs­wei­se gering aus, jedoch sind diese ohnehin nur während des Ent­wick­lungs­pro­zes­ses relevant. Während andere Lösungen die ver­schie­dens­ten Module, Da­ten­ban­ken, Bi­blio­the­ken, Frame­works und Pakete auch für den Live-Betrieb benötigen und daher re­gel­mä­ßi­ge Ak­tua­li­sie­run­gen auf der Ta­ges­ord­nung stehen, sind die ge­ne­rier­ten sta­ti­schen Seiten mit dem Zeitpunkt der Ver­öf­fent­li­chung lediglich an einen funk­ti­ons­fä­hi­gen Webserver gebunden.

Was un­ter­schei­det Static-Site-Ge­ne­ra­to­ren von klas­si­schen CMS?

Content-Ma­nage­ment-Systeme haben die Art und Weise, wie Websites gebaut werden, re­vo­lu­tio­niert. Der hohe manuelle Aufwand, der für die Pro­gram­mie­rung klas­si­scher sta­ti­scher Websites er­for­der­lich war, gehörte dank der prak­ti­schen Systeme schnell der Ver­gan­gen­heit an. Die ent­schei­den­de Neuerung und Ver­än­de­rung zu dem alten Ansatz: die Spei­che­rung von Content in Da­ten­ban­ken und die damit ver­bun­de­ne Mög­lich­keit, Seiten erst bei Nut­zer­an­fra­gen in passender Weise zu­sam­men­zu­set­zen und zu prä­sen­tie­ren.

Static-Site-Ge­ne­ra­to­ren schlagen die Brücke zwischen der klas­si­schen sta­ti­schen Website und CMS-Projekten. Wie beim klas­si­schen Pro­gram­mie­rungs­an­satz sind die Seiten und deren Inhalte bereits generiert, bevor sie von den Nutzern abgerufen werden. Wie Content-Ma­nage­ment-Systeme erlauben es Static-Site-Ge­ne­ra­to­ren Ent­wick­le­rin­nen und Ent­wick­lern auf der anderen Seite, Templates zu verwenden und Seiten au­to­ma­tisch zu ge­ne­rie­ren.

Der ent­schei­den­de Un­ter­schied zwischen Static-Site-Generator und CMS besteht also in dem Zeitpunkt, zu dem die Webseiten kreiert werden – bei ersterem noch während des Ent­wick­lungs­pro­zes­ses, bei letzterem im Moment des Nut­zer­zu­griffs. Zudem entfällt beim Generator die Ab­hän­gig­keit von Da­ten­ban­ken bzw. einer anderen externen Da­ten­quel­le sowie eine ser­ver­sei­ti­ge Da­ten­ver­ar­bei­tung beim Zugriff auf die Website. Es ist natürlich auch möglich, mit einer API bei Bedarf externe Da­ten­quel­len ein­zu­bin­den.

Warum einen Static-Site-Generator nutzen?

Static-Site-Ge­ne­ra­to­ren für den Aufbau des eigenen Web­pro­jekts zu nutzen, kann sich aus vielerlei Gründen auszahlen. Der wohl ent­schei­dends­te Be­weg­grund ist das Per­for­mance-Plus, das die kreierten Websites vorweisen können. Die ex­zel­len­ten La­de­zei­ten beim Zugriff, die aus den fertig ge­ne­rier­ten Inhalten re­sul­tie­ren, wirken sich positiv auf die User-Ex­pe­ri­ence aus. Da sämtliche Dateien der Website zentral an einem Punkt ge­spei­chert werden, bieten Projekte auf Basis eines Static-Site-Ge­ne­ra­tors außerdem maximale Fle­xi­bi­li­tät und Ver­füg­bar­keit. Zudem ist der Ver­wal­tungs­auf­wand minimal.

Sollen al­ler­dings

• Inhalte re­gel­mä­ßig über­ar­bei­tet,
• Funk­tio­na­li­tä­ten auch im Nach­hin­ein hin­zu­ge­fügt,
• Nut­zer­ein­ga­ben ver­ar­bei­tet oder
• optische An­pas­sun­gen jederzeit und auch mit geringem Know-how vor­ge­nom­men werden,

sind Lösungen wie Baukästen und Content-Ma­nage­ment-Systeme vor­zu­zie­hen.

Das sind die Schwächen von Static-Site-Ge­ne­ra­to­ren

Während die an­ge­spro­che­nen Vorzüge sta­ti­scher Seiten – wie die her­vor­ra­gen­de Aus­lie­fe­rungs­ge­schwin­dig­keit oder der hohe Si­cher­heits­fak­tor – nicht von der Hand zu weisen sind, gibt es ent­schei­den­de Gründe, warum ein Static-Site-Generator für größere Projekte un­ge­eig­net ist. Die Arbeit mit einem Generator setzt bei­spiels­wei­se nicht nur um­fang­rei­ches Wissen über Markdown, HTML und Co. voraus, sondern lässt auch zahl­rei­che Au­to­ma­tis­men vermissen, die in Content-Ma­nage­ment-Systemen und Homepage-Baukästen selbst­ver­ständ­lich sind. Ferner lassen sich folgende Schwach­punk­te bei der Ver­wen­dung von Static-Website-Ge­ne­ra­to­ren ausmachen:

• Keine Echtzeit-Inhalte: Ein Static-Site-Generator bietet in der Stan­dard­kon­fi­gu­ra­ti­on keinerlei Mög­lich­kei­ten, dy­na­mi­sche Inhalte (Emp­feh­lun­gen, Preis­ak­tua­li­sie­run­gen, Voll­text­su­che etc.) zu erzeugen. Elemente, die sich au­to­ma­tisch an den User anpassen, indem Echt­zeit­da­ten aus­ge­wer­tet werden, lassen sich nur mithilfe cli­ent­sei­ti­ger Skripte (vor allem Ja­va­Script), rea­li­sie­ren.
• Mühsame Ver­wer­tung von User-Input: Ein weiteres Problem fehlender Server-Skripte und Da­ten­ban­ken wird deutlich, wenn das Web­pro­jekt in be­stimm­ten Si­tua­tio­nen auch Nut­zer­ein­ga­ben er­mög­li­chen soll (etwa bei einem Kon­takt­for­mu­lar). Auch hier ist Ja­va­Script gefragt bzw. die Un­ter­stüt­zung von Dritt­an­bie­ter-Services er­for­der­lich. Die Plattform DISQUS kann bei­spiels­wei­se dazu verwendet werden, um Static-Website-Generator-Projekten eine Kom­men­tar­funk­ti­on (inklusive Mo­de­ra­ti­on und Spam-Ma­nage­ment) hin­zu­zu­fü­gen.
• Keine Standard-Be­nut­zer­ober­flä­che: Viele Static-Site-Ge­ne­ra­to­ren haben wie auch Headless CMS ohne ent­spre­chen­de Er­wei­te­rung kein Interface, über das sich neue Inhalte einfügen oder be­stehen­de Inhalte anpassen bzw. löschen lassen, sondern werden im Terminal bedient. WYSIWYG-Editoren helfen zwar dabei, den be­nö­tig­ten Markdown-Code zu schreiben und das Resultat per Vorschau-Funktion schon im Vorhinein zu in­spi­zie­ren, erübrigen aber nicht den manuellen Upload der fertigen Dateien auf den Server.

Zu­sam­men­fas­send lässt sich also sagen, dass Projekte, die auf sta­ti­schen Seiten basieren, vor allem dort ihre Schwächen haben, wo Ak­tua­li­tät, Ver­än­de­rung und Nutzer-In­ter­ak­ti­on gefragt sind.

Welche bekannten Static-Website-Ge­ne­ra­to­ren gibt es?

Die Anzahl an Ge­ne­ra­to­ren, mit denen Sie eine statische Website erstellen können, ist in den ver­gan­ge­nen Jahren erheblich gestiegen. Auf GitHub befinden sich die Pro­jekt­ver­zeich­nis­se zahl­rei­cher Open-Source-Lösungen, die kos­ten­frei zur Er­stel­lung der eigenen Website genutzt und nach Bedarf angepasst werden können.

Eine Übersicht über die be­lieb­tes­ten Vertreter liefert jamstack.org: Die Seite listet die ver­schie­de­nen Mög­lich­kei­ten al­pha­be­tisch oder sortiert nach GitHub-Sternen, -Forks oder -Issues (Op­ti­mie­rungs­vor­schlä­ge/Aufgaben) auf. Zu­sätz­lich lassen sich die Website-Gerüste auch nach der zu­grun­de­lie­gen­den Pro­gram­mier­spra­che (u. a. Ruby, Ja­va­Script, Go…) filtern.

In der folgenden Tabelle sind einige der wich­tigs­ten Ge­ne­ra­to­ren auf Basis der StaticGen-In­for­ma­tio­nen auf­ge­führt:

Kun­den­web­sites mit Jamstack erstellen: Schnell. Effizient. Sicher.

In diesem White­pa­per erfahren Sie unter anderem, welche Probleme kon­ven­tio­nel­le CMS mit sich bringen, warum statische Seiten mithilfe des Jamstacks zur echten Al­ter­na­ti­ve werden – und wie Sie damit schlan­ke­re Workflows und bessere Kund­en­er­geb­nis­se ge­währ­leis­ten.

Einen Static-Site-Generator via GitHub be­reit­stel­len – so funk­tio­niert’s

Den Code von Static-Site-Ge­ne­ra­to­ren inklusive der Inhalte, Assets und Skripte, die für die Ge­ne­ra­ti­on der Ausgabe ver­ant­wort­lich sind, können Sie einfach und un­kom­pli­ziert in einem GitHub-Re­po­si­to­ry speichern und pflegen. Auf diese Weise ver­knüp­fen Sie Ihr Projekt mit einer Ver­si­ons­kon­trol­le und ver­ein­fa­chen die Zu­sam­men­ar­beit am Code.

Schließ­lich bleibt nur die Be­reit­stel­lung der Dateien auf einem Webserver zu erledigen, wobei der Building-Prozess für HTML- und CSS-Dateien bei jeder Ak­tua­li­sie­rung des Re­po­si­to­rys zu wie­der­ho­len ist. Auch dieses Auf­ga­ben­feld können Sie sich erheblich ver­ein­fa­chen – mit Hosting-Services für Static-Site-Ge­ne­ra­to­ren wie Deploy Now. Die Lösung von IONOS stößt im Hin­ter­grund au­to­ma­tisch eine Ak­tua­li­sie­rung der sta­ti­schen Inhalte auf Ihrem Webspace an, wenn Sie Än­de­run­gen am Ver­zeich­nis Ihres Static-Site-Ge­ne­ra­tors vornehmen. Hierfür nutzt Deploy Now einen GitHub-Actions-Workflow, der es Ihnen er­mög­licht, die Build-Logs direkt in der GitHub-Be­nut­zer­ober­flä­che zu be­ob­ach­ten.

Deploy Now: Der neue Weg, statische Websites zu erstellen

Deploy Now ist ein prak­ti­scher Hosting-Service und bietet Un­ter­stüt­zung für alle gängigen Static-Site-Ge­ne­ra­to­ren und ist darüber hinaus bestens für Jamstack-Hosting geeignet. Ferner zeichnet sich Deploy Now durch einfaches Staging aus und bietet Ihnen ein kos­ten­lo­ses SSL/TLS-Zer­ti­fi­kat sowie DDoS-Schutz für Ihr Projekt.

Die Ent­schei­dung, ob Sie Ihre eigene Domain mit­brin­gen und einbinden oder eine neue Domain re­gis­trie­ren, liegt bei Ihnen. Weitere In­for­ma­tio­nen zu tech­ni­schen Kon­fi­gu­ra­tio­nen, Tutorials und Starter-Projekten finden Sie in der of­fi­zi­el­len Deploy-Now-Do­ku­men­ta­ti­on.