Konfigurationsübersicht

Astro ist ein flexibles, nicht rechthaberisches Framework, mit dem du dein Projekt auf viele verschiedene Arten konfigurieren kannst. Das bedeutet, dass sich der Einstieg in ein neues Projekt überwältigend anfühlen kann: Es gibt nicht den „einen besten Weg“, dein Astro-Projekt einzurichten!

Die Anleitungen in diesem Abschnitt „Konfiguration“ helfen dir, dich mit den verschiedenen Dateien vertraut zu machen, mit denen du Aspekte deines Projekts und deiner Entwicklungsumgebung konfigurieren und anpassen kannst.

Wenn dies dein erstes Astro-Projekt ist oder es eine Weile her ist, dass du ein neues Projekt eingerichtet hast, kannst du die folgenden Anleitungen und Verweise in der Dokumentation zur Hilfe nehmen.

Die Astro-Konfigurationsdatei

Die Astro-Konfigurationsdatei (EN) ist eine JavaScript-Datei, die im Stammverzeichnis eines jeden Starterprojekts enthalten ist:

import { defineConfig } from 'astro/config'

export default defineConfig({
  // deine Konfigurationsoptionen hier...
})

Sie wird nur benötigt, wenn du etwas zu konfigurieren hast, aber die meisten Projekte werden diese Datei verwenden. Der Helfer defineConfig() bietet automatisches IntelliSense in deiner IDE und ist der Ort, an dem du alle deine Konfigurationsoptionen hinzufügst, um Astro mitzuteilen, wie dein Projekt gebaut und in HTML gerendert werden soll.

Wir empfehlen, in den meisten Fällen das Standarddateiformat .mjs zu verwenden, oder .ts, wenn du TypeScript in deine Konfigurationsdatei schreiben willst. Allerdings werden auch astro.config.js und astro.config.cjs unterstützt.

Lies Astros Konfigurationsreferenz (EN) für eine vollständige Übersicht über alle unterstützten Konfigurationsoptionen.

Die TypeScript-Konfigurationsdatei

Jedes Astro-Starterprojekt enthält eine tsconfig.json-Datei in deinem Projekt. Astros Komponentenskript ist Typescript, das die Astro-Editoren zur Verfügung stellt und es dir ermöglicht, optional Syntax zu deinem JavaScript hinzuzufügen, um deinen eigenen Projektcode zu prüfen.

In der Datei tsconfig.json konfigurierst du das TypeScript-Template, das Typprüfungen für deinen Code durchführt, TypeScript-Plugins konfiguriert, Import-Aliase setzt und vieles mehr.

Lies Astros TypeScript-Leitfaden für einen vollständigen Überblick über die TypeScript-Optionen und die in Astro eingebauten Hilfstypen.

Entwicklungserfahrung

Während du im Entwicklungsmodus arbeitest, kannst du die Vorteile deines Code-Editors und anderer Tools nutzen, um die Astro-Entwicklererfahrung zu verbessern.

Astro bietet eine eigene offizielle VS Code-Erweiterung und ist mit mehreren anderen beliebten Editor-Tools kompatibel. Astro bietet außerdem eine anpassbare Symbolleiste, die in deiner Browser-Vorschau angezeigt wird, während der Dev-Server läuft. Du kannst deine eigenen Toolbar-Apps für zusätzliche Funktionen installieren und sogar selbst erstellen.

Lies Astros Anleitungen zu Editor-Einrichtungsoptionen und Verwendung der Entwicklungswerkzeugleiste, um zu erfahren, wie du deine Entwicklungserfahrung anpassen kannst.

Gemeinsame neue Projektaufgaben

Hier sind einige erste Schritte, die du bei einem neuen Astro-Projekt unternehmen kannst.

Füge deine Hosting-Domain hinzu

Um deine Sitemap zu erstellen und kanonische URLs zu erzeugen, konfigurierst du deine Bereitstellungs-URL in der Option site (EN). Wenn du auf einen Pfad veröffentlichst (z.B. www.example/docs), kannst du auch eine base (EN)-Option für das Stammverzeichnis deines Projekts konfigurieren.

Außerdem kann es sein, dass die verschiedenen Deployment-Hosts die Schrägstriche am Ende deiner URLs unterschiedlich behandeln. (z. B. example.com/about gegenüber example.com/about/). Sobald deine Website veröffentlicht ist, musst du eventuell deine trailingSlash (EN)-Option konfigurieren.

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://www.example.com',
  base: '/docs',
  trailingSlash: 'always',
})

Website-Metadaten hinzufügen

Astro verwendet seine Konfigurationsdatei nicht für allgemeine SEO- oder Metadaten, sondern nur für Informationen, die für die Erstellung deines Projektcodes und die Darstellung in HTML erforderlich sind.

Stattdessen werden diese Informationen in den HTML-Tags <link> und <meta> in den <head> deiner Seite eingefügt, so als würdest du eine einfache HTML-Seite schreiben.

Ein gängiges Muster für Astro-Sites ist es, eine <Head /> .astro-Komponente zu erstellen, die zu einer gemeinsamen Layout-Komponente hinzugefügt werden kann, damit sie für alle deine Seiten gilt.

---
import Head from './Head.astro';
const { ...props } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <Head />
    <!-- -->
  </head>
  <body><!-- --></body>
</html>

Da Head.astro eine ganz normale Astro-Komponente ist, kannst du Dateien importieren und von anderen Komponenten übergebene Requisiten empfangen, wie zum Beispiel einen bestimmten Seitentitel.

---
import Favicon from '../assets/Favicon.astro';
import SomeOtherTags from './SomeOtherTags.astro';
const { title = 'Meine Astro Website', ...props } = Astro.props;
---
<link rel="sitemap" href="/sitemap-index.xml">
<title>{title}</title>
<meta name="description" content="Willkommen auf meiner neuen Astro-Seite!">

<!-- Web analytics -->
<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

<!-- Open Graph tags -->
<meta property="og:title" content="Meine neue Astro Website" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="Willkommen auf meiner neuen Astro-Seite!" />
<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
<meta property="og:image:alt" content="">

<SomeOtherTags />

<Favicon />