DE
Anmelden Konto erstellen

So hostest du Astro auf Saplo (schnelle Website mit Islands)

Astro generiert standardmäßig eine vollständig statische Website und ermöglicht dir, interaktive Komponenten (Islands) von React, Vue oder Svelte nur dort hinzuzufügen, wo sie wirklich benötigt werden. Auf Saplo kannst du Astro mit einem Klick aus dem App-Katalog installieren. Das resultierende Build wird direkt von Nginx ausgeliefert, ohne dass ein Hintergrundprozess erforderlich ist.

Grzegorz Kalmus ·

Astro generiert standardmäßig eine vollständig statische Seite - null Bytes JavaScript beim Start - und ermöglicht es dir, einzelne interaktive Komponenten (Inseln) von React, Vue oder Svelte genau dort einzufügen, wo Interaktion wirklich benötigt wird. Der Rest der Seite bleibt reines HTML. Das Ergebnis sind Inhaltsseiten und Blogs, die auch bei schlechter Verbindung blitzschnell laden, ohne den Kompromiss eines schweren Framework-Bundles für die gesamte Seite. Auf Saplo stellst du Astro wie jede andere statisch erstellte Anwendung bereit - die Engine erstellt das Projekt und stellt das fertige Verzeichnis dist unter Nginx zur Verfügung.

Für wen ist Astro auf Saplo geeignet?

Bevor du mit der Installation beginnst, prüfe, ob Astro die richtige Wahl für dein Projekt ist:

  • Blog oder Inhaltsseite, die schnell sein soll - kein unnötiger JavaScript-Code beim Start, die Inhalte laden sofort.
  • Produktdokumentation - Content Collections in Markdown und ein statischer Build eignen sich hervorragend dafür.
  • Portfolio oder Landingpage mit etwas Interaktion - ein Kontaktformular oder eine Galerie als einzelne Insel von React oder Vue, ohne die gesamte Seite zu hydrieren.
  • Eine Seite, die heute auf WordPress läuft, nur weil jemand Inhalte bearbeiten musste - wenn die Bearbeitung über Markdown-Dateien im Repository erfolgt, bietet Astro denselben Komfort ohne PHP-Engine und Datenbank im Hintergrund.

Wenn die Seite vollständig dynamisch sein soll (unterschiedliche Daten für jede Anfrage, Benutzeranmeldung), schau dir im App-Katalog den Node.js-Stack anstelle des statischen Astro an.

Anforderungen

Um Astro auf Saplo einzurichten, benötigst du:

  • Eine Box in einem beliebigen Plan, Box S reicht für den Start aus - das Ergebnis ist ein statischer Build ohne einen im Speicher gehaltenen Prozess,
  • mindestens 512 MB freien RAM für den Build-Prozess (Astro hat eine schwerere Build-Toolchain als reines Vite) und 3 GB Speicherplatz auf der Festplatte,
  • eine Domain oder Subdomain *.saploapp.pl inklusive in jedem Plan,
  • ein Git-Repository, wenn du automatische Deployments wünschst (optional für den Start, du kannst die Anwendung auch als Archiv .zip über das Panel hochladen).

Schritt-für-Schritt-Installation

  1. Gehe im Saplo-Panel zum App-Katalog und wähle Astro (Kategorie "Webseiten").
  2. Wähle Box und den Namen der Anwendung - daraus wird die Standard-Subdomain <name>.saploapp.pl erstellt.
  3. Wähle die Node.js-Version für den Build (18, 20 oder 22, standardmäßig 20) und bestätige die Installation.
  4. Die Engine scaffoldet ein minimales Astro-Grundgerüst, installiert Abhängigkeiten und baut das Projekt, und der Inhalt des Verzeichnisses dist landet direkt im Anwendungsverzeichnis, das von nginx bereitgestellt wird.
  5. Nach Abschluss der Installation zeigt die Domain aus Schritt 2 die Astro-Startseite - ab diesem Zeitpunkt stellst du deine eigenen Inhalte darauf bereit.

Bereitstellung deines eigenen Codes über Git

  1. In den App-Details findest du den Abschnitt Git / CI-CD. Klicke auf „GitHub verbinden“, bestätige die Installation der Anwendung „Saplo Deploy“ und wähle das Repository mit deinem Astro-Projekt aus.
  2. Die Datei saplo.yaml muss im Stammverzeichnis deines Repositorys liegen.
  3. Committe und pushe die Datei saplo.yaml auf den Produktionszweig (standardmäßig main).
  4. Jeder nachfolgende git push auf diesen Zweig erstellt das Projekt und ersetzt den Inhalt des dist-Verzeichnisses auf deiner Box. Den Status siehst du unter Deployments.
  5. Standardmäßig generiert Astro statische Inhalte nach dist/ - nginx serviert sie direkt, ohne Hintergrundprozess auf dem Server.

Beispiel einer minimalen saplo.yaml-Datei für Astro:

name: my-project
stack: astro
build:
  install: npm ci
  command: npm run build
  output: dist

Astro auf Saplo vs. Alternativen

WordPress Handgeschriebenes HTML Astro auf Saplo
Ladegeschwindigkeit Abhängig von Plugins, meist langsamer Sehr schnell, aber keine Komponenten Sehr schnell + selektive Islands
Inhaltsbearbeitung Admin-Panel, ohne Code Manuell in Dateien Dateien .astro / .md im Repo, git push
Interaktive Komponenten Plugins Manuell von Grund auf neu geschrieben Islands von React, Vue oder Svelte, einzeln hydriert
Datenbank Erforderlich (MySQL) Keine Keine, Inhalt im Repository

Häufig gestellte Fragen

Kann ich Inhalte in Markdown schreiben? Ja, Inhalts-Collections in Astro speichern Inhalte als Markdown-Dateien im Repository und validieren diese beim Build.

Benötigt Astro einen Hintergrundprozess? Im Standardmodus nicht - die Ausgabe ist vollständig statisch und wird direkt von Nginx ausgeliefert, ohne RAM-Verbrauch nach Abschluss des Builds.

Wann sollte man SSR (Node Adapter) anstelle von statischen Inhalten wählen? Wenn die Seite für jede Anfrage unterschiedliche Daten zurückgeben muss (z. B. ein Benutzerpanel) - wähle in diesem Fall den Node.js-Stack im App-Katalog und konfiguriere start.command.

Kann ich Islands aus verschiedenen Frameworks auf einer Seite mischen? Ja, Astro ermöglicht die Kombination von React-, Vue- und Svelte-Komponenten auf derselben Seite, wobei jede unabhängig hydriert wird.

Bekomme ich SSL und eine eigene Domain? Ja, das SSL-Zertifikat ist automatisch, und die Domain oder Subdomain *.saploapp.pl ist im Preis jedes Plans inbegriffen.

Astro auf Saplo kannst du in wenigen Minuten von Grund auf bis zu einer funktionierenden Domain einrichten, und Inhalte über git push aktualisieren, ohne das Admin-Panel oder die Datenbank berühren zu müssen. Sollte das Projekt wachsen und volles SSR benötigen, findest du den Node.js-Stack im selben Katalog.

  • #Astro
  • #Git Deploy
  • #JavaScript
  • #Anleitung
  • #Static