Was ist eine statische Website, wie funktioniert sie und wie erstellen Sie eine?

Eine statische Website besteht aus Webseiten, die bei jedem Aufruf durch Besucher gleich aussehen. Sie kann mit HyperText Markup Language (HTML), Cascading Style Sheets (CSS) und JavaScript erstellt werden.

Statische Websites lassen sich schneller und einfacher erstellen als dynamische, bieten jedoch nur eingeschränkte Funktionen. Trotz dieser Einschränkungen sind statische Websites für Portfolios und Lebensläufe sehr beliebt.

In diesem Artikel erklären wir Ihnen, was statische Websites sind, wie sie funktionieren und wie sie sich von dynamischen Seiten unterscheiden. Außerdem zeigen wir Ihnen die einzelnen Schritte zur Erstellung einer solchen Website und stellen Ihnen fünf Beispiele für statische Websites als Inspiration vor.

Statische vs. dynamische Websites

Im Gegensatz zu statischen Seiten können sich dynamische Websites abhängig von Faktoren wie dem Standort, der Zeitzone und früheren Aktivitäten der Nutzer automatisch ändern.

Um den Inhalt der Website zu ändern, verwenden dynamische Websites serverseitige Skriptsprachen wie PHP zusätzlich zu HTML, CSS und JavaScript. Dadurch können sie eine Verbindung zu einer Datenbank herstellen, um Informationen abzurufen, die dann in die Website eingebunden werden.

Eine Datenbank ermöglicht die Verarbeitung von Daten, die Nutzer auf einer dynamischen Website eingeben. So können Nutzer beispielsweise über Formulare ein Konto erstellen, ein Produkt kaufen oder einen Beitrag kommentieren.

Statische Websites hingegen können keine Nutzereingaben verarbeiten und bieten nur begrenzte Interaktivität. Sie können jedoch Animationen und anklickbare Elemente wie Navigationsschaltflächen oder Hyperlinks enthalten.

Trotz der Unterschiede bieten statische Websites gegenüber dynamischen Websites mehrere Vorteile:

• Bessere Leistung. Da weniger Datenbankabfragen und weniger Codezeilen erforderlich sind, laden statische Websites schneller. Da statische Inhalte unverändert bleiben, lassen sie sich zudem leichter mit einem Content-Delivery-Netzwerk (CDN) zwischenspeichern.
• Einfacher zu erstellen. Statische Websites sind weniger komplex und lassen sich schneller erstellen. Sie funktionieren auch ohne serverseitige Skripte oder eine Datenbankverbindung einwandfrei.
• Sicherer. Cyberkriminelle können Verbindungen zu Datenbanken oder Erweiterungen ausnutzen, um Ihre Website anzugreifen. Da statische Websites weder Datenbankverbindungen noch Erweiterungen verwenden, bieten sie weniger Angriffsfläche.

Statische Websites haben jedoch auch einige Nachteile:

• Begrenzte Anwendungsfälle. Statische Websites bieten keine Funktionen, die eine Datenbankverbindung erfordern, etwa Bezahlvorgänge für Produkte oder Reservierungen. Dadurch sind ihre Einsatzmöglichkeiten eingeschränkt.
• Mangelnde Personalisierung. Eine statische Website kann keine personalisierten Inhalte anzeigen, die auf die Bedürfnisse und Vorlieben der Besucher zugeschnitten sind. Dadurch können die Interaktions- und Konversionsraten sinken.
• Schwierige Updates. Um eine statische Website zu aktualisieren, müssen Entwickler die Datei jeder einzelnen Seite manuell ändern. Dies ist zeitaufwändiger und birgt ein höheres Risiko für menschliche Fehler.

Sollte ich mich für eine statische oder eine dynamische Website entscheiden?

Eine statische Website ist schneller, einfacher zu erstellen und sicherer als eine dynamische. Allerdings ist sie schwieriger zu aktualisieren, verfügt nur über eingeschränkte Funktionen und bietet keine Möglichkeit zur Personalisierung der Inhalte.

So funktionieren statische Websites

Statische Websites bestehen aus mehreren Dateien, die auf den Servern ihres Hosting-Anbieters gespeichert sind. Diese Dateien werden in den Browsern der Besucher dargestellt und beispielsweise mit HTML und CSS erstellt.

Wenn Besucher Ihre statische Website aufrufen, fordern ihre Browser die Dateien vom Server des Hosting-Anbieters an. Der Server sendet daraufhin die angeforderten Dateien, die im Browser dargestellt werden.

Da keine serverseitigen Programmiersprachen zum Einsatz kommen, werden die Dateien vor der Übertragung nicht verändert. Alle Besucher erhalten daher identische Dateien in genau der Form, in der sie auf dem Server des Hosting-Anbieters gespeichert sind, und sehen dieselbe Website.

Es gibt drei gängige Methoden, um eine statische Website zu erstellen:

• Von Grund auf programmieren. Erstellen Sie die statische Website manuell mit HTML, CSS und JavaScript. Diese Methode eignet sich für Entwickler, die mit diesen Sprachen vertraut sind.
• Statische Website-Generatoren verwenden. Mit diesen Tools können Sie mithilfe von Vorlagen statische HTML-Dateien für Websites erstellen. Zwar müssen Sie weiterhin programmieren, mit diesen Tools geht die Erstellung jedoch schneller als von Grund auf.
• Einen Website-Baukasten verwenden. Ein Website-Baukasten bietet einen visuellen Editor, mit dem sich statische Websites ohne Programmieren erstellen lassen. Wir empfehlen diesen Ansatz für Anfänger, die lernen möchten, ihre ersten Websites zu erstellen.

So erstellen Sie eine statische Website in 4 einfachen Schritten

In diesem Abschnitt zeigen wir Ihnen, wie Sie mit dem Hostinger Website-Baukasten eine statische Website erstellen. Auch wenn die einzelnen Schritte bei der Verwendung eines anderen Website-Baukastens variieren können, ist der Ablauf im Großen und Ganzen ähnlich.

1. Richten Sie Webhosting und eine Domain ein

Jede Website benötigt Webhosting und eine Domain, um online erreichbar zu sein. Beim Hostinger Website-Baukasten sind beide im Angebot enthalten und müssen daher nicht separat erworben werden.

Bei anderen Website-Baukästen müssen Sie Webhosting und Domain möglicherweise separat erwerben, wodurch die Einrichtung länger dauert und höhere Kosten entstehen.

Achten Sie bei der Auswahl eines Domainnamens darauf, dass er leicht zu merken ist und den Zweck Ihrer Website widerspiegelt. Dadurch können sich Besucher die Adresse Ihrer Website besser merken und mehr organischen Traffic auf Ihre Website bringen.

Wir empfehlen, mit einem Domain Check zu prüfen, ob die gewünschte Adresse verfügbar ist. Falls der Domainname bereits registriert ist, verwenden Sie eine andere Top-Level-Domain oder suchen Sie nach einem alternativen Namen.

2. Wählen Sie eine Website-Vorlage aus

Nachdem Sie mit dem Hostinger Website-Baukasten eine neue Website erstellt haben, werden Sie zur Vorlagenbibliothek weitergeleitet. Dort können Sie ein vorgefertigtes Website-Design auswählen oder eine leere Vorlage verwenden.

Um zu sehen, wie die Vorlage aussieht, bewegen Sie den Mauszeiger darüber und klicken Sie auf Vorschau. Wählen Sie eine Kategorie aus oder nutzen Sie die Suchleiste, um die passende Vorlage schnell zu finden, und klicken Sie auf Vorlage auswählen, um Ihre Auswahl zu bestätigen.

Nachdem Sie eine Vorlage ausgewählt haben, werden Sie zum Editor weitergeleitet, um Ihre Website zu erstellen. Auf der entsprechenden Seite von Hostinger finden Sie einige der verfügbaren Website-Designvorlagen.

3. Webseiten anpassen

Mit unserem Website-Baukasten können Sie verschiedene Elemente Ihrer Website anpassen, darunter Text, Farben und Schaltflächen. Sie können die Elemente einfach per Drag & Drop an andere Stellen verschieben, um das Layout zu ändern.

Passen Sie zunächst die Standardvorlage für die Startseite an. Da Besucher Ihre Startseite direkt nach dem Aufrufen der Website sehen, sollte sie gut gestaltet sein und einen guten Eindruck hinterlassen.

Berücksichtigen Sie bei der individuellen Gestaltung Ihrer Website die folgenden Aspekte:

• Medien. Verwenden Sie hochwertige Medien, um das Engagement der Besucher zu erhöhen. Fügen Sie jedoch nicht zu viele Bilder oder Videos hinzu, damit Ihre Website nicht langsamer wird.
• Navigation. Verwenden Sie kontrastreiche Farben und platzieren Sie Ihr Navigationsmenü an einer gut sichtbaren Stelle, um die Benutzererfahrung zu verbessern.
• Layout. Platzieren Sie wichtige Informationen weder neben ablenkenden Elementen noch am unteren Rand Ihrer Seite, damit sie deutlich hervorstechen.
• Suchmaschinenoptimierung (SEO). Fügen Sie Ihrer Website einen Meta-Titel und eine Meta-Beschreibung hinzu, um mehr organischen Traffic zu generieren.

Nachdem Sie den Entwurf fertiggestellt haben, gehen Sie zu Seiten und Navigation und klicken Sie auf das Zahnrad-Symbol neben der neu erstellten Seite. Wählen Sie Als Startseite festlegen, um sie als Startseite Ihrer Website festzulegen.

Über dieses Menü können Sie außerdem mehrere Webseiten für Ihre Website erstellen. Wenn Sie einen Onepager erstellen, können Sie nicht benötigte Seiten aus der Vorlage entfernen.

Beachten Sie, dass Ihre Vorlage möglicherweise interaktive Elemente wie ein Anmeldeformular enthält. Da statische Websites solche Elemente in der Regel nicht enthalten, können Sie das jeweilige Element anklicken und die Backspace-Taste drücken, um es zu entfernen.

Um neue Elemente hinzuzufügen, gehen Sie zur Seitenleiste und klicken Sie auf die Schaltfläche Element hinzufügen. Über dieses Menü können Sie verschiedene Elemente einfügen, darunter Bilder, Videos, Formen, Texte und Schaltflächen.

4. Veröffentlichen Sie die statische Website

Nachdem Sie den Entwurf fertiggestellt haben, klicken Sie oben rechts im Editor auf Vorschau. Testen Sie die Website im Vorschaumodus, um mögliche Design- oder Benutzerfreundlichkeitsprobleme zu erkennen.

Sie können außerdem zwischen dem Desktop- und dem Mobilmodus wechseln. Mit dem Hostinger Website-Baukasten müssen Sie kein neues Design erstellen oder zusätzliche Einstellungen auf Ihrer Website vornehmen, um sie für Mobilgeräte zu optimieren.

Der Website-Baukasten speichert Änderungen automatisch, sodass Sie Ihre Seite direkt veröffentlichen können. Klicken Sie dazu neben der Schaltfläche Vorschau auf Website veröffentlichen.

Beispiele für statische Websites

Als Anregung stellen wir Ihnen fünf Beispiele für statische Websites mit unterschiedlichen Anwendungsfällen vor.

1. Bootstrap

Bootstrap ist ein Framework, das Designvorlagen für HTML, CSS und JavaScript bereitstellt, um die Entwicklung von Websites zu beschleunigen. Die Website ist statisch und wird auf GitHub Pages gehostet.

Zu den interaktiven Elementen dieser Website gehören Navigationsschaltflächen und Hyperlinks. Außerdem verfügt sie über eine Auswahl für den Dunkelmodus sowie Schaltflächen mit Symbolen, die zu Social-Media-Konten führen.

Die Website von Bootstrap besteht hauptsächlich aus Text und enthält weder Animationen noch viele visuelle Elemente. Dieses einfache Design sorgt für kürzere Ladezeiten, da kleinere Website-Dateien schneller heruntergeladen werden können.

2. TwitchCon

Die Streaming-Plattform Twitch nutzt Jekyll, um eine statische Website für ihre jährliche Veranstaltung TwitchCon zu erstellen. Das schlichte Design besteht lediglich aus Text, Symbolen und Werbevideos.

Die interaktiven Elemente dieser Website sind größtenteils Navigationsschaltflächen mit Hyperlinks. Die Links führen Besucher zu anderen Seiten sowie zum Blog und zur Hauptwebsite von Twitch.

Da Twitch die allgemeinen Informationen auf den beiden anderen Websites bereitstellt, umfasst die statische Website nur wenige Seiten. Dadurch bleibt sie schlank und lädt schneller.

3. Collins

Das Strategie-, Design- und Kommunikationsunternehmen Collins verfügt über eine statische Website auf Basis von Jekyll. Das Beispiel zeigt, dass auch eine statische Website professionell und optisch ansprechend sein kann.

Neben der Navigation verfügt diese Website über weitere interaktive Elemente, darunter verschiebbare Bannerbilder und eine Schaltfläche, mit der Besucher zurückscrollen können. Letztere ist wichtig, da Collins alle Arbeiten auf der Startseite präsentiert.

Die Website enthält außerdem einige Animationen, die durch Nutzerinteraktionen ausgelöst werden. Eine Einblendanimation erscheint, wenn Nutzer auf die Navigationsschaltfläche klicken, während Pop-up-Videos erscheinen, wenn sie mit der Maus über den Titel eines Beitrags fahren.

4. Camilo Holguin

Der freiberufliche Frontend-Webentwickler Camilo Holguin nutzt eine einfache statische Website als Lebenslauf. Die Website wurde mit Gatsby erstellt und präsentiert alle Informationen auf einer einzigen Webseite.

Sobald Besucher die Website aufrufen, sehen sie sofort Camilo Holguins Namen und eine Zusammenfassung seines beruflichen Werdegangs. Außerdem finden sie dort Schaltflächen, die zu GitHub, LinkedIn und seiner E-Mail-Adresse führen. Diese Schaltflächen sind die einzigen interaktiven Elemente.

5. Prism

Prism ist eine neue, noch in der Entwicklung befindliche Open-Source-Programmiersprache. Die Website für die Dokumentation und das Lernportal ist statisch und wurde mit Gatsby erstellt.

Diese Website besteht größtenteils aus Text und Codeausschnitten und enthält außer dem Logo keine visuellen Elemente. Zu den interaktiven Elementen gehören Navigationsschaltflächen, die Besucher zu anderen Seiten oder zum GitHub-Repository führen.

Prism verdeutlicht die hohe Performance statischer Websites. Die Website lädt schnell, und Nutzer können sofort zwischen den Seiten wechseln.

Fazit

Eine statische Website besteht aus einer Reihe von Webseiten, deren Inhalt bei jedem Aufruf durch Besucher unverändert bleibt. Sie wird mit HTML, CSS und JavaScript ohne den Einsatz einer serverseitigen Skriptsprache erstellt.

Hier finden Sie eine Zusammenfassung, wie Sie mit einem Website-Baukasten eine statische Website erstellen können:

1. Buchen Sie eine Domain und ein Hosting-Paket. Dies ist erforderlich, um die Dateien Ihrer statischen Website zu speichern und sie im Internet zugänglich zu machen.
2. Wählen Sie eine Vorlage aus. Wählen Sie eine Vorlage aus der Bibliothek aus, um mit der Erstellung Ihrer Website zu beginnen.
3. Erstellen Sie die Webseite. Passen Sie das Standard-Vorlagendesign an, fügen Sie Ihre Inhalte hinzu und erstellen Sie bei Bedarf eine neue Seite.
4. Veröffentlichen Sie Ihre Website. Überprüfen Sie die Seite auf Fehler und veröffentlichen Sie Ihre statische Website, sobald Sie fertig sind.

Wir empfehlen die Erstellung einer statischen Website, wenn Sie nicht viele Seiten und Funktionen benötigen. Sie eignet sich beispielsweise ideal für ein Portfolio oder eine Seite mit Kontaktdaten.

Häufig gestellte Fragen (FAQ) zu statischen Websites

Wir beantworten zwei häufig gestellte Fragen zu statischen Websites, damit Sie mehr darüber erfahren.

Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.

Erstellt von

Faradilla Ayunindya

Add Hostinger as a preferred source on Google

Faradilla, auch bekannt als Ninda, ist Content Marketing Specialist bei Hostinger mit über fünf Jahren Erfahrung und einem zehnjährigen Hintergrund als Linguistin. Sie möchte Technologie für alle zugänglich machen, indem sie komplexe Anleitungen in klare und leicht verständliche Schritt-für-Schritt-Guides verwandelt. In ihrer Freizeit interessiert sie sich für Biowissenschaften oder schaut gerne lustige Tiervideos. Vernetzen Sie sich mit ihr auf LinkedIn.

Mehr von Faradilla Ayunindya