Versuchst du dich für dein nächstes Projekt zwischen einer statischen und einer dynamischen Website zu entscheiden? Oder bist du dir nicht einmal sicher, was eine statische Website überhaupt ist?
Wie auch immer, dieser Artikel soll dir helfen. Im Folgenden erfährst du alles, was du über statische Websites wissen musst, z. B. was sie sind, wie sie funktionieren, wie sie sich von dynamischen Websites unterscheiden und welche Vor- und Nachteile statische Websites gegenüber dynamischen Websites haben.
Am Ende solltest du eine gute Vorstellung davon haben, welcher Ansatz für dein Projekt am besten geeignet ist und wie du loslegen kannst.
Was ist eine statische Website?
Eine statische Website ist eine Website, deren Seiten aus einer festen Anzahl vorgefertigter Dateien bestehen, die aus HTML, CSS und JavaScript bestehen.
Eine statische Website hat keine serverseitige Verarbeitung im Backend und keine Datenbank. Alle „dynamischen“ Funktionen, die mit einer statischen Website verbunden sind, werden auf der Client-Seite ausgeführt, d. h. der Code wird im Browser der Besucher/innen und nicht auf dem Server ausgeführt.
In nicht-technischen Worten bedeutet das, dass dein Hosting die Dateien der Website genau so an die Browser der Besucher/innen liefert, wie sie auf dem Server liegen.
Außerdem bekommt jeder einzelne Besucher die gleiche statische Datei in seinen Browser geliefert, was bedeutet, dass er weitgehend die gleichen Erfahrungen macht und die gleichen Inhalte sieht.
Was ist eine dynamische Website?
Eine dynamische Website ist eine Website, die serverseitig gesteuert wird und auf einer Skriptsprache (z. B. PHP) basiert. Jedes Mal, wenn jemand die Website besucht*, verarbeitet der Server den Code und/oder fragt die Datenbank ab, um die fertige Seite zu erstellen.
So kann der Server bei jedem Besuch andere Inhalte anzeigen. So kann zum Beispiel jemand, der auf der Website angemeldet ist, eine Version der Seite sehen, während jemand, der nicht angemeldet ist, einen völlig anderen Inhalt sieht, wenn er die Seite besucht.
Das bedeutet auch, dass alle Änderungen, die du in deinem Dashboard für die Website-Verwaltung vornimmst, sofort sichtbar sind, weil das Content Management System die Seite automatisch mit den neuesten Inhalten/Änderungen ausliefert.
Wie funktionieren statische Websites?
Wir werden später noch genauer darauf eingehen, wie man eine statische Website erstellt, aber der grundlegende Ansatz, den die meisten statischen Websites verwenden, ist wie folgt:
- Du wählst aus, wie du deine Website erstellen willst – während du bei sehr einfachen Websites deine statischen HTML-, CSS- und JavaScript-Dateien manuell erstellen kannst, verwenden viele moderne statische Websites eine Art Generator für statische Websites oder ein Headless CMS.
- Website einrichten – Du erstellst deine Website mit dem Tool deiner Wahl. Anders als bei WordPress wirst du deine Website nicht von einem Produktionsserver aus steuern.
- Bereitstellen deiner Website – das bedeutet, dass du die statischen Dateien deiner Website auf ein Live-Hosting verschiebst, damit die Nutzer/innen darauf zugreifen können. Du kannst Anwendungs-Hosting nutzen oder deine HTML-Dateien direkt in einem Content Delivery Network (CDN) bereitstellen. Da deine statische Website keine Datenbank oder serverseitige Verarbeitung benötigt, musst du sie nicht auf einem einzigen Webserver speichern.
Beispiele für statische Websites und Tools
Wenn du dir eine Website ansiehst, gibt es keine eindeutige Regel, die dir sagt, ob sie statisch oder dynamisch ist. Stattdessen ist es hilfreicher, sich Beispiele für Tools anzuschauen, mit denen du statische Websites erstellen und verwalten kannst.
Hier sind einige der beliebtesten Beispiele für statische Websites, wenn es um Software zur Erstellung statischer Websites geht:
Mit all diesen Tools kannst du statische Websites erstellen, aber sie gehen dabei auf sehr unterschiedliche Weise vor. Publii bietet dir zum Beispiel eine codefreie Desktop-Oberfläche, während du bei einigen anderen Tools die Kommandozeile verwenden musst.
Beispiele für dynamische Websites und Tools
Zum Vergleich mit den oben genannten Beispielen für statische Websites werfen wir auch einen Blick auf einige Beispiele für dynamische Websites.
Das beliebteste Beispiel für dynamische Websites ist die Software WordPress, die über 43 % aller Websites im Internet betreibt.
Während du WordPress für statische Websites nutzen kannst, indem du ein Plugin für den Generator statischer Websites installierst, funktioniert WordPress standardmäßig als dynamischer Website-Builder.
Hier sind einige andere bekannte Beispiele für dynamische Websites, die ähnliche Ansätze verwenden:
- Drupal
- Joomla
- Shopify (und so ziemlich jede andere eCommerce-Plattform)
Statische vs. dynamische Websites: Vor- und Nachteile
Da du jetzt weißt, was eine statische Website ist und wie sie sich von einer dynamischen Website unterscheidet, gehen wir die Vor- und Nachteile von statischen und dynamischen Websites durch.
Statische Website Vorteile
- Leichtere Leistungsoptimierung – da statische Websites sozusagen weniger „bewegliche Teile“ haben, lassen sie sich viel leichter auf Leistung optimieren. Statische Websites sind in der Regel sehr schlank und laden schnell, besonders wenn du sie gut aufgebaut hast.
- Benötigt weniger Serverressourcen – da statische Websites keine serverseitige Verarbeitung benötigen, muss der Server bei jedem Besuch viel weniger Arbeit leisten. Das verbessert die Leistung und trägt dazu bei, dass deine Website besser funktioniert, wenn sie skaliert. Du kannst deine statische Website sogar direkt in einem CDN bereitstellen und auf einen Webserver ganz verzichten (was unter anderem bedeutet, dass deine Website keine statische IP-Adresse hat).
- Es ist sehr günstig, statische Websites zu hosten – für einfache Hobbyprojekte/Portfolios kannst du deine statische Website sogar mit kostenlosen Hosting-Diensten wie GitHub Pages oder Cloudflare Pages hosten. Für ernsthaftere Projekte kannst du auch kostenpflichtige Dienste wie das Anwendungs-Hosting von Kinsta nutzen.
- Einfacher zu sichern – da statische Websites nicht auf serverseitige Verarbeitung oder Datenbanken angewiesen sind, gibt es weniger Angriffsflächen für böswillige Akteure. Es ist immer noch möglich, dass eine statische Website gehackt wird – aber es ist viel unwahrscheinlicher, dass das passiert.
- Einfache Websites lassen sich sehr leicht einrichten – statische Websites lassen sich sehr schnell einrichten, weil du dich nicht um technische Details wie Datenbanken kümmern musst.
Statische Website Nachteile
- Es kann komplizierter sein, Inhalte und Design zu aktualisieren – bei einer statischen Website musst du deine Website jedes Mal neu einrichten, wenn du etwas ändern oder aktualisieren willst – selbst wenn es sich nur um eine Kleinigkeit handelt, wie z. B. die Änderung eines Elements in deinem Navigationsmenü. Das kann zu einer zusätzlichen Komplexität führen, vor allem wenn du deine Website regelmäßig änderst.
- Es kann technisch aufwendiger sein, Funktionen hinzuzufügen – bei dynamischen Website-Tools wie WordPress kannst du einfach ein neues Plugin installieren, wenn du deiner Website Funktionen hinzufügen möchtest. Bei statischen Websites ist es normalerweise, aber nicht immer, komplexer.
- Die Funktionen zur Verwaltung von Inhalten sind in der Regel nicht so leistungsfähig – statische Website-Tools sind in der Regel nicht so leistungsfähig bei der Verwaltung von Inhalten, was bei einer großen Website mit Tausenden von Inhalten und vielen Taxonomien zur Organisation mühsam sein kann. Einige Generatoren für statische Websites tun jedoch viel, um dieses Problem zu lösen.
- Selbst für grundlegende Funktionen wie Webformulare bist du auf Dienste von Drittanbietern angewiesen – die meisten statischen Websites nutzen beispielsweise Formular-Endpunkt-APIs wie FormBold oder Getform. Du könntest auch Formulardienste von Drittanbietern wie Google Forms (oder eine dieser Google Forms-Alternativen) einbetten. Bei einem dynamischen Content Management System wie WordPress kannst du einfach ein Formular-Plugin installieren und alles in der Datenbank deiner Website speichern.
Dynamische Website Vorteile
- Du kannst den Inhalt einer Seite dynamisch an die Person anpassen, die sie gerade besucht. Du könntest zum Beispiel eine Mitgliederseite erstellen, auf der zahlende Mitglieder den gesamten Inhalt einer Seite sehen können, während anonyme Besucher nur eine kleine Vorschau sehen können.
- Einfache Aktualisierung deiner Website (Inhalt und Design) – Es ist sehr einfach, Inhalte und Design einer dynamischen Website zu aktualisieren. Sobald du die Aktualisierung in deinem Dashboard für die Website-Verwaltung vornimmst, solltest du die Änderung sofort auf deiner Live-Site sehen. Es ist nicht nötig, die gesamte Website neu einzurichten, wie es bei einer statischen Website der Fall sein könnte.
- Einfacheres Hinzufügen neuer Funktionen über Plugins/Apps – wenn du zum Beispiel WordPress als Content Management System für deine dynamische Website verwendest, kannst du einfach neue Plugins installieren, um Funktionen hinzuzufügen.
- Stärkere Funktionen für die Verwaltung von Inhalten in großem Umfang – dynamische Website-Tools sind in der Regel besser für die Verwaltung vieler Inhalte geeignet. Wenn du zum Beispiel ein Verzeichnis mit Tausenden von lokalen Unternehmen aufbaust, ist ein dynamisches Website-Tool normalerweise die bessere Wahl.
Dynamische Website Nachteile
- Kann teurer sein – alles in allem ist das Hosting einer dynamischen Website teurer, weil mehr Serverressourcen für die serverseitige Verarbeitung benötigt werden.
- Schwerer abzusichern – dynamische Websites haben mehr Angriffsflächen als statische Websites, was ihre Absicherung etwas komplexer macht. Du musst dich zum Beispiel vor SQL-Injection-Angriffen schützen, was bei statischen Websites nicht der Fall ist (weil statische Websites keine Datenbank haben).
- Mehr Aufwand für die Leistungsoptimierung – die Optimierung einer dynamischen Website ist komplexer, weil du dich sowohl um die Leistung des Frontends als auch des Backends kümmern musst. Bei dynamischen Websites musst du zum Beispiel Zeit für die Optimierung von Datenbankabfragen und Leistung aufwenden, was bei statischen Websites kein Problem ist.
- Etwas kompliziertere Einrichtung – wenn du zum Beispiel eine WordPress-Website erstellen willst, musst du deine Datenbank einrichten und sicherstellen, dass deine Website über die notwendigen Technologien verfügt (z. B. eine aktuelle Version von PHP, MySQL/MariaDB usw.). Managed WordPress-Hosting wie Kinsta kann die Verwaltung deiner WordPress-Website jedoch erheblich vereinfachen, da du WordPress-Websites über eine einfache Schnittstelle starten kannst.
Wie man eine statische Website erstellt
Wenn du denkst, dass die Vorteile einer statischen Website für dein nächstes Projekt gut geeignet sind, findest du hier eine kurze Anleitung, wie du eine statische Website erstellst.
Wir haben diesen Leitfaden absichtlich sehr einfach gehalten, damit du ihn an deinen eigenen Anwendungsfall anpassen kannst.
1. Wähle einen Static Site Generator oder ein CMS
Zunächst solltest du dich für einen Generator für statische Websites oder ein Content Management System entscheiden, mit dem du eine statische Website erstellen kannst.
Wenn du über das nötige technische Wissen verfügst, kannst du eine statische Website auch von Grund auf mit deinem eigenen HTML, CSS und JavaScript sowie deiner bevorzugten HTML-Editor-Software erstellen. Das kann jedoch schnell unhandlich werden, wenn deine Website wächst und du nicht über das technische Knowhow verfügst, alles von Grund auf neu zu erstellen.
Ein statischer Website-Generator bietet dir eine einfachere Möglichkeit, deine statische Website zu erstellen. Er macht es auch einfacher, deine Seite in Zukunft zu aktualisieren.
Anstatt jede einzelne HTML-Datei bearbeiten zu müssen, wenn du eine Änderung vornimmst (z. B. einen neuen Punkt in deinem Navigationsmenü), kann dir der Generator für statische Websites dabei helfen, neue Versionen aller Dateien deiner Website zu erstellen, die die Änderungen widerspiegeln.
Hier sind einige beliebte Generatoren für statische Websites, die du in Betracht ziehen kannst:
- Jekyll – einer der beliebtesten Open-Source-Generatoren für statische Websites. Er kann für eine Vielzahl von Websites verwendet werden und unterstützt das Bloggen.
- Hugo – ein weiterer beliebter Open-Source-Generator, der für alle möglichen Arten von Websites geeignet ist. Wir haben einen ganzen Beitrag darüber geschrieben, wie man eine statische Website mit Hugo erstellt.
- WordPress + ein Generator-Plugin für statische Websites – du kannst deine Website mit WordPress erstellen und sie dann als statische HTML-Site mit deinem bevorzugten Generator-Plugin für statische Websites bereitstellen.
Weitere Optionen findest du in unserem Beitrag mit den besten Generatoren für statische Websites.
2. Erstelle deine Website
Wenn du dich für dein bevorzugtes Tool entschieden hast, kannst du es für die Erstellung deiner Website verwenden.
Wie das funktioniert, hängt davon ab, für welches Tool du dich entscheidest. Es gibt also keine Anleitung, die für alle statischen Website-Generatoren gilt.
Wenn du aus dem WordPress-Umfeld kommst, ist die Verwendung von WordPress selbst als Generator für statische Websites eine der einfachsten Möglichkeiten, um deine erste statische Website zu erstellen.
Hier ist ein Beispiel dafür, wie eine statische Website mit WordPress aussehen könnte:
- Eine lokale WordPress-Website mit DevKinsta erstellen. Dies wird nicht die Seite sein, mit der deine Besucher tatsächlich interagieren – hier verwaltest du nur deine Inhalte und das Design der Website.
- Richte deine Seite mit deinem bevorzugten Design-Tool ein. Du kannst den WordPress-eigenen Block-Editor oder dein Lieblings-Plugin für den Seitenaufbau wie Elementor oder Divi verwenden.
- Installiere ein Static Site Generator Plugin. Damit wirst du im nächsten Schritt deine statische Website erstellen. Beliebte Optionen sind Simply Static und WP2Static, aber es gibt auch neuere Alternativen wie Staatic.
Eine andere Möglichkeit wäre, WordPress mit Gatsy über GraphQL zu verbinden.
3. Bereitstellen deiner Website beim Hosting
Sobald du deine Website erstellt hast, musst du sie auf deinem Hosting-Server bereitstellen. Das bedeutet, dass du einen Weg brauchst, um die statischen HTML-Dateien von deinem statischen Website-Generator zu deiner Live-Hosting-Umgebung zu übertragen.
Hierfür gibt es verschiedene Möglichkeiten.
Eine Möglichkeit ist, eine Art automatische/kontinuierliche Bereitstellung mit GitHub einzurichten. Du speicherst die Dateien deiner Website in einem GitHub-Bucket. Wenn du dann eine neue Version deiner Website auf GitHub veröffentlichst, benachrichtigt GitHub deinen Server und dieser stellt die neue Version deiner Website automatisch bereit.
Wenn du zum Beispiel neue Dateien auf GitHub veröffentlichst, könnte das automatisch einen Prozess wie diesen auslösen:
- Wenn du eine Änderung auf GitHub vornimmst, wird dein Server automatisch benachrichtigt.
- Dein Webserver holt sich die neuesten Dateien von GitHub und führt einen Hugo-Build aus.
- Dein Server überträgt die Dateien in die Live-Umgebung der Website.
Eine weitere Git-basierte Option ist die Verwendung von GitHub-Seiten für statische Websites.
Alternativ dazu gibt es auch die Möglichkeit, die Dateien direkt in ein CDN zu stellen, anstatt irgendeinen Webserver zu verwenden. Dieser Ansatz könnte etwa so aussehen:
- Du lädst die Dateien deiner Website in eine Art Online-Speicher hoch. Viele Tools können dies automatisch oder über die Kommandozeile erledigen.
- Du richtest ein CDN ein, das die Dateien aus diesem Speicher abruft.
- Wenn du neue Dateien in deinem Speicher veröffentlichst, zieht das CDN diese neuen Dateien automatisch ein.
Wenn dein Tool keine speziellen Funktionen anbietet, um die Bereitstellung deiner Website zu vereinfachen, musst du das tun:
- Die statischen HTML-Dateien für deine Website erstellen.
- Diese Dateien manuell auf deinen Hosting-Dienst für statische Websites hochladen, z. B. auf den Anwendungs-Hosting-Dienst von Kinsta (der das Hosting statischer Websites unterstützt).
Solltest du eine statische Website für dein nächstes Projekt nutzen?
Ob eine statische Website für dein nächstes Projekt geeignet ist oder nicht, hängt vom Zweck deiner Website und deinem eigenen Wissensstand ab.
Daher gibt es hier keine pauschale Antwort.
Gehen wir stattdessen einige Situationen durch, in denen eine statische Website sinnvoll sein kann und in denen sie nicht sinnvoll ist.
Wann eine statische Website sinnvoll sein kann
Eine statische Website eignet sich am besten für Websites, bei denen alle Besucher denselben Inhalt sehen und der Inhalt sich nicht oft ändert – vor allem bei kleineren Websites mit wenig Inhalt.
Hier sind einige Arten von Websites, die sehr gut mit dem statischen Ansatz funktionieren können:
- Portfolio-Websites
- Websites mit einfachen Geschäftsbroschüren
- Lebenslauf-Websites
- Einfache Blogs, die nicht so oft veröffentlicht werden
- Dokumentationsinhalte/Wissensdatenbanken
- Landing Pages
Diese Arten von Websites bieten alle Vorteile des statischen Ansatzes, aber mit nur wenigen Kompromissen.
Es ist z. B. unwahrscheinlich, dass du eine einfache Geschäftsbroschüre personalisieren musst, also „verlierst“ du keine Funktionen, wenn du den statischen Ansatz verwendest.
Außerdem ändern sich diese Arten von Websites nicht sehr oft, so dass du dir keine Gedanken darüber machen musst, ob du deine statischen Seiten ständig neu einrichten musst.
Wann eine dynamische Website sinnvoll sein kann
Zunächst einmal sind dynamische Websites immer dann die beste Wahl, wenn du die Möglichkeit brauchst, die Website individuell zu gestalten, z. B. bei E-Commerce-Shops, Websites für Mitglieder, Online-Kursen usw.
Wenn du möchtest, dass die Nutzer/innen verschiedene Inhalte auf einer Seite sehen können, solltest du eine dynamische Website verwenden.
Es gibt zwar Möglichkeiten, die oben genannten Arten von Websites mit einer statischen Website zu erstellen, aber die Kompromisse, die du dabei eingehen musst, sind es in der Regel nicht wert, weshalb eine dynamische Website vielleicht die bessere Wahl ist.
Dynamische Websites sind auch oft sinnvoller für inhaltslastige Websites, insbesondere für solche mit vielen Taxonomien und anderen Organisationsmethoden
Auch wenn du regelmäßig neue Inhalte veröffentlichst, kann das ein Grund sein, eine dynamische Website zu wählen.
Ein persönlicher Blog, in dem du zum Beispiel nur alle 2 Wochen einen neuen Beitrag veröffentlichst, ist vielleicht als statische Website gut geeignet, aber für einen Blog mit dem Schwerpunkt Monetarisierung, in dem du jeden Tag 5 neue Beiträge veröffentlichst, eignet sich wahrscheinlich eine dynamische Website besser.
Zusammenfassung
Zusammenfassend lässt sich sagen, dass eine statische Website eine Website ist, die feste HTML-Seiten anbietet und wo die gesamte Verarbeitung auf der Client-Seite stattfindet. Wenn du eine statische Website erstellst, erhält jeder einzelne Nutzer dieselbe statische HTML-Datei bzw. denselben Inhalt, wenn er eine Seite besucht.
Diese Art der statischen Website wird immer beliebter, vor allem dank der Tools zur Erstellung statischer Websites wie Hugo, Jekyll, Gatsby und anderen.
Die Erstellung einer statischen Website hat jedoch sowohl Vor- als auch Nachteile und ist daher nicht für alle Websites die richtige Lösung.
Wenn du mit deiner eigenen statischen Website loslegen willst, kannst du einen der Generatoren für statische Websites aus dieser Liste auswählen und deine Website mit dem Anwendungs-Hosting von Kinsta starten.
Kinsta unterstützt nicht nur statische Websites auf dem Anwendungs-Hosting von Kinsta, sondern arbeitet auch daran, in naher Zukunft einen eigenen Hosting-Service für statische Websites einzuführen.
