Zur Startseite

Statische Websites: die simpelsten Websites

Veröffentlicht am
906 Wörter - Lesezeit: ca. 5 Minuten

Statische Websites basieren auf den simpelsten HTML-Dateien, die vom Server ohne weitere Verarbeitung geladen werden.

Statische Websites: die simpelsten Websites | Titelbild

Was ist eine statische Website?

Wer die Einfachheit des Webs genießen will und ganz simpel eine Website ohne großes Tamtam veröffentlichen will, der greift oft zu einer statischen Website. Doch was ist eine statische Website?

Vom Text-Editor zum Browser

Wer sich mit der Webprogrammierung befasst und die ersten Schritte zu ersten Website macht, der baut meistens eine statische Website. Eine statische Website ist dabei meist nur eine HTML-Datei, sprich eine Text-Datei, die Texte und einige Tags enthält, die zwischen „< >“ geschrieben sind und dem Browser Anweisungen gibt, die dazu führen, dass eine Website am Ende gerendert werden kann. Eine statische Website bedarf es nicht komplizierter Programmiersprachen, sondern wird im einfachen HTML und CSS geschrieben. Erfahrenerer Entwickler nutzen zudem JavaScript, um die Website Client-Seitig interaktiv zu machen.

Hat meine eine statische Website gebaut, dann reicht es diese auf einen Server zu platzieren und die Domain auf den Ordner zeigen zu lassen, wo sich diese Dateien befinden. Der Browser kann dann die Dateien vom Server direkt öffnen und der Server selbst dient nur zur Verfügungsstellung der Datei und bedarf keiner Berechnungszeit beim Ausliefern der Website.

Schema über statische Website

Dynamische Websites im Vergleich

Im Gegenzug gibt es die dynamischen Websites. Diese basieren überwiegend auf einem Content-Management-System wie WordPress, Drupal oder Joomla. Diese Art von Websites sind bezüglich der Auslieferungsmethode etwas komplizierter. Statt einer einfachen Datei, die vom Browser abgerufen werden, wird bei einer dynamischen Website eine Anfrage an den Server gesendet. Der Server wird in demselben Moment aus dem Zusammenspiel eines CMS und einer Datenbank die aufgerufene Website erzeugen und sendet dann eine HTML-Datei an den Benutzer. Der Prozess kostet deutlich mehr Berechnungszeit, hat aber den großen Vorteil, dass mit jedem Aufruf der Website nicht immer derselbe Inhalt ausgespielt werden muss. Zudem muss man das dahinter liegende CMS beherrschen, da das CMS die Anweisungen an den Server gibt, wie genau die Website ausgeliefert werden soll.

Statische Websites: Vergleichs-Schema zu einer dynamischen Website

Was spricht für eine statische Website?

Einfachheit

Für die meisten einfachen und kleinen Websites reicht eine statische Website meist vollkommen aus. Durch die Einfachheit der Auslieferung ist eine statische Website deutlich performanter als eine dynamische Website, wenn man keine großen Fehler macht. Es reicht also einfach im Text-Editor die Website zu schreiben und auf dem Server zu platzieren. Viel mehr muss nicht getan werden.

Geschwindigkeit und günstiges Hosting

Dadurch, dass der Server nur die Website ausliefert und selbst kaum Prozesse verarbeiten muss, sind die Dateien schnell an den Browser gesendet und den Rest macht der Browser selbst. Zudem spart man auch Serverkosten, da im Vergleich zu einem CMS es so schnell nicht zu einem Bottleneck kommen kann.

Sicher und zuverlässig

Dadurch, dass eine statische Website keine darunterliegendes CMS hat, welches auf den Server zu greift, oder auf eine Datenbank zu greifen kann, ist das Hacken einer statischen Website gerade zu unmöglich. Oft bieten CMS Systemen die häufigste Angriffsfläche für Hacking-Angriffe, da die Systeme nicht gepflegt werden, oder Plug-ins das CMS so modifizieren, dass Sicherheitslücken offengelegt werden. Fehlt ein CMS komplett, fällt diese Angriffsfläche ebenfalls weg.

Was spricht gegen eine statische Website?

Fehlendes CMS macht die Pflege aufwendig

Kein CMS bedeutet meist auch keine schicke Oberfläche, über die die Website verwalten lässt. So können Änderungen an der Website für ungeschulte Personen kompliziert und aufwendig sein, da das Verständnis zum HTML-Code fehlt. Zudem ist das Pflegen einer Website, die immer größer wird, aufwendig, da die statischen HTML-Dateien immer mehr werden können und es irgendwann sehr unübersichtlich werden kann. Möchte man zudem etwas am Hauptmenü ändern, so muss man das Hauptmenü in jeder einzelnen Datei anpassen.

Dynamische Inhalte sind nicht möglich

Durch den fehlenden Server sind dynamische Websites unmöglich. Du kannst mit einer statischen Seite das ausgelieferte HTML nicht verändern, da die Seiten nur als HTML Dokument auf dem Server liegen. Klar, mit JavaScript kannst Du eine Website stückweise dynamisch wirken lassen, aber eine echte Datenbankabfrage und nutzerspezifische Inhalte sind nicht möglich.

Der JAMStack macht statische Websites wieder sexy

Der JAMStack ist ein Ansatz, der es schafft, statische Websites durch ein Hybrides-System dynamisch zu gestalten. Was der JAMStack ist, findest Du in einem unserer vorangegangenen Blogartikel.

Wie schafft es also der JAMStack-Ansatz statische Website attraktiv zu machen? Erfahrene Entwickler, die den Geschwindigkeitsvorteil von statischen Websites nutzen wollen, aber dennoch komplizierte und dynamische Seiten entwickeln, können jetzt zum JAMStack greifen. Wie der Ansatz genutzt wird, erfährst Du hier:

Static-Site-Generatoren und Komponenten

Static-Site-Generatoren schaffen es, dass Entwickler eine Website über Logiken aufbauen können und der Generator am Ende statische HTML-Seiten generiert. So kannst Du unter anderem eine Hauptmenü-Komponente bauen und diese einfach in die einzelnen Seiten Deiner Website inkludieren. Sollte es also eine Änderung an dem Hauptmenü geben, so musst Du die Änderung nur noch an einer Stelle machen, statt jede einzelne HTML-Datei anzufassen. Dieses Spiel lässt sich bis ins kleine Detail durchspielen und man kann eine Website nach seinem Belieben mit Logiken versehen und aufbauen.

Headless-CMS Systeme

Zu Headless-CMS-Systemen haben wir ebenfalls einen Blogartikel verfasst. Diese Systeme schaffen es, Redakteuren eine Oberfläche zu bieten, damit Inhalte bearbeitet werden können. Diese Inhalte können nun ebenfalls z. B. von einem Static-Site-Generator verarbeitet werden und bauen so anhand dieser Inhalte weitere Seiten wie z. B. Blogartikel auf. So schafft man es auch größere Websites statisch zu gestalten und verliert sich nicht Unmengen an HTML-Dateien.

Hybride-Systeme

Frameworks wie Gatsby.js oder Next.js bieten eine Möglichkeit statische und dynamische Seiten gleichermaßen zu entwickeln. So können statische Seiten vor generiert werden und profitieren von dem Geschwindigkeitsvorteil. Und Seiten, die dynamisch erstellt werden müssen, wie z. B. ein Log-in-System mit Kunden-Dashboard werden dynamisch bei Bedarf über den Server ausgeliefert.