Zum Inhalt springen

Veröffentliche deine Astro-Site auf Netlify

Netlify bietet Hosting und serverlose Backend-Dienste für Webanwendungen und statische Websites. Jede Astro-Website kann auf Netlify gehostet werden!

Diese Anleitung enthält Anweisungen für die Veröffentlichung auf Netlify über die Benutzeroberfläche der Website oder das Netlify CLI.

Dein Astro-Projekt kann auf drei verschiedene Arten auf Netlify bereitgestellt werden: als statische Website, als Server-gerenderte Website oder als (experimentelle) Edge-gerenderte Website.

Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site bei Netlify zu veröffentlichen.

Um SSR in deinem Astro-Projekt zu aktivieren und auf Netlify einzusetzen:

Füge den Netlify-Adapter hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl astro add zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei astro.config.mjs vor.

Terminal-Fenster
npx astro add netlify

Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus:

  1. Installiere den @astrojs/netlify Adapter mit deinem bevorzugten Paketmanager in die Abhängigkeiten deines Projekts. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus:

    Terminal-Fenster
    npm install @astrojs/netlify
  2. Füge zwei neue Zeilen zu deiner Projektkonfigurationsdatei astro.config.mjs hinzu.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import netlify from '@astrojs/netlify/functions';
    export default defineConfig({
    output: 'server',
    adapter: netlify(),
    });

    Um dein Projekt stattdessen mit Netlify’s experimentellen Edge-Funktionen zu rendern, ändere den Import von netlify/functions in der Astro-Konfigurationsdatei in netlify/edge-functions.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import netlify from '@astrojs/netlify/functions';
    import netlify from '@astrojs/netlify/edge-functions';
    export default defineConfig({
    output: 'server',
    adapter: netlify(),
    });

Du kannst Netlify über die Benutzeroberfläche der Website oder über das Netlify CLI (Command Line Interface) einrichten. Das Verfahren ist für statische und SSR-Astro-Websites identisch.

Wenn dein Projekt in GitHub, GitLab, BitBucket oder Azure DevOps gespeichert ist, kannst du die Netlify-Website-UI verwenden, um deine Astro-Site bereitzustellen.

  1. Klicke auf Neue Website hinzufügen in deinem Netlify Dashboard

  2. Wähle Importiere ein bestehendes Projekt

    Wenn du dein Astro-Repository von deinem Git-Anbieter importierst, sollte Netlify automatisch die richtigen Konfigurationseinstellungen für dich erkennen und vorausfüllen.

  3. Vergewissere dich, dass die folgenden Einstellungen eingegeben wurden, und drücke dann auf die Schaltfläche Deploy:

    • Build Command: astro build oder npm run build
    • Publish directory: dist

Nach der Veröffentlichung wirst du zur Website-Übersichtsseite weitergeleitet. Dort kannst du die Details deiner Website bearbeiten.

Alle zukünftigen Änderungen an deinem Quellcode-Repository lösen je nach deiner Bereitstellungskonfiguration Vorschau- und Produktionsveröffentlichungen aus.

Du kannst optional eine neue Datei netlify.toml auf der obersten Ebene deines Projekt-Repositorys erstellen, um deinen Build-Befehl und dein Veröffentlichungsverzeichnis sowie andere Projekteinstellungen wie Umgebungsvariablen und Weiterleitungen zu konfigurieren. Netlify liest diese Datei und konfiguriert dein Deployment automatisch.

Um die Standardeinstellungen zu konfigurieren, erstelle eine Datei netlify.toml mit dem folgenden Inhalt:

[build]
command = "npm run build"
publish = "dist"

📚 Mehr Infos unter “Deploying an existing Astro Git repository” auf Netlify’s blog

Du kannst auch eine neue Website auf Netlify erstellen und dein Git-Repository einbinden, indem du das Netlify CLI installierst und verwendest.

  1. Installiere Netlify’s CLI global

    Terminal-Fenster
    npm install --global netlify-cli
  2. Starte das CLI und folge den Anweisungen, um dich anzumelden und Netlify zu autorisieren

  3. Starte netlify init und folge den Anweisungen

  4. Bestätige deinen Build-Befehl (astro build)

    Das CLI erkennt automatisch die Build-Einstellungen (astro build) und das Veröffentlichungsverzeichnis (dist) und bietet an, automatisch eine netlify.toml-Datei mit diesen Einstellungen zu erzeugen.

  5. Erstellen und Veröffentlichung durch Pushing zu Git

    Das CLI fügt dem Repository einen Veröffentlichungs-Schlüssel hinzu. Das bedeutet, dass deine Website jedes Mal, wenn du git push machst, automatisch auf Netlify neu aufgebaut wird.

📚 Mehr Details von Netlify unter Deploy an Astro site using the Netlify CLI

Wenn du ein Legacy Build Image (Xenial) auf Netlify verwendest, stelle sicher, dass deine Node.js-Version eingestellt ist. Astro benötigt Version 16.12.0 oder höher.

Du kannst deine Node.js-Version in Netlify angeben mit:

  • eine .nvmrc Datei in deinem Basisverzeichnis.
  • eine Umgebungsvariable NODE_VERSION in den Einstellungen deiner Website über das Netlify-Projekt-Dashboard.

Für die Verwendung von Netlify-Functions mit Astro ist keine besondere Konfiguration erforderlich. Füge ein netlify/functions-Verzeichnis zu deinem Projektstamm hinzu und folge der Netlify-Functions-Dokumentation, um loszulegen!

Weitere Veröffentlichungs-Anleitungen

Nach Art filtern