Generatoren für statische Seiten

Statische Websites enthalten keine dynamischen Inhalte und bestehen aus statischen Dateien wie HTML, CSS und JavaScript, die keine serverseitige Verarbeitung oder eine Datenbank benötigen.

Da die Dateien vorgefertigt sind, ist keine weitere Verarbeitung erforderlich, wenn ein Nutzer die Seite besucht, und es werden weniger Ressourcen benötigt, um die Seite zu betreiben. Da es keine Skripte oder eine Datenbank gibt, die ausgenutzt werden können, wird auch die Sicherheit der Website erhöht.

Vorteile von Statischen Website-Generatoren

Wenn du mit HTML, CSS und JavaScript vertraut bist, kannst du eine statische Website mit einem Text- oder Code-Editor erstellen. Allerdings brauchst du das technische Wissen, um die Inhalte zu schreiben, es kann unhandlich und zeitaufwändig sein, und wenn deine Seite wächst, kann es schwieriger werden, sie zu verwalten und zu pflegen.

Static Site Generators (SSGs) bieten eine effizientere Möglichkeit, deine statische Website zu erstellen. Sie enthalten oft verschiedene Tools, die das Erstellen, Gestalten, Veröffentlichen und Bearbeiten deiner Inhalte erleichtern. Einige der wichtigsten Vorteile der Verwendung eines statischen Website-Generators sind

• Templating: Mit einem Templating-System kannst du die Struktur und das Layout deiner Website mit wiederverwendbaren Vorlagen und Komponenten festlegen, die auf mehreren Seiten eingesetzt werden können. Das bedeutet, dass du gemeinsame Elemente auf mehreren Seiten nicht manuell duplizieren oder aktualisieren musst. Außerdem trennst du so deine Inhalte von der Design- und Präsentationsebene, sodass du dich auf das Schreiben und Aktualisieren der Inhalte konzentrieren kannst.
• Automatisierung: Wenn deine Website Inhalte aus verschiedenen Quellen enthält, z. B. Markdown-Dateien oder Datendateien, kann ein Generator für statische Websites die Umwandlung deiner Inhalte in HTML-Dateien automatisieren. Aufgaben wie Minifizierung, Optimierung und Bündelung von Inhalten können ebenfalls automatisiert werden. So sparst du Zeit und verringerst das Risiko von Fehlern, da du deine Website erstellen und optimieren kannst, ohne jede Aufgabe manuell ausführen zu müssen.
• Versionskontrolle: Statische Website-Generatoren sind mit Versionskontrollsystemen wie Git integriert, sodass du Änderungen nachverfolgen, mit anderen zusammenarbeiten und bei Bedarf leicht zu früheren Versionen zurückkehren kannst.
• Inkrementelle Builds: Wenn du Änderungen vornimmst und eine neue Ausgabe erstellst, werden nur die Dateien neu erstellt, die sich seit der letzten Erstellung geändert haben. Viele Generatoren für statische Websites unterstützen inkrementelle Builds, was die Build-Zeit für größere Websites und kleine Aktualisierungen verkürzt.

Einen statischen Website-Generator verwenden

Jeder Static Site Generator (SSG) hat seine eigenen Funktionen, Konfigurationen und Templating-Systeme, aber die Einrichtung einer Website, die mit Kinstas Static Site Hosting gehostet werden soll, umfasst in der Regel Folgendes:

1. Wähle deine SSG: Es gibt viele SSGs. Der erste Schritt besteht darin, diejenige auszuwählen, die am besten zu deinen Bedürfnissen passt. Um die Website mit Kinstas Static Site Hosting zu erstellen und zu hosten, wähle eine, die Node.js für den Erstellungsprozess verwendet. Unten findest du eine Liste von SSGs, die du bei Kinsta nutzen kannst.
2. Richte eine lokale Entwicklungsumgebung ein: Installiere die notwendigen Abhängigkeiten, darunter die SSG selbst, alle benötigten Programmiersprachen und einen Code-Editor.
3. Erstelle deine neue Website: Erstelle in deinem SSG die neue Website. Dadurch werden die grundlegende Verzeichnisstruktur und die für das Projekt erforderlichen Konfigurationsdateien erstellt.
4. Konfiguration: Richte die Konfiguration deiner Website ein, um die Struktur der Website und die Art und Weise, wie der Generator deine Quelldateien verarbeitet, anzupassen. Diese Datei kann Einstellungen wie Eingabe- und Ausgabeverzeichnisse, Vorlagenpfade, Metadaten, Plugin-Konfigurationen usw. enthalten.
5. Vorlagen erstellen: Erstelle Vorlagen und Layouts, die gemeinsame Elemente und Strukturen für deine Seiten festlegen, z. B. Kopf- und Fußzeilen, Navigationsmenüs usw.
6. Inhalte und Assets hinzufügen: Erstelle oder sammle vorhandene Inhalte mit Markdown oder anderen unterstützten Formaten. Jede Seite entspricht in der Regel einer Datei im Inhaltsverzeichnis. Die Assets werden wahrscheinlich in einem anderen Verzeichnis als die Inhaltsdateien gespeichert.
7. Styling: Ändere die CSS- oder Präprozessordateien (z. B. SASS oder LESS), um deiner Website eigene Stile zu geben. Für einige SSGs gibt es auch Themes, die installiert und für das Styling angepasst werden können.
8. Lokal erstellen und vorschauen: Führe den von der SSG bereitgestellten Build-Befehl aus, um deine Website zu kompilieren. Der SSG verarbeitet deine Vorlagen, wandelt deine Inhaltsdateien in HTML um und generiert die statischen Dateien (HTML, CSS und JavaScript). Falls zutreffend, führt es auch Aufgaben wie Minifizierung, Optimierung und Asset-Bündelung durch. Mit diesem Setup kannst du sicherstellen, dass alles wie gewünscht aussieht und funktioniert.
9. Erstelle dein Git-Repository: Verwende Git, um dein Repository zu erstellen und übertrage dann deine neue Website in dein neues Git-Repository.
   1. Wenn du die Website auf Kinsta bereitstellst, ohne den Build bei Kinsta auszuführen, müssen die Dateien, die du in dein Repository überträgst, die Ausgabe des Builds sein (die HTML-, CSS- und JavaScript-Dateien).
   2. Wenn die Website in Kinsta gebaut werden soll, müssen die Dateien, die du in dein Repository überträgst, der Inhalt, Assets wie Bilder oder andere Medien und die SSG-Dateien (oder Konfigurationsdateien, die die Abhängigkeiten für den Build enthalten) sein.

10. Setze deine neue statische Website ein: In MyKinsta fügst du eine neue statische Site hinzu und verbindest sie mit deinem Git-Repository, um deine Site auf den 260+ CDN-Standorten von Kinsta bereitzustellen.
11. Pflegen und aktualisieren: Wenn du weiter an deiner Website arbeitest, solltest du dich an die Best Practices für die Versionskontrolle halten, regelmäßig Änderungen einpflegen und mit den neuesten Versionen der SSG und ihrer Abhängigkeiten auf dem Laufenden bleiben. Dies gewährleistet einen reibungslosen Entwicklungsprozess und ermöglicht es dir, von neuen Funktionen und Fehlerbehebungen zu profitieren.

Statische Seiten Generatoren Kompatibilität

Das Staitsche Seiten Hosting von Kinsta ist für vorgefertigte statische Websites oder Websites geeignet, die mit modernen JavaScript-Frameworks erstellt wurden, die Node.js verwenden, um die Website bei Kinsta zu erstellen. Landingpages, Broschürenseiten und sogar kleine Blogs, die nicht allzu oft aktualisiert werden und keine dynamischen Inhalte (wie Kommentare) benötigen, sind normalerweise gut geeignet.

Wenn deine Website eine der folgenden Bedingungen erfüllt, ist sie besser für unser Anwendungs-Hosting geeignet:

• Sie verwendet eine andere Sprache als Node.js, um die Seite zu erstellen (z. B. PHP).
• Sie benötigt Server-Rendering, um die Seite ganz oder teilweise zu bedienen.
• Sie benötigt eine Datenbankverbindung.
• Sie stellt dynamische Inhalte bereit.
• Sie erfordert Sitzungen oder eine serverseitig verwaltete Authentifizierung.

Wenn du dir nicht ganz sicher bist, welches Hosting für deine Website am besten geeignet ist, empfehlen wir dir, deine Website auf beiden zu betreiben, um beide Optionen auszuprobieren und herauszufinden, welche deinen Bedürfnissen am besten entspricht.

Es gibt viele Generatoren für statische Websites, und der Erstellungsbefehl und das Veröffentlichungsverzeichnis können sich von Website zu Website unterscheiden. Kinsta erkennt automatisch verschiedene Frameworks und füllt die Felder Build Command und Publish Directory aus, wenn du deine statische Website hinzufügst.

Die folgende Tabelle zeigt den Build-Befehl und das Veröffentlichungsverzeichnis für verschiedene beliebte Static Site Generatoren, die mit Static Site Hosting kompatibel sind.

* Gridsome oder VuePress 1.x

Dafür ist Node 16 erforderlich, oder du kannst das Folgende in der package.json für den Build-Befehl hinzufügen:

SET NODE_ OPTIONS =--openssl- legacy -provider && vuepress build src

** Hugo

Füge Folgendes zu deinem Projekt hinzu:

npm install hugo-bin serve --save-dev

Füge Folgendes hinzu oder ersetze es, je nach deinem Projekt:

{
  " scripts ": {
    "build": "hugo"
  }
}

Es ist üblich, dass Hugo Themes die Installation über ein Git-Submodul empfehlen. Derzeit sind Submodule nicht mit dem statischen Seiten Hosting oder dem Anwendungs-Hosting kompatibel, daher müssen die Theme-Dateien im Repository der Seite verfügbar sein.