Astro-Kurs 30: Astro bei Hostinger veröffentlichen

Modul 6 – Veröffentlichen und pflegen · Astro-Anfängerkurs der Know-How-Schmiede

Voraussetzung: Etappe 1 und 2 des Kurses. Das Beispielprojekt „Meine Modellbau-Werkstatt“ wird fortgeführt. Kopiere Code nicht blind über schon vorhandene Seiten, sondern ergänze bestehende Bereiche.

Lernziele

Du kannst ein statisches Astro-Projekt bei Hostinger veröffentlichen und kennst wichtige Kontrollpunkte vor dem Upload.

1. Voraussetzungen

Du brauchst einen aktiven Hostingtarif mit Webspace, eine eingerichtete Domain und Zugriff auf Hostingers hPanel. Das Kursprojekt nutzt statische Ausgabe; dafür ist auf dem Webspace keine laufende Node.js-Anwendung nötig.

2. Build erzeugen

Im Projektordner:

npm install
npm run build

Teste das Ergebnis optional mit npm run preview.

3. Dateien übertragen

1. In Hostinger hPanel deine Website wählen.
2. Dateimanager öffnen und in das zugehörige Webverzeichnis wechseln (typisch public_html).
3. Bei einer neuen, leeren Website den Inhalt von dist/ hochladen, nicht den Ordner als zusätzliche Ebene.
4. Domain aufrufen und Navigation, Bilder und Unterseiten prüfen.
5. HTTPS einschalten bzw. prüfen.

Vor dem Überschreiben einer bestehenden Website immer ein Backup anlegen. Dateien von anderen Anwendungen nicht ungeprüft löschen.

SFTP oder FTP?

Nutze nach Möglichkeit eine verschlüsselte Übertragung (SFTP/FTPS, wenn dein Tarif sie bereitstellt); alternativ bietet Hostinger einen Dateimanager. Zugangsdaten nicht im Repository ablegen.

4. Häufige Fehler

• Nur eine leere Seite: index.html liegt möglicherweise nicht im Webroot.
• Bilder fehlen: Pfade und Groß-/Kleinschreibung kontrollieren.
• Unterseiten liefern 404: Hosting-Regeln und generierte index.html-Struktur prüfen.
• Alte Version: Browsercache und tatsächlichen Upload prüfen.

Übung

Erstelle eine Deployment-Checkliste für dein Projekt. Veröffentliche zunächst auf einer Testdomain oder Subdomain, falls verfügbar.

Quelle: Astro-Dokumentation für Hostinger.