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.

Projektkonfiguration

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.

Statische 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.

Adapter für SSR/Edge

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.

bash
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:

    bash
      npm install @astrojs/netlify

  2. Füge zwei neue Zeilen zu deiner Projektkonfigurationsdatei astro.config.mjs hinzu.

    js
    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.

    js
    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(),});

Wie man veröffentlicht

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.

Website UI Veröffentlichung

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.

netlify.toml-Datei

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:

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

📚 Mehr Infos unter "Deploying an existing Astro Git repository" auf Netlify's blog

CLI-Veröffentlichung

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

    bash
    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

Node.js-Version festlegen

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.

Netlify-Funktionen verwenden

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!

Beispiele

Astro-Kurse