From c911bf14d8845691e3f342dda2cff9ea3212a187 Mon Sep 17 00:00:00 2001 From: Marc Krebstakies Date: Thu, 23 Jul 2026 19:38:35 +0200 Subject: [PATCH 01/13] i18n (DE): add 'install-and-setup' --- src/content/docs/de/install-and-setup.mdx | 310 ++++++++++++++++++++++ 1 file changed, 310 insertions(+) create mode 100644 src/content/docs/de/install-and-setup.mdx diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx new file mode 100644 index 0000000000000..119ca2a83cc46 --- /dev/null +++ b/src/content/docs/de/install-and-setup.mdx @@ -0,0 +1,310 @@ +--- +title: Astro installieren +sidebar: + label: Installation +description: "So installierst du Astro und startest ein neues Projekt." +i18nReady: true +--- + +import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import ReadMore from '~/components/ReadMore.astro'; + +Der [CLI-Befehl `create astro`](#installation-über-den-cliassistenten) ist der schnellste Weg, ein Astro‑Projekt von Grund auf neu zu starten. +Er führt dich Schritt für Schritt durch die Einrichtung deines neuen Astro‑Projekts und ermöglicht dir, aus mehreren offiziellen Starter‑Vorlagen zu wählen. + +Du kannst den CLI‑Befehl auch mit der Option `template` ausführen, um dein Projekt mit einem bestehenden Theme oder einer Starter‑Vorlage zu beginnen. +In unserer [Theme‑ und Starter‑Übersicht](https://astro.build/themes/) kannst du Vorlagen für Blogs, Portfolios, Dokumentationsseiten, Landingpages und mehr entdecken! + +Wenn du Astro stattdessen manuell installieren möchtest, findest du unsere [Schritt‑für‑Schritt‑Anleitung zur manuellen Installation](#manuelle-installation). + +:::tip[Online‑Vorschau] +Möchtest du Astro lieber direkt im Browser ausprobieren? +Besuche [astro.new](https://astro.new/), um unsere Starter‑Vorlagen zu durchsuchen und ein neues Astro‑Projekt zu erzeugen, ohne deinen Browser zu verlassen. +::: + +## Voraussetzungen + +- **Node.js** – `v22.12.0` oder höher. Versionen mit ungerader Zahl wie `v23` werden nicht unterstützt. +- **Texteditor** – Wir empfehlen [VS Code](https://code.visualstudio.com/) mit der [offiziellen Astro‑Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). +- **Terminal** – Astro wird über die Kommandozeilen­schnittstelle (CLI) verwendet. + +## Browser‑Kompatibilität + +Astro basiert auf Vite, das standardmäßig moderne Browser mit aktueller JavaScript‑Unterstützung anvisiert. +Die vollständige Liste der unterstützten Browser findest du in der [Vite‑Dokumentation](https://vite.dev/guide/build.html#browser-compatibility). + +## Installation über den CLI‑Assistenten + +Du kannst `create astro` überall auf deinem Rechner ausführen – du musst also nicht vorher ein leeres Verzeichnis anlegen. +Falls du noch kein Verzeichnis für dein neues Projekt hast, legt der Assistent automatisch eines für dich an. + + +1. Führe den folgenden Befehl im Terminal aus, um den Installationsassistenten zu starten: + + + + ```shell + # neues Projekt mit npm erzeugen + npm create astro@latest + ``` + + + ```shell + # neues Projekt mit pnpm erzeugen + pnpm create astro@latest + ``` + + + ```shell + # neues Projekt mit yarn erzeugen + yarn create astro + ``` + + + + Wenn alles funktioniert, erscheint eine Erfolgsmeldung mit empfohlenen nächsten Schritten. + +2. Navigiere in dein neues Projektverzeichnis, um mit Astro zu arbeiten. + +3. Falls du im Assistenten den Schritt „Abhängigkeiten installieren?“ übersprungen hast, installiere die Abhängigkeiten jetzt: + + + + ```shell + npm install + ``` + + + ```shell + pnpm install + ``` + + + ```shell + yarn install + ``` + + + +4. Du kannst jetzt den [Astro‑Entwicklungsserver starten](/de/develop-and-build/#start-the-astro-dev-server) und eine Live‑Vorschau deines Projekts sehen! + + +## CLI‑Optionen + +Du kannst `create astro` mit zusätzlichen Optionen ausführen, um den Einrichtungsprozess anzupassen (z. B. alle Fragen automatisch mit „ja“ beantworten oder die Houston‑Animation überspringen) oder dein neues Projekt zu konfigurieren (z. B. Git installieren oder Integrationen hinzufügen). + +Siehe [alle verfügbaren Optionen des `create astro`‑Befehls](https://github.com/withastro/astro/blob/main/packages/create-astro/README.md). + +### Integrationen hinzufügen + +Du kannst ein neues Astro‑Projekt starten und gleichzeitig alle [offiziellen Integrationen](/de/guides/integrations/) oder von der Community bereitgestellten Integrationen installieren, die den Befehl `astro add` unterstützen. +Verwende dazu den Befehl `create astro` mit der Option `--add`. + +Führe den folgenden Befehl im Terminal aus und ersetze dabei den Namen der Integration durch jede, die den Befehl `astro add` unterstützt: + + + + ```shell + # neues Projekt mit React und Partytown erzeugen + npm create astro@latest -- --add react --add partytown + ``` + + + ```shell + # neues Projekt mit React und Partytown erzeugen + pnpm create astro@latest --add react --add partytown + ``` + + + ```shell + # neues Projekt mit React und Partytown erzeugen + yarn create astro --add react --add partytown + ``` + + + +### Theme oder Starter‑Vorlage verwenden + +Du kannst ein neues Astro‑Projekt basierend auf einem [offiziellen Beispiel](https://github.com/withastro/astro/tree/main/examples) oder dem `main`‑Branch eines beliebigen GitHub‑Repositories starten, indem du die Option `--template` verwendest. + +Führe den folgenden Befehl im Terminal aus und ersetze dabei den Namen der offiziellen Astro-Startervorlage oder den GitHub-Benutzernamen und das Repository des Themes, das du verwenden möchtest: + + + + ```shell + # Ein neues Projekt erstellen und offizielles Beispiel verwenden + npm create astro@latest -- --template + + # Ein neues Projekt auf Basis des main-Branch eines GitHub-Repositorys erstellen + npm create astro@latest -- --template / + ``` + + + + ```shell + # Ein neues Projekt erstellen und offizielles Beispiel verwenden + pnpm create astro@latest --template + + # Ein neues Projekt auf Basis des main-Branch eines GitHub-Repositorys erstellen + pnpm create astro@latest --template / + ``` + + + + ```shell + # Ein neues Projekt erstellen und offizielles Beispiel verwenden + yarn create astro --template + + # Ein neues Projekt auf Basis des main-Branch eines GitHub-Repositorys erstellen + yarn create astro --template / + ``` + + + +Standardmäßig wird der `main`‑Branch verwendet. +Um einen anderen Branch zu nutzen, ergänze ihn im Template‑Argument: +`/#` + +## Manuelle Installation + +Diese Anleitung führt dich durch die manuelle Einrichtung eines neuen Astro‑Projekts. +Wenn du den automatischen CLI‑Assistenten nicht verwenden möchtest, kannst du dein Projekt auch selbst einrichten. + + +1. Erstelle ein Verzeichnis + + ```bash + mkdir my-astro-project + cd my-astro-project + ``` + + Erstelle anschließend eine `package.json`, um die Abhängigkeiten deines Projekts zu verwalten: + + + + ```shell + npm init --yes + ``` + + + ```shell + pnpm init + ``` + + + ```shell + yarn init --yes + ``` + + + +2. Astro installieren + + :::note[Important] + Astro muss lokal installiert werden, nicht global. + Verwende also **nicht** `npm install -g astro`, `pnpm add -g astro` oder `yarn add global astro`. + ::: + + + + ```shell + npm install astro + ``` + + + ```shell + pnpm add astro + ``` + + + ```shell + yarn add astro + ``` + + + + Ersetze anschließend alle Platzhalter im Abschnitt „scripts“ deiner `package.json`: + + ```json title="package.json" del={3} ins={4-6} + { + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "dev": "astro dev", + "build": "astro build", + "preview": "astro preview" + } + } + ``` + +3. Erste Seite erstellen + + Erstelle die Datei `src/pages/index.astro` und füge folgenden Inhalt ein: + + ```astro title="src/pages/index.astro" + --- + // Willkommen bei Astro! Alles zwischen diesen drei Bindestrichen + // ist dein „Component Frontmatter“. Dieser wird nie im Browser ausgeführt. + console.log('Dies läuft in deinem Terminal, nicht im Browser!'); + --- + + + +

Hello, World!

+ + + + ``` + +4. Erstes Asset erstellen + + Erstelle ein Verzeichnis `public/` und darin die Datei `public/robots.txt`: + + ```diff title="public/robots.txt" + # Beispiel: Erlaube allen Bots deine Website zu scannen und zu indexieren. + # Vollständige Syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txt + User-agent: * + Allow: / + ``` + +5. `astro.config.mjs` erstellen + + ```js title="astro.config.mjs" + import { defineConfig } from "astro/config"; + + // https://astro.build/config + export default defineConfig({}); + ``` + +6. TypeScript‑Unterstützung hinzufügen + + Erstelle `tsconfig.json`: + + ```json title="tsconfig.json" + { + "extends": "astro/tsconfigs/base" + } + ``` + +7. Projektstruktur + + + - node_modules/ + - public/ + - robots.txt + - src/ + - pages/ + - index.astro + - astro.config.mjs + - package-lock.json oder yarn.lock, pnpm-lock.yaml usw. + - package.json + - tsconfig.json + + +8. Starte jetzt den Astro‑Entwicklungsserver und sieh dir die Live‑Vorschau deines Projekts an! + From 1cfb0ba6dfdb08eef2576dd5b5bb99654eef94ea Mon Sep 17 00:00:00 2001 From: Marc Krebstakies Date: Thu, 23 Jul 2026 21:06:48 +0200 Subject: [PATCH 02/13] i18n (DE): fix fragment links --- src/content/docs/de/basics/project-structure.mdx | 2 +- src/content/docs/de/install-and-setup.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/de/basics/project-structure.mdx b/src/content/docs/de/basics/project-structure.mdx index 4195e0aa64bac..4f40759331654 100644 --- a/src/content/docs/de/basics/project-structure.mdx +++ b/src/content/docs/de/basics/project-structure.mdx @@ -118,7 +118,7 @@ Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen P Es gibt [zwei Arten von Abhängigkeiten](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file), die du in deiner `package.json`-Datei festlegen kannst: `dependencies` und `devDependencies`. In den meisten Fällen funktionieren sie auf die gleiche Weise: Astro benötigt zum Erzeugungszeitpunkt alle Abhängigkeiten, und auch dein Paketmanager wird beide Arten installieren. Wir empfehlen dir, all deine Abhängigkeiten zunächst in `dependencies` einzutragen, und `devDependencies` nur zu verwenden, wenn dein spezieller Anwendungsfall es erfordert. -Eine Anleitung zur Erstellung einer neuen `package.json`-Datei für dein Projekt findest du auf der Seite [Manuelle Installation von Astro](/de/install-and-setup/#manual-setup). +Eine Anleitung zur Erstellung einer neuen `package.json`-Datei für dein Projekt findest du auf der Seite [Manuelle Installation von Astro](/de/install-and-setup/#manuelle-installation). ### `astro.config.mjs` diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index 119ca2a83cc46..a1188d3dea918 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -87,7 +87,7 @@ Falls du noch kein Verzeichnis für dein neues Projekt hast, legt der Assistent -4. Du kannst jetzt den [Astro‑Entwicklungsserver starten](/de/develop-and-build/#start-the-astro-dev-server) und eine Live‑Vorschau deines Projekts sehen! +4. Du kannst jetzt den [Astro‑Entwicklungsserver starten](/de/develop-and-build/#starte-den-astro-entwicklungsserver) und eine Live‑Vorschau deines Projekts sehen! ## CLI‑Optionen From 25ede983a56440e0c7c62985a370ebc0ee4ae363 Mon Sep 17 00:00:00 2001 From: Marc Date: Fri, 31 Jul 2026 13:19:23 +0200 Subject: [PATCH 03/13] Update src/content/docs/de/install-and-setup.mdx Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> --- src/content/docs/de/install-and-setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index a1188d3dea918..0e2e1a69564b7 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -20,7 +20,7 @@ Wenn du Astro stattdessen manuell installieren möchtest, findest du unsere [Sch :::tip[Online‑Vorschau] Möchtest du Astro lieber direkt im Browser ausprobieren? -Besuche [astro.new](https://astro.new/), um unsere Starter‑Vorlagen zu durchsuchen und ein neues Astro‑Projekt zu erzeugen, ohne deinen Browser zu verlassen. +Besuche [astro.new](https://astro.new/), um unsere Starter‑Vorlagen zu durchsuchen und ein neues Astro‑Projekt zu erstellen, ohne deinen Browser zu verlassen. ::: ## Voraussetzungen From dc15f51c616481a99c52a0f91e78eb1317e2bb44 Mon Sep 17 00:00:00 2001 From: Marc Date: Fri, 31 Jul 2026 13:19:37 +0200 Subject: [PATCH 04/13] Update src/content/docs/de/install-and-setup.mdx Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> --- src/content/docs/de/install-and-setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index 0e2e1a69564b7..cc3a98d2b5e20 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -27,7 +27,7 @@ Besuche [astro.new](https://astro.new/), um unsere Starter‑Vorlagen zu durchsu - **Node.js** – `v22.12.0` oder höher. Versionen mit ungerader Zahl wie `v23` werden nicht unterstützt. - **Texteditor** – Wir empfehlen [VS Code](https://code.visualstudio.com/) mit der [offiziellen Astro‑Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). -- **Terminal** – Astro wird über die Kommandozeilen­schnittstelle (CLI) verwendet. +- **Terminal** – Astro wird über die Kommandozeilen­­schnittstelle (CLI) verwendet. ## Browser‑Kompatibilität From d8e80daed31ea4ea57a776cccdbef8e2b9e238c1 Mon Sep 17 00:00:00 2001 From: Marc Date: Fri, 31 Jul 2026 13:24:14 +0200 Subject: [PATCH 05/13] Update src/content/docs/de/install-and-setup.mdx Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> --- src/content/docs/de/install-and-setup.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index cc3a98d2b5e20..8076430ac872e 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -36,7 +36,8 @@ Die vollständige Liste der unterstützten Browser findest du in der [Vite‑Dok ## Installation über den CLI‑Assistenten -Du kannst `create astro` überall auf deinem Rechner ausführen – du musst also nicht vorher ein leeres Verzeichnis anlegen. +Du kannst `create astro` überall auf deinem Computer ausführen – du musst also nicht vorher ein leeres Verzeichnis anlegen. + Falls du noch kein Verzeichnis für dein neues Projekt hast, legt der Assistent automatisch eines für dich an. From a6ddae1e82d65461a28b039670e49435056b2284 Mon Sep 17 00:00:00 2001 From: Marc Date: Fri, 31 Jul 2026 13:26:19 +0200 Subject: [PATCH 06/13] Update src/content/docs/de/install-and-setup.mdx Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> --- src/content/docs/de/install-and-setup.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index 8076430ac872e..d5f8829569419 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -107,19 +107,19 @@ Führe den folgenden Befehl im Terminal aus und ersetze dabei den Namen der Inte ```shell - # neues Projekt mit React und Partytown erzeugen + # Neues Projekt mit React und Partytown erstellen npm create astro@latest -- --add react --add partytown ``` ```shell - # neues Projekt mit React und Partytown erzeugen + # Neues Projekt mit React und Partytown erstellen pnpm create astro@latest --add react --add partytown ``` ```shell - # neues Projekt mit React und Partytown erzeugen + # Neues Projekt mit React und Partytown erstellen yarn create astro --add react --add partytown ``` From 16d0b08a8beaf46f45fa001aed10c69d039cdef6 Mon Sep 17 00:00:00 2001 From: Marc Date: Fri, 31 Jul 2026 13:27:26 +0200 Subject: [PATCH 07/13] Update src/content/docs/de/install-and-setup.mdx Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> --- src/content/docs/de/install-and-setup.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index d5f8829569419..e5a8a22751443 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -46,19 +46,19 @@ Falls du noch kein Verzeichnis für dein neues Projekt hast, legt der Assistent ```shell - # neues Projekt mit npm erzeugen + # Neues Projekt mit npm erstellen npm create astro@latest ``` ```shell - # neues Projekt mit pnpm erzeugen + # Neues Projekt mit pnpm erstellen pnpm create astro@latest ``` ```shell - # neues Projekt mit yarn erzeugen + # Neues Projekt mit Yarn erstellen yarn create astro ``` From 02e7b0a62ebbcc2c57243ae40370a5f21d308db0 Mon Sep 17 00:00:00 2001 From: Marc Date: Fri, 31 Jul 2026 13:28:44 +0200 Subject: [PATCH 08/13] Update src/content/docs/de/install-and-setup.mdx Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> --- src/content/docs/de/install-and-setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index e5a8a22751443..33d1cfe521e81 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -68,7 +68,7 @@ Falls du noch kein Verzeichnis für dein neues Projekt hast, legt der Assistent 2. Navigiere in dein neues Projektverzeichnis, um mit Astro zu arbeiten. -3. Falls du im Assistenten den Schritt „Abhängigkeiten installieren?“ übersprungen hast, installiere die Abhängigkeiten jetzt: +3. Falls du im Assistenten den Schritt „Install dependencies?“ übersprungen hast, installiere die Abhängigkeiten jetzt: From 8a276d3bbc1b800165755b2348ecdf84d5dc1c65 Mon Sep 17 00:00:00 2001 From: Marc Date: Fri, 31 Jul 2026 13:31:56 +0200 Subject: [PATCH 09/13] Update src/content/docs/de/install-and-setup.mdx Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> --- src/content/docs/de/install-and-setup.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index 33d1cfe521e81..0854f0e42f62c 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -100,6 +100,7 @@ Du kannst `create astro` mit zusätzlichen Optionen ausführen, um den Einrichtu ### Integrationen hinzufügen Du kannst ein neues Astro‑Projekt starten und gleichzeitig alle [offiziellen Integrationen](/de/guides/integrations/) oder von der Community bereitgestellten Integrationen installieren, die den Befehl `astro add` unterstützen. + Verwende dazu den Befehl `create astro` mit der Option `--add`. Führe den folgenden Befehl im Terminal aus und ersetze dabei den Namen der Integration durch jede, die den Befehl `astro add` unterstützt: From 6f3dcb19d6eb9543bb357d53a27389f58b3fc241 Mon Sep 17 00:00:00 2001 From: Marc Date: Fri, 31 Jul 2026 13:32:21 +0200 Subject: [PATCH 10/13] Update src/content/docs/de/install-and-setup.mdx Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> --- src/content/docs/de/install-and-setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/install-and-setup.mdx b/src/content/docs/de/install-and-setup.mdx index 0854f0e42f62c..04f31076b5e52 100644 --- a/src/content/docs/de/install-and-setup.mdx +++ b/src/content/docs/de/install-and-setup.mdx @@ -253,7 +253,7 @@ Wenn du den automatischen CLI‑Assistenten nicht verwenden möchtest, kannst du aber mit etwas Magie, um dir beim Erstellen großartiger Vorlagen zu helfen. --> -

Hello, World!

+

Hallo, Welt!