Skip to content

Commit e2c506b

Browse files
louisescherjosefineschaeferBecause789yanthomasdevMaxframe
authored
i18n(de): tutorial (#12502)
Co-authored-by: Josefine Schaefer <[email protected]> Co-authored-by: Because789 <[email protected]> Co-authored-by: Yan <[email protected]> Co-authored-by: Max <[email protected]> Co-authored-by: Timon Jurschitsch <[email protected]> Co-authored-by: Chris Swithinbank <[email protected]> Co-authored-by: randomguy-2650 <[email protected]> Co-authored-by: Felix Schneider <[email protected]> Co-authored-by: Armand Philippot <[email protected]>
1 parent 9c6adad commit e2c506b

File tree

33 files changed

+5166
-8
lines changed

33 files changed

+5166
-8
lines changed

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
type: tutorial
33
title: Über dieses Tutorial
4-
description: Wie du mit dem Tutorial "Baue deinen ersten Astro-Blog" anfangen kannst.
4+
description: Wie du mit dem Tutorial „Erstelle deinen ersten Astro-Blog“ anfangen kannst.
55
i18nReady: true
66
---
7+
78
import Checklist from '~/components/Checklist.astro';
89
import Box from '~/components/tutorial/Box.astro';
910

10-
1111
## Was muss ich wissen, um loszulegen?
1212

1313
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
1616
Außerdem brauchst du einen [GitHub](https://github.com)-Account (oder etwas Vergleichbares), um dein Projekt im Internet zu veröffentlichen.
1717

1818
<details>
19-
<summary>Wie kann ich die Checklisten am Ende jedes Kapitels nutzen?</summary>
19+
<summary>Wie kann ich die Checklisten am Ende jeder Lektion nutzen?</summary>
2020

2121
Du hakst sie einfach ab!
2222

@@ -28,19 +28,19 @@ Du kannst auch einige Punkte der Checkliste erst mal nicht abhaken, als Erinneru
2828
</details>
2929

3030
<details>
31-
<summary>Einheit 1 behandelt Themen, die ich schon kenne. Kann ich sie überspringen?</summary>
31+
<summary>Lektion 1 behandelt Themen, die ich schon kenne. Kann ich sie überspringen?</summary>
3232

33-
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.
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 Lektion begleitet dich dabei, dein erstes Astro-Projekt zu erstellen, auf GitHub zu speichern und auf Netlify zu veröffentlichen.
3434

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 [Einheit 2](/de/tutorial/2-pages/) gehen, wo du neue Seiten für dein Projekt erstellst.
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.
3636
</details>
3737

3838
<details>
3939
<summary>Was, wenn ich Hilfe brauche oder mehr über Astro erfahren will?</summary>
4040

4141
Unser [Astro-Discord-Server](https://astro.build/chat) ist der beste Ort dafür!
4242

43-
In unserem Support-Kanal kannst du Fragen stellen, oder du kannst in `#general` oder `#off-topic` "Hallo" sagen und chatten.
43+
In unserem Support-Kanal kannst du Fragen stellen, oder du kannst in `#general` oder `#off-topic` „Hallo“ sagen und chatten.
4444
</details>
4545

4646
<details>
@@ -54,6 +54,6 @@ Dieses Tutorial ist ein Projekt unseres Docs-Teams. Du kannst uns auf Discord im
5454
## Checkliste für die nächsten Schritte
5555

5656
<Checklist>
57-
- [ ] Ich bin bereit loszulegen!
57+
- [ ] Ich bin bereit, loszulegen!
5858
</Checklist>
5959
</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+
- alle Werkzeuge zu installieren, 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="extern" /> – 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: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
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+
- den `create astro` Setup-Assistenten auszuführen, um ein neues Astro-Projekt zu erstellen
20+
- den Astro-Server im Entwicklungsmodus zu starten
21+
- dir eine Live-Vorschau deiner Website im Browser anzusehen
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+
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.
133+
134+
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.
135+
136+
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`.
137+
:::
138+
139+
<Box icon="check-list">
140+
## Checkliste
141+
142+
<Checklist>
143+
- [ ] Ich kann ein neues Astro-Projekt erstellen.
144+
- [ ] Ich kann den Astro-Entwicklungsserver starten.
145+
</Checklist>
146+
</Box>
147+
148+
### Ressourcen
149+
150+
- <p>[Erste Schritte mit Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge class="neutral-badge" text="extern" /> — ein Video-Tutorial zum Installieren, Einrichten und Arbeiten mit VS Code</p>

0 commit comments

Comments
 (0)