Konfiguration

Konfiguration

Die Konfiguration findet auf mehreren Ebenen statt: der zentralen theme.config.ts, dem Code selbst und einigen Build-Umgebungsvariablen. Arbeite die Schritte von oben nach unten durch - jeder baut auf dem vorherigen auf.

Astro ist ein Frontend-Framework

Alles hier läuft auf dem Client (statische Ausgabe, optional mit On-Demand-Rendering). Speichere niemals Geheimnisse oder Backend-Logik in diesem Projekt - sensible Aufgaben gehören in einen echten Backend-Dienst.

1. theme.config.ts

Branding, i18n, Blog, Promo und llms.txt - alles vollständig typisiert.

2. Der Code

Dies ist ein echtes Astro-Projekt - die eigentliche Website baust du selbst.

3. Umgebungsvariablen

Ein paar Build-Overrides wie SITE_OVERRIDE und ROBOTS.

Schritt für Schritt

Entferne, was du nicht brauchst

Wenn du nicht den create stardrive-Befehl verwendet hast, entferne zuerst die Demo- und Repo-Dateien. Der Trimming-Leitfaden ist für KI-Agenten geschrieben, funktioniert aber auch manuell.

Mach das Projekt zu deinem

Passe die Grundlagen an, damit du das Projekt später wiedererkennst:

Aktualisiere die package.json passend zu deinem Projekt.
Setze zumindest die Überschrift in der README.md.

Favicons & Social-Bilder ersetzen

Tausche die Icon-Dateien in ./public/ (wir empfehlen realfavicongenerator.net). Das Web-Manifest wird aus der theme.config.ts generiert, du ersetzt also nur Bilddateien. Ersetze außerdem die Social-Fallbacks og.png, x.png und structured-preview.png in ./public/images/.

Helle & dunkle Favicons

Stardrive liefert getrennte Icons für hell/dunkel. Falls du das nicht brauchst, entferne die dunklen Varianten und passe ./src/components/head/base.astro an. Beim SVG handhabst du hell/dunkel direkt im SVG-Code.

theme.config.ts konfigurieren

Das ist das Herzstück der Einrichtung. Alles ist typisiert, deine IDE zeigt die Doku inline. Gehe in dieser Reihenfolge vor:

Setze die Basisinfos (Site-URL, Primärfarbe, …).
Lege deine Sprachen fest, füge pro Sprache eine JSON-Datei in ./src/i18n/ hinzu und richte den i18n-Block ein.
Wähle deine expressiveCodeThemes - eines für den hellen, eines für den dunklen Modus.
Konfiguriere die Blog-Standardwerte (und ersetze das Fallback-Bild, falls du es nutzt).
Setze oder deaktiviere die Promo-Slots.
Definiere, wie die llms.txt generiert wird.

Schriften & Tailwind-Basis

Stardrive liefert Geist über Fontsource. Tausche es gegen deine Schrift (npm un @fontsource/geist, dann deine installieren). Passe die Import-Anweisungen in den Layout-Dateien an. Passe anschließend./src/styles/tailwind.config.css an:

Aktualisiere den Font-Bereich.
Passe die Branding-Farben an (Hex-Codes ändern; Zeilen erst entfernen, wenn die Demo-Inhalte weg sind).
Passe bei Bedarf die Breakpoints an.

Deine Styles ergänzen

Erweitere die CSS-Dateien in ./src/styles/ gemäß der Layering-Konvention:

Tailwind als Basis.
global.css für eigene Regeln und Single-Source-of-Truth-Styles (z. B. Buttons).
Seitenspezifische CSS-Dateien (z. B. long-text-content.css), pro Seite importiert.
Sehr individuelle Styles bleiben auf die Seite oder Komponente beschränkt.

Ungenutzte Sprachen entfernen

Lösche die Unterordner in ./src/content/ und ./src/pages/ für Sprachen, die du nicht unterstützt. Nur eine Sprache? Dann kannst du auch ./src/pages/[lang] und die Sprachumschalter-Komponenten entfernen.

Seiten & Navigation aufbauen

Gestalte deine Struktur unter ./src/pages/ (eine Datei pro Route). Seiten, die sich nur durch übersetzte Strings unterscheiden, gehören in [lang]; Seiten mit langen oder abweichenden Texten bekommen einen expliziten Sprach-Unterordner mit direkt hinterlegtem Inhalt. Passe dann die Navigation in./src/components/layout/nav/ und die weiteren Layout-Dateien an.

Inhaltsübersetzungen

Halte die JSON-Dateien in ./src/i18n/ während des Layout-Baus mit deinem Projekt synchron.

Demo-Inhalte austauschen

Ersetze die Demo-Bilder in ./src/images (die Ordnerstruktur behalten!), aktualisiere oder entferne die./public/map/office.pmtiles der Demo-Kontaktseite und prüfe die Open-Graph-/X-Metadaten in./src/components/head/ogx.astro.

Anschließend alles validieren:

npm run check:astro

Deployment vorbereiten

Auf Cloudflare passt du _headers und _redirects in ./public/ sowie diewrangler.jsonc an und verknüpfst dein Repository mit einem Worker. Bei Migrationen mappst du alte Pfade in _redirects. Nicht auf Cloudflare? Konfiguriere deinen Host entsprechend.

Cache-Purging auf Cloudflare

Setze CF_PURGE_API_KEY und CF_PURGE_ZONE_ID und führe nach jedem Buildnpm run purge:cloudflare aus. Aktiviere außerdem Media → Images → Transformations in deinem Cloudflare-Dashboard.

Speed Brain deaktivieren

Schalte Speed Brain in deinem Cloudflare-Dashboard aus (Speed → Optimization → Speed Brain). Stardrive nutzt Astros eigene Prefetch-Logik, die mit Speed Brain kollidiert und doppelte Requests, veraltete Inhalte oder kaputte Navigation verursachen kann.

Umgebungsvariablen zur Build-Zeit

SITE_OVERRIDE: Überschreibt die globale Site-URL. Praktisch für Dev-Umgebungen.
ROBOTS: Überschreibt die Standard-Robots-Einstellung. Einstellungen auf Seitenebene haben weiterhin Vorrang.
CF_PURGE_API_KEY CF_PURGE_ZONE_ID: Erforderlich für das Cloudflare-Cache-Purge-Skript.
ADD_TO_CALENDAR_PRO_API_KEY: Aktiviert den vorgefertigten Adapter für dynamisch eingespielte Events.

Website läuft? Zeit für Inhalte.

Lerne die alltäglichen Workflows: Blog, FAQ, Integrationen, Preise und Events.

Anleitung