withastro · louisescher · Apr 4, 2024 · Apr 4, 2024 · Apr 9, 2024 · Apr 11, 2024
diff --git a/src/content/docs/de/tutorial/0-introduction/1.mdx b/src/content/docs/de/tutorial/0-introduction/1.mdx
@@ -1,13 +1,13 @@
 ---
 type: tutorial
 title: Über dieses Tutorial
-description: Wie du mit dem Tutorial "Baue deinen ersten Astro-Blog" anfangen kannst.
+description: Wie du mit dem Tutorial „Erstelle deinen ersten Astro-Blog“ anfangen kannst.
 i18nReady: true
 ---
+
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
 
-
 ## Was muss ich wissen, um loszulegen?
 
 Wenn du ein paar Grundkenntnisse in **HTML**, **Markdown**, **CSS** und ein wenig **JavaScript** hast, dann kannst du direkt loslegen. 
@@ -16,7 +16,7 @@ Du kannst das gesamte Tutorial abschließen, indem du den Anweisungen folgst. As
 Außerdem brauchst du einen [GitHub](https://github.com)-Account (oder etwas Vergleichbares), um dein Projekt im Internet zu veröffentlichen. 
 
 <details>
-<summary>Wie kann ich die Checklisten am Ende jedes Kapitels nutzen?</summary>
+<summary>Wie kann ich die Checklisten am Ende jeder Lektion nutzen?</summary>
 
 Du hakst sie einfach ab! 
 
@@ -28,19 +28,19 @@ Du kannst auch einige Punkte der Checkliste erst mal nicht abhaken, als Erinneru
 </details>
 
 <details>
-<summary>Einheit 1 behandelt Themen, die ich schon kenne. Kann ich sie überspringen?</summary>
+<summary>Lektion 1 behandelt Themen, die ich schon kenne. Kann ich sie überspringen?</summary>
 
-Du kannst die Lektionen von [Einheit 1](/de/tutorial/1-setup/) nutzen, um sicherzugehen, dass du die Entwicklungstools und Accounts hast, die du brauchst, um das Tutorial abzuschließen. Die Einheit begleitet dich dabei, dein erstes Astro-Projekt zu erstellen, auf GitHub zu speichern und auf Netlify zu veröffentlichen. 
+Du kannst die Lektionen von [Lektion 1](/de/tutorial/1-setup/) nutzen, um sicherzugehen, dass du die Entwicklungstools und Accounts hast, die du brauchst, um das Tutorial abzuschließen. Die Lektion begleitet dich dabei, dein erstes Astro-Projekt zu erstellen, auf GitHub zu speichern und auf Netlify zu veröffentlichen.
 
-Wenn du [ein neues, leeres Astro-Projekt erstellst](/de/install-and-setup/) und mit deinem Setup bereits vertraut bist, kannst du diese Einheit aber überspringen und direkt zu [Einheit 2](/de/tutorial/2-pages/) gehen, wo du neue Seiten für dein Projekt erstellst. 
+Wenn du [ein neues, leeres Astro-Projekt erstellst](/de/install-and-setup/) und mit deinem Setup bereits vertraut bist, kannst du diese Einheit aber überspringen und direkt zu [Lektion 2](/de/tutorial/2-pages/) gehen, wo du neue Seiten für dein Projekt erstellst. 
 </details>
 
 <details>
 <summary>Was, wenn ich Hilfe brauche oder mehr über Astro erfahren will?</summary>
 
 Unser [Astro-Discord-Server](https://astro.build/chat) ist der beste Ort dafür! 
 
-In unserem Support-Kanal kannst du Fragen stellen, oder du kannst in `#general` oder `#off-topic` "Hallo" sagen und chatten.
+In unserem Support-Kanal kannst du Fragen stellen, oder du kannst in `#general` oder `#off-topic` „Hallo“ sagen und chatten.
 </details>
 
 <details>
@@ -54,6 +54,6 @@ Dieses Tutorial ist ein Projekt unseres Docs-Teams. Du kannst uns auf Discord im
 ## Checkliste für die nächsten Schritte 
 
 <Checklist>
-- [ ] Ich bin bereit loszulegen!
+- [ ] Ich bin bereit, loszulegen!
 </Checklist>
 </Box>
diff --git a/src/content/docs/de/tutorial/0-introduction/index.mdx b/src/content/docs/de/tutorial/0-introduction/index.mdx
@@ -0,0 +1,43 @@
+---
+type: tutorial
+unitTitle: 'Willkommen, Welt!'
+title: Erstelle deinen ersten Astro-Blog
+sidebar:
+  label: 'Tutorial: Erstelle einen Blog'
+description: >-
+  Lerne die Grundlagen von Astro mit einem projektbasierten Tutorial – inklusive allem Hintergrundwissen, das du zum Start brauchst!
+i18nReady: true
+head:
+  - tag: title
+    content: Blog-Tutorial erstellen | Docs
+---
+
+import Checklist from '~/components/Checklist.astro';
+import Box from '~/components/tutorial/Box.astro';
+import Lede from '~/components/tutorial/Lede.astro';
+
+<Lede> In diesem Tutorial lernst du die wichtigsten Funktionen von Astro, indem du einen vollständig funktionierenden Blog von Grund auf erstellst – bis zum Launch! 🚀 </Lede>
+
+Dabei wirst du:
+
+- Deine Entwicklungsumgebung einrichten 
+- Seiten und Blogbeiträge für deine Website erstellen
+- Mit Astro-Komponenten bauen
+- Lokale Dateien abfragen und verwenden
+- Interaktivität zu deiner Website hinzufügen
+- Deine Website im Web veröffentlichen
+
+Willst du jetzt schon sehen, was du erstellen wirst? Du kannst das fertige Projekt auf [GitHub](https://github.com/withastro/blog-tutorial-demo) oder eine funktionierende Version in einer Online-Coding-Umgebung wie [IDX](https://idx.google.com/import?url=https:%2F%2Fgithub.com%2Fwithastro%2Fblog-tutorial-demo%2F) oder [StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/complete?file=src%2Fpages%2Findex.astro) ansehen.
+
+:::note
+Wenn du lieber mit einer vorgefertigten Astro-Seite starten möchtest, kannst du https://astro.new besuchen und eine Starter-Vorlage auswählen, die du online bearbeiten kannst.
+::: 
+
+
+<Box icon="check-list">
+## Checkliste
+
+<Checklist>
+- [ ] Sieht super aus! Ich bin bereit, loszulegen!
+</Checklist>
+</Box>
diff --git a/src/content/docs/de/tutorial/1-setup/1.mdx b/src/content/docs/de/tutorial/1-setup/1.mdx
@@ -0,0 +1,119 @@
+---
+type: tutorial
+title: Bereite deine Entwicklungsumgebung vor
+description: |-
+  Tutorial: Erstelle deinen ersten Astro-Blog —
+  Installiere die lokalen Werkzeuge, die du für dieses Tutorial benötigst
+i18nReady: true
+---
+
+import Checklist from '~/components/Checklist.astro';
+import Box from '~/components/tutorial/Box.astro';
+import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
+import Option from '~/components/tutorial/Option.astro';
+import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
+import Badge from "~/components/Badge.astro"
+
+<PreCheck>
+  - Installiere alle Werkzeuge, die du zum Erstellen deiner Astro-Website benötigst
+</PreCheck>
+
+## Besorge die Entwicklungswerkzeuge, die du brauchst
+
+### Terminal
+
+Du wirst ein **Terminal** verwenden, um dein Astro-Projekt zu erstellen und wichtige Befehle zum Bauen, Entwickeln und Testen deiner Website auszuführen.
+
+Du kannst über ein lokales Terminal deines Betriebssystems auf die Kommandozeile zugreifen. Übliche Anwendungen sind **Terminal** (macOS/Linux), **Eingabe&shy;aufforderung** (Windows) und **Termux** (Android). Wahrscheinlich befindet sich eine dieser Applikationen bereits auf deinem Gerät.
+
+### Node.js
+
+Damit Astro auf deinem System läuft, musst du außerdem eine kompatible Version von [**Node.js**](https://nodejs.org/en/) installiert haben. Astro unterstützt **gerade** Node.js-Versionen. Die aktuell minimal unterstützten Versionen sind: `v18.20.8`, `v20.3.0` und `v22.0.0`. (`v19` and `v21` werden nicht unterstützt.)
+
+Um zu prüfen, ob du bereits eine kompatible Version installiert hast, führe folgenden Befehl im Terminal aus:
+
+```sh
+node -v
+
+# Beispielausgabe
+v18.20.8
+```
+
+Wenn der Befehl eine von Astro unterstützte Versionsnummer zurückgibt, bist du startklar!
+
+Wenn der Befehl eine Fehlermeldung wie `Command 'node' not found` oder eine niedrigere Versionsnummer ausgibt, musst du [eine kompatible Node.js-Version installieren](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+
+### Code-Editor
+
+Zusätzlich musst du einen **Code-Editor** herunterladen und installieren, um deinen Code zu schreiben.
+
+:::tip[Wir verwenden …]
+In diesem Tutorial benutzen wir **VS Code**, aber du kannst jeden Code-Editor für dein Betriebssystem verwenden.
+:::
+
+<Steps>
+1. [Installiere VS Code](https://code.visualstudio.com/#alt-downloads) oder einen anderen Code-Editor deiner Wahl.
+</Steps>
+
+<Box icon="question-mark">
+
+### Teste dein Wissen
+
+Welche der folgenden Optionen ist …
+1. Ein Code-Editor, um Änderungen an deinen Dateien und deren Inhalten vorzunehmen?
+
+    <MultipleChoice>
+      <Option>
+        Webbrowser
+      </Option>
+      <Option>
+        Terminal
+      </Option>
+      <Option isCorrect>
+        VS Code
+      </Option>
+    </MultipleChoice>
+
+2. Ein Online-Dienst für Versionskontrolle deines Repositories?
+
+    <MultipleChoice>
+      <Option isCorrect>
+        GitHub
+      </Option>
+      <Option>
+        Terminal
+      </Option>
+      <Option>
+        VS Code
+      </Option>
+    </MultipleChoice>
+
+3. Eine Anwendung zum Ausführen von Befehlen?
+    <MultipleChoice>
+      <Option>
+        GitHub
+      </Option>
+      <Option isCorrect>
+        Terminal
+      </Option>
+      <Option>
+        Webbrowser
+      </Option>
+    </MultipleChoice>
+
+</Box>
+
+<Box icon="check-list">
+## Checkliste zum Weitermachen
+
+<Checklist>
+- [ ] Ich kann auf die Kommandozeile im Terminal zugreifen.
+- [ ] Ich habe Node.js installiert.
+- [ ] Ich habe einen Code-Editor wie VS Code.
+</Checklist>
+</Box>
+
+### Ressourcen
+
+- <p>[FreeCodeCamp.org](https://freecodecamp.org) <Badge class="neutral-badge" text="external" /> – eine kostenlose Lernplattform mit vollständigen Kursen oder schnellen Auffrischungen zu HTML, CSS, JS und mehr.</p>
diff --git a/src/content/docs/de/tutorial/1-setup/2.mdx b/src/content/docs/de/tutorial/1-setup/2.mdx
@@ -0,0 +1,150 @@
+---
+type: tutorial
+title: Erstelle dein erstes Astro-Projekt
+description: |-
+  Tutorial: Erstelle deinen ersten Astro-Blog —
+  Baue ein neues Projekt für das Astro-Tutorial und mach dich bereit zum Coden
+i18nReady: true
+---
+
+import Checklist from '~/components/Checklist.astro';
+import Box from '~/components/tutorial/Box.astro';
+import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import PreCheck from '~/components/tutorial/PreCheck.astro';
+import { Steps } from '@astrojs/starlight/components';
+import Badge from "~/components/Badge.astro"
+
+<PreCheck>
+  - Führe den `create astro` Setup-Assistenten aus, um ein neues Astro-Projekt zu erstellen
+  - Starte den Astro-Server im Entwicklungsmodus
+  - Sieh dir eine Live-Vorschau deiner Website im Browser an
+</PreCheck>
+
+## Starte den Astro-Setup-Assistenten
+
+Die empfohlene Methode, um ein neues Astro-Projekt zu erstellen, ist über unseren `create astro` Setup-Assistenten.
+
+<Steps>
+1. Führe in der Kommandozeile deines Terminals den folgenden Befehl mit deinem bevorzugten Paketmanager aus:
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      # Erstelle ein neues Projekt mit npm
+      npm create astro@latest
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      # Erstelle ein neues Projekt mit pnpm
+      pnpm create astro@latest
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      # Erstelle ein neues Projekt mit Yarn
+      yarn create astro
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+2. Gib `y` ein, um `create-astro` zu installieren.
+3. Wenn du gefragt wirst, wo das Projekt erstellt werden soll, gib den Namen eines Ordners ein, in dem ein neues Verzeichnis für dein Projekt erstellt werden soll, z. B. `./tutorial`.
+
+    :::note
+    Ein neues Astro-Projekt kann nur in einem komplett leeren Ordner erstellt werden. Wähle also einen Namen, der noch nicht existiert!
+    :::
+
+4. Du siehst eine kurze Liste von Starter-Vorlagen. Verwende die Pfeiltasten (hoch und runter), um die minimalistische (leere) Vorlage auszuwählen, und drücke dann <kbd>Enter</kbd> (macOS: <kbd>Return</kbd>), um deine Wahl zu bestätigen.
+
+5. Wenn du gefragt wirst, ob die Abhängigkeiten installiert werden sollen, gib `y` ein.
+
+6. Wenn du gefragt wirst, ob ein neues Git-Repository initialisiert werden soll, gib `y` ein.
+</Steps>
+
+Wenn der Setup-Assistent abgeschlossen ist, benötigst du dieses Terminal nicht mehr. Du kannst nun VS Code öffnen, um weiterzumachen.
+
+## Öffne dein Projekt in VS Code
+
+<Steps>
+7. Öffne VS Code. Du wirst aufgefordert, einen Ordner zu öffnen. Wähle den Ordner, den du während des Setup-Assistenten erstellt hast.
+
+8. Wenn du ein Astro-Projekt zum ersten Mal öffnest, solltest du eine Benachrichtigung sehen, ob du empfohlene Erweiterungen installieren möchtest. Klicke darauf und wähle die [Astro Language Support-Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Sie bietet Syntax-Hervorhebung und automatische Vervollständigungen für deinen Astro-Code.
+
+9. Stelle sicher, dass das Terminal sichtbar ist und dass du die Eingabeaufforderung siehst, z. B.:
+
+    ```sh
+    user@machine:~/tutorial$
+    ```
+
+    :::tip[Tastenkürzel]
+    Um die Sichtbarkeit des Terminals umzuschalten, nutze <kbd>Strg + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).
+    :::
+</Steps>
+
+Ab jetzt kannst du anstelle des Terminals deines Computers das im VS Code integrierte Terminal für den Rest des Tutorials verwenden.
+
+## Astro im Entwicklungsmodus starten
+
+Um deine Projektdateien _als Website_ während der Arbeit zu sehen, muss Astro im Entwicklungsmodus laufen.
+
+### Starte den Entwicklungsserver
+
+<Steps>
+10. Starte den Astro-Entwicklungsserver, indem du im VS Code-Terminal folgenden Befehl eingibst:
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm run dev
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm run dev
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn run dev
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+    Jetzt solltest du im Terminal die Bestätigung sehen, dass Astro im Entwicklungsmodus läuft. 🚀
+</Steps>
+
+## Vorschau deiner Website ansehen
+
+Deine Projektdateien enthalten den gesamten Code, um eine Astro-Website darzustellen, aber der Browser zeigt deine Seiten an.
+
+<Steps>
+11. Klicke auf den `localhost`-Link in deinem Terminal, um eine Live-Vorschau deiner neuen Astro-Website zu sehen!  
+
+    (Astro verwendet standardmäßig `http://localhost:4321`, falls der Port `4321` verfügbar ist.)
+
+    So sollte die Astro-„Empty Project“-Starterseite in der Browser-Vorschau aussehen:
+
+    ![Eine weiße leere Seite mit dem Wort Astro oben.](/tutorial/minimal.png)
+</Steps>
+
+:::tip[Astro-Entwicklungsserver verwenden]
+Solange der Astro-Server im Entwicklungsmodus läuft, kannst du keine Befehle im Terminal ausführen. Stattdessen erhältst du in diesem Bereich Feedback, während du deine Seite ansiehst.
+
+Du kannst den Entwicklungsserver jederzeit stoppen und zur Eingabeaufforderung zurückkehren, indem du <kbd>Strg + C</kbd> (macOS: <kbd>Control + C</kbd>) im Terminal eingibst.
+
+Manchmal stoppt der Entwicklungsserver während der Arbeit automatisch. Wenn deine Live-Vorschau nicht mehr funktioniert, gehe zurück ins Terminal und starte den Entwicklungsserver erneut mit `npm run dev`.
+:::
+
+<Box icon="check-list">
+## Checkliste
+
+<Checklist>
+- [ ] Ich kann ein neues Astro-Projekt erstellen.
+- [ ] Ich kann den Astro-Entwicklungsserver starten.
+</Checklist>
+</Box>
+
+### Ressourcen
+
+- <p>[Erste Schritte mit Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge class="neutral-badge" text="external" /> — ein Video-Tutorial zum Installieren, Einrichten und Arbeiten mit VS Code</p>