Skip to content

Commit fb42152

Browse files
randomguy-2650trueberrylesslouisescheryanthomasdev
authored
i18n(de): Add tutorial pages (sections 0–2 + 6) (#12497)
Co-authored-by: Felix Schneider <[email protected]> Co-authored-by: Louis Escher <[email protected]> Co-authored-by: Yan <[email protected]>
1 parent 45eb780 commit fb42152

File tree

19 files changed

+2516
-0
lines changed

19 files changed

+2516
-0
lines changed

‎src/content/docs/de/tutorial/0-introduction/1.mdx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
type: tutorial
3+
title: Über dieses Tutorial
4+
description: Wie du mit dem Tutorial „Erstelle deinen ersten Astro-Blog“ anfangen kannst.
5+
i18nReady: true
6+
---
7+
8+
import Checklist from '~/components/Checklist.astro';
9+
import Box from '~/components/tutorial/Box.astro';
10+
11+
## Was muss ich wissen, um loszulegen?
12+
13+
Wenn du ein paar Grundkenntnisse in **HTML**, **Markdown**, **CSS** und ein wenig **JavaScript** hast, dann kannst du direkt loslegen.
14+
Du kannst das gesamte Tutorial abschließen, indem du den Anweisungen folgst. Astro ist für alle da! 🧑‍🚀 👩‍🚀 👨‍🚀
15+
16+
Außerdem brauchst du einen [GitHub](https://github.com)-Account (oder etwas Vergleichbares), um dein Projekt im Internet zu veröffentlichen.
17+
18+
<details>
19+
<summary>Wie kann ich die Checklisten am Ende jeder Lektion nutzen?</summary>
20+
21+
Du hakst sie einfach ab!
22+
23+
Am Ende jeder Seite befinden sich anklickbare Checklisten mit den Aufgaben, die du nun lösen können solltest. Hake diese Punkte ab, um deine Fortschritte im Tutorial-Tracker verfolgen zu können.
24+
Der Tracker ist optional, kann dir aber dabei helfen, den Einstieg an der richtigen Stelle wieder zu finden, wenn du das Tutorial in mehreren Sitzungen abschließt.
25+
Du kannst auch einige Punkte der Checkliste erst mal nicht abhaken, als Erinnerung, falls du später zurückkehren möchtest.
26+
(Diese Daten werden nur im lokalen Speicher deines Browsers gespeichert und nirgendwo sonst. Es werden keine Daten von Astro gesammelt.)
27+
28+
</details>
29+
30+
<details>
31+
<summary>Lektion 1 behandelt Themen, die ich schon kenne. Kann ich sie überspringen?</summary>
32+
33+
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 Einheit begleitet dich dabei, dein erstes Astro-Projekt zu erstellen, auf GitHub zu speichern und auf Netlify zu veröffentlichen.
34+
35+
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.
36+
</details>
37+
38+
<details>
39+
<summary>Was, wenn ich Hilfe brauche oder mehr über Astro erfahren will?</summary>
40+
41+
Unser [Astro-Discord-Server](https://astro.build/chat) ist der beste Ort dafür!
42+
43+
In unserem Support-Kanal kannst du Fragen stellen, oder du kannst in `#general` oder `#off-topic` „Hallo“ sagen und chatten.
44+
</details>
45+
46+
<details>
47+
<summary>Wo kann ich Feedback zu diesem Tutorial geben?</summary>
48+
49+
Dieses Tutorial ist ein Projekt unseres Docs-Teams. Du kannst uns auf Discord im `#docs`-Kanal finden oder direkt ein Issue im [Docs-Repository](https://github.com/withastro/docs/issues) erstellen.
50+
</details>
51+
52+
<Box icon="check-list">
53+
54+
## Checkliste für die nächsten Schritte
55+
56+
<Checklist>
57+
- [ ] Ich bin bereit, loszulegen!
58+
</Checklist>
59+
</Box>

‎src/content/docs/de/tutorial/0-introduction/index.mdx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
type: tutorial
3+
unitTitle: 'Willkommen, Welt!'
4+
title: Erstelle deinen ersten Astro-Blog
5+
sidebar:
6+
label: 'Tutorial: Erstelle einen Blog'
7+
description: >-
8+
Lerne die Grundlagen von Astro mit einem projektbasierten Tutorial – inklusive allem Hintergrundwissen, das du zum Start brauchst!
9+
i18nReady: true
10+
head:
11+
- tag: title
12+
content: Blog-Tutorial erstellen | Docs
13+
---
14+
15+
import Checklist from '~/components/Checklist.astro';
16+
import Box from '~/components/tutorial/Box.astro';
17+
import Lede from '~/components/tutorial/Lede.astro';
18+
19+
<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>
20+
21+
Dabei wirst du:
22+
23+
- Deine Entwicklungsumgebung einrichten
24+
- Seiten und Blogbeiträge für deine Website erstellen
25+
- Mit Astro-Komponenten bauen
26+
- Lokale Dateien abfragen und verwenden
27+
- Interaktivität zu deiner Website hinzufügen
28+
- Deine Website im Web veröffentlichen
29+
30+
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.
31+
32+
:::note
33+
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.
34+
:::
35+
36+
37+
<Box icon="check-list">
38+
## Checkliste
39+
40+
<Checklist>
41+
- [ ] Sieht super aus! Ich bin bereit, loszulegen!
42+
</Checklist>
43+
</Box>

‎src/content/docs/de/tutorial/1-setup/1.mdx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
type: tutorial
3+
title: Bereite deine Entwicklungsumgebung vor
4+
description: |-
5+
Tutorial: Erstelle deinen ersten Astro-Blog —
6+
Installiere die lokalen Werkzeuge, die du für dieses Tutorial benötigst
7+
i18nReady: true
8+
---
9+
10+
import Checklist from '~/components/Checklist.astro';
11+
import Box from '~/components/tutorial/Box.astro';
12+
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
13+
import Option from '~/components/tutorial/Option.astro';
14+
import PreCheck from '~/components/tutorial/PreCheck.astro';
15+
import { Steps } from '@astrojs/starlight/components';
16+
import Badge from "~/components/Badge.astro"
17+
18+
<PreCheck>
19+
- Installiere alle Werkzeuge, die du zum Erstellen deiner Astro-Website benötigst
20+
</PreCheck>
21+
22+
## Besorge die Entwicklungswerkzeuge, die du brauchst
23+
24+
### Terminal
25+
26+
Du wirst ein **Terminal** verwenden, um dein Astro-Projekt zu erstellen und wichtige Befehle zum Bauen, Entwickeln und Testen deiner Website auszuführen.
27+
28+
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.
29+
30+
### Node.js
31+
32+
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.)
33+
34+
Um zu prüfen, ob du bereits eine kompatible Version installiert hast, führe folgenden Befehl im Terminal aus:
35+
36+
```sh
37+
node -v
38+
39+
# Beispielausgabe
40+
v18.20.8
41+
```
42+
43+
Wenn der Befehl eine von Astro unterstützte Versionsnummer zurückgibt, bist du startklar!
44+
45+
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).
46+
47+
### Code-Editor
48+
49+
Zusätzlich musst du einen **Code-Editor** herunterladen und installieren, um deinen Code zu schreiben.
50+
51+
:::tip[Wir verwenden …]
52+
In diesem Tutorial benutzen wir **VS Code**, aber du kannst jeden Code-Editor für dein Betriebssystem verwenden.
53+
:::
54+
55+
<Steps>
56+
1. [Installiere VS Code](https://code.visualstudio.com/#alt-downloads) oder einen anderen Code-Editor deiner Wahl.
57+
</Steps>
58+
59+
<Box icon="question-mark">
60+
61+
### Teste dein Wissen
62+
63+
Welche der folgenden Optionen ist …
64+
1. Ein Code-Editor, um Änderungen an deinen Dateien und deren Inhalten vorzunehmen?
65+
66+
<MultipleChoice>
67+
<Option>
68+
Webbrowser
69+
</Option>
70+
<Option>
71+
Terminal
72+
</Option>
73+
<Option isCorrect>
74+
VS Code
75+
</Option>
76+
</MultipleChoice>
77+
78+
2. Ein Online-Dienst für Versionskontrolle deines Repositories?
79+
80+
<MultipleChoice>
81+
<Option isCorrect>
82+
GitHub
83+
</Option>
84+
<Option>
85+
Terminal
86+
</Option>
87+
<Option>
88+
VS Code
89+
</Option>
90+
</MultipleChoice>
91+
92+
3. Eine Anwendung zum Ausführen von Befehlen?
93+
<MultipleChoice>
94+
<Option>
95+
GitHub
96+
</Option>
97+
<Option isCorrect>
98+
Terminal
99+
</Option>
100+
<Option>
101+
Webbrowser
102+
</Option>
103+
</MultipleChoice>
104+
105+
</Box>
106+
107+
<Box icon="check-list">
108+
## Checkliste zum Weitermachen
109+
110+
<Checklist>
111+
- [ ] Ich kann auf die Kommandozeile im Terminal zugreifen.
112+
- [ ] Ich habe Node.js installiert.
113+
- [ ] Ich habe einen Code-Editor wie VS Code.
114+
</Checklist>
115+
</Box>
116+
117+
### Ressourcen
118+
119+
- <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>

‎src/content/docs/de/tutorial/1-setup/2.mdx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
---
2+
type: tutorial
3+
title: Erstelle dein erstes Astro-Projekt
4+
description: |-
5+
Tutorial: Erstelle deinen ersten Astro-Blog —
6+
Baue ein neues Projekt für das Astro-Tutorial und mach dich bereit zum Coden
7+
i18nReady: true
8+
---
9+
10+
import Checklist from '~/components/Checklist.astro';
11+
import Box from '~/components/tutorial/Box.astro';
12+
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
13+
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
14+
import PreCheck from '~/components/tutorial/PreCheck.astro';
15+
import { Steps } from '@astrojs/starlight/components';
16+
import Badge from "~/components/Badge.astro"
17+
18+
<PreCheck>
19+
- Führe den `create astro` Setup-Assistenten aus, um ein neues Astro-Projekt zu erstellen
20+
- Starte den Astro-Server im Entwicklungsmodus
21+
- Sieh dir eine Live-Vorschau deiner Website im Browser an
22+
</PreCheck>
23+
24+
## Starte den Astro-Setup-Assistenten
25+
26+
Die empfohlene Methode, um ein neues Astro-Projekt zu erstellen, ist über unseren `create astro` Setup-Assistenten.
27+
28+
<Steps>
29+
1. Führe in der Kommandozeile deines Terminals den folgenden Befehl mit deinem bevorzugten Paketmanager aus:
30+
<PackageManagerTabs>
31+
<Fragment slot="npm">
32+
```shell
33+
# Erstelle ein neues Projekt mit npm
34+
npm create astro@latest
35+
```
36+
</Fragment>
37+
<Fragment slot="pnpm">
38+
```shell
39+
# Erstelle ein neues Projekt mit pnpm
40+
pnpm create astro@latest
41+
```
42+
</Fragment>
43+
<Fragment slot="yarn">
44+
```shell
45+
# Erstelle ein neues Projekt mit Yarn
46+
yarn create astro
47+
```
48+
</Fragment>
49+
</PackageManagerTabs>
50+
51+
2. Gib `y` ein, um `create-astro` zu installieren.
52+
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`.
53+
54+
:::note
55+
Ein neues Astro-Projekt kann nur in einem komplett leeren Ordner erstellt werden. Wähle also einen Namen, der noch nicht existiert!
56+
:::
57+
58+
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.
59+
60+
5. Wenn du gefragt wirst, ob die Abhängigkeiten installiert werden sollen, gib `y` ein.
61+
62+
6. Wenn du gefragt wirst, ob ein neues Git-Repository initialisiert werden soll, gib `y` ein.
63+
</Steps>
64+
65+
Wenn der Setup-Assistent abgeschlossen ist, benötigst du dieses Terminal nicht mehr. Du kannst nun VS Code öffnen, um weiterzumachen.
66+
67+
## Öffne dein Projekt in VS Code
68+
69+
<Steps>
70+
7. Öffne VS Code. Du wirst aufgefordert, einen Ordner zu öffnen. Wähle den Ordner, den du während des Setup-Assistenten erstellt hast.
71+
72+
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.
73+
74+
9. Stelle sicher, dass das Terminal sichtbar ist und dass du die Eingabeaufforderung siehst, z. B.:
75+
76+
```sh
77+
user@machine:~/tutorial$
78+
```
79+
80+
:::tip[Tastenkürzel]
81+
Um die Sichtbarkeit des Terminals umzuschalten, nutze <kbd>Strg + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).
82+
:::
83+
</Steps>
84+
85+
Ab jetzt kannst du anstelle des Terminals deines Computers das im VS Code integrierte Terminal für den Rest des Tutorials verwenden.
86+
87+
## Astro im Entwicklungsmodus starten
88+
89+
Um deine Projektdateien _als Website_ während der Arbeit zu sehen, muss Astro im Entwicklungsmodus laufen.
90+
91+
### Starte den Entwicklungsserver
92+
93+
<Steps>
94+
10. Starte den Astro-Entwicklungsserver, indem du im VS Code-Terminal folgenden Befehl eingibst:
95+
96+
<PackageManagerTabs>
97+
<Fragment slot="npm">
98+
```shell
99+
npm run dev
100+
```
101+
</Fragment>
102+
<Fragment slot="pnpm">
103+
```shell
104+
pnpm run dev
105+
```
106+
</Fragment>
107+
<Fragment slot="yarn">
108+
```shell
109+
yarn run dev
110+
```
111+
</Fragment>
112+
</PackageManagerTabs>
113+
114+
Jetzt solltest du im Terminal die Bestätigung sehen, dass Astro im Entwicklungsmodus läuft. 🚀
115+
</Steps>
116+
117+
## Vorschau deiner Website ansehen
118+
119+
Deine Projektdateien enthalten den gesamten Code, um eine Astro-Website darzustellen, aber der Browser zeigt deine Seiten an.
120+
121+
<Steps>
122+
11. Klicke auf den `localhost`-Link in deinem Terminal, um eine Live-Vorschau deiner neuen Astro-Website zu sehen!
123+
124+
(Astro verwendet standardmäßig `http://localhost:4321`, falls der Port `4321` verfügbar ist.)
125+
126+
So sollte die Astro-„Empty Project“-Starterseite in der Browser-Vorschau aussehen:
127+
128+
![Eine weiße leere Seite mit dem Wort Astro oben.](/tutorial/minimal.png)
129+
</Steps>
130+
131+
:::tip[Astro-Entwicklungsserver verwenden]
132+
133+
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.
134+
135+
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.
136+
137+
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`.
138+
:::
139+
140+
<Box icon="check-list">
141+
## Checkliste
142+
143+
<Checklist>
144+
- [ ] Ich kann ein neues Astro-Projekt erstellen.
145+
- [ ] Ich kann den Astro-Entwicklungsserver starten.
146+
</Checklist>
147+
</Box>
148+
149+
### Ressourcen
150+
151+
- <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>

0 commit comments

Comments
 (0)