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 new file mode 100644 index 0000000000000..3330a729cb597 --- /dev/null +++ b/src/content/docs/de/install-and-setup.mdx @@ -0,0 +1,312 @@ +--- +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 erstellen, 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 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. + + +1. Führe den folgenden Befehl im Terminal aus, um den Installationsassistenten zu starten: + + + + ```shell + # Neues Projekt mit npm erstellen + npm create astro@latest + ``` + + + ```shell + # Neues Projekt mit pnpm erstellen + pnpm create astro@latest + ``` + + + ```shell + # Neues Projekt mit Yarn erstellen + 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 „Install dependencies?“ ü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/#starte-den-astro-entwicklungsserver) 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 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 erstellen + npm create astro@latest -- --add react --add partytown + ``` + + + ```shell + # Neues Projekt mit React und Partytown erstellen + pnpm create astro@latest --add react --add partytown + ``` + + + ```shell + # Neues Projekt mit React und Partytown erstellen + 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‑Repositorys 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 „Komponenten-Frontmatter“. Dieser wird nie im Browser ausgeführt. + console.log('Dies läuft in deinem Terminal, nicht im Browser!'); + --- + + + +

Hallo, Welt!

+ + + + ``` + +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! +