From 527f697417f5c08d2c91f28d5738952dee835320 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 29 Sep 2025 15:49:26 +0200 Subject: [PATCH 01/98] =?UTF-8?q?correct=20comma=20placement=20and=20quote?= =?UTF-8?q?s=20(""=20=E2=86=92=20=E2=80=9E=E2=80=9C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/docs/de/tutorial/0-introduction/1.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/docs/de/tutorial/0-introduction/1.mdx b/src/content/docs/de/tutorial/0-introduction/1.mdx index 42d9798ef63ad..2f1ee496d1729 100644 --- 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 „Baue 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. @@ -40,7 +40,7 @@ Wenn du [ein neues, leeres Astro-Projekt erstellst](/de/install-and-setup/) und 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.
@@ -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 -- [ ] Ich bin bereit loszulegen! +- [ ] Ich bin bereit, loszulegen! From b907e19ff6f6b57e05c6f257952221f9627e48fe Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 29 Sep 2025 15:50:54 +0200 Subject: [PATCH 02/98] Create index page: section 0 of 6 --- .../docs/de/tutorial/0-introduction/index.mdx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/content/docs/de/tutorial/0-introduction/index.mdx diff --git a/src/content/docs/de/tutorial/0-introduction/index.mdx b/src/content/docs/de/tutorial/0-introduction/index.mdx new file mode 100644 index 0000000000000..78d190370fb35 --- /dev/null +++ b/src/content/docs/de/tutorial/0-introduction/index.mdx @@ -0,0 +1,43 @@ +--- +type: tutorial +unitTitle: 'Willkommen, Welt!' +title: Baue deinen ersten Astro-Blog +sidebar: + label: 'Tutorial: Baue einen Blog' +description: >- + Lerne die Grundlagen von Astro mit einem projektbasierten Tutorial. Alles 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'; + + In diesem Tutorial lernst du die wichtigsten Funktionen von Astro, indem du einen vollständig funktionierenden Blog von Grund auf erstellst – bis zum Launch! 🚀 + +Unterwegs 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 + +Möchtest du einen Vorgeschmack darauf, was du bauen wirst? Du kannst das fertige Projekt auf [GitHub](https://github.com/withastro/blog-tutorial-demo) ansehen 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). + + +:::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. +::: + + + +## Checkliste + + +- [ ] Sieht super aus! Ich bin bereit, loszulegen! + + From db3fdc431175ee0e4a569fd3245439222893b776 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 29 Sep 2025 16:21:17 +0200 Subject: [PATCH 03/98] Create page 1: section 1 of 6 --- src/content/docs/de/tutorial/1-setup/1.mdx | 120 +++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 src/content/docs/de/tutorial/1-setup/1.mdx diff --git a/src/content/docs/de/tutorial/1-setup/1.mdx b/src/content/docs/de/tutorial/1-setup/1.mdx new file mode 100644 index 0000000000000..c05a019ce68a5 --- /dev/null +++ b/src/content/docs/de/tutorial/1-setup/1.mdx @@ -0,0 +1,120 @@ +--- +type: tutorial +title: Bereite deine Entwicklungsumgebung vor +description: |- + Tutorial: Baue 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" + + + - Installiere alle Werkzeuge, die du zum Erstellen deiner Astro-Website benötigst + + +## Besorge die Entwicklungswerkzeuge, die du brauchst + +### Kommandozeile + +Du wirst eine **Kommandozeile** verwenden, um dein Astro-Projekt zu erstellen und wichtige Befehle zum Bauen, Entwickeln und Testen deiner Website auszuführen. + +Du kannst über ein lokales Kommandozeilen­programm deines Betriebssystems auf die Kommandozeile zugreifen. Übliche Anwendungen sind **Terminal** (macOS/Linux), **Eingabe­aufforderung** (Windows) und **Termux** (Android). Eines davon ist wahrscheinlich bereits auf deinem Gerät installiert. + +### Node.js + +Damit Astro auf deinem System läuft, musst du außerdem eine kompatible Version von [**Node.js** (englischsprachig)](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 in der Kommandozeile 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 (englischsprachig)](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 **VS Code**, aber du kannst jeden Code-Editor für dein Betriebssystem benutzen. +::: + + +1. [Lade VS Code herunter und installiere es](https://code.visualstudio.com/#alt-downloads) oder einen anderen Code-Editor deiner Wahl. + + + + + +### Teste dein Wissen + +Welche der folgenden Optionen ist … +1. Ein Code-Editor, um Änderungen an deinen Dateien und deren Inhalten vorzunehmen? + + + + + + + +2. Ein Online-Dienst für Versionskontrolle deines Repositories? + + + + + + + +3. Eine Anwendung zum Ausführen von Befehlen? + + + + + + + + + +## Checkliste zum Weitermachen + + +- [ ] Ich kann auf die Kommandozeile im Kommandozeilen­programm zugreifen. +- [ ] Ich habe Node.js installiert. +- [ ] Ich habe einen Code-Editor wie VS Code. + + + +### Ressourcen + +-

[FreeCodeCamp.org](https://freecodecamp.org) – eine kostenlose Lernplattform mit vollständigen Kursen oder schnellen Auffrischungen zu HTML, CSS, JS und mehr.

From fe53d42fd5b9fa9bbc69c513cee6dfa478e9ea8f Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 29 Sep 2025 19:45:46 +0200 Subject: [PATCH 04/98] Create page 2: section 1 of 6 --- src/content/docs/de/tutorial/1-setup/2.mdx | 151 +++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 src/content/docs/de/tutorial/1-setup/2.mdx diff --git a/src/content/docs/de/tutorial/1-setup/2.mdx b/src/content/docs/de/tutorial/1-setup/2.mdx new file mode 100644 index 0000000000000..c2cfdba73f772 --- /dev/null +++ b/src/content/docs/de/tutorial/1-setup/2.mdx @@ -0,0 +1,151 @@ +--- +type: tutorial +title: Baue dein erstes Astro-Projekt +description: |- + Tutorial: Baue 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" + + + - Führe den `create astro` Setup-Assistenten aus, um ein neues Astro-Projekt zu bauen + - Starte den Astro-Server im Entwicklungsmodus + - Sieh dir eine Live-Vorschau deiner Website im Browser an + + +## Starte den Astro-Setup-Assistenten + +Die empfohlene Methode, um ein neues Astro-Projekt zu erstellen, ist über unseren `create astro` Setup-Assistenten. + + +1. Führe in der Kommandozeile deines Kommandozeilen­programms den folgenden Befehl mit deinem bevorzugten Paketmanager aus: + + + ```shell + # Erstelle ein neues Projekt mit npm + npm create astro@latest + ``` + + + ```shell + # Erstelle ein neues Projekt mit pnpm + pnpm create astro@latest + ``` + + + ```shell + # Erstelle ein neues Projekt mit Yarn + yarn create astro + ``` + + + +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, indem 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 Return (Enter), 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, obein neues Git-Repository initialisiert werden soll, gib `y` ein. + + +Wenn der Setup-Assistent abgeschlossen ist, benötigst du dieses Kommandozeilen­programm nicht mehr. Du kannst nun VS Code öffnen, um weiterzumachen. + +## Öffne dein Projekt in VS Code + + +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 Kommandozeilen­programm sichtbar ist und dass du die Eingabeaufforderung siehst, z. B.: + + ```sh + user@machine:~/tutorial$ + ``` + + :::tip[Tastenkürzel] + Um die Sichtbarkeit des Kommandozeilen­programms umzuschalten, nutze Ctrl + J (macOS: Cmd ⌘ + J). + ::: + + +Ab jetzt kannst du das im VS Code integrierte Kommandozeilen­programm für den Rest des Tutorials verwenden, anstatt das Kommandozeilenprogramm deines Computers. + +## Astro im Entwicklungsmodus starten + +Um deine Projektdateien _als Website_ während der Arbeit zu sehen, muss Astro im Entwicklungsmodus laufen. + +### Starte den Entwicklungsserver + + +10. Starte den Astro-Entwicklungsserver, indem du im VS Code-Kommandozeilen­programm folgenden Befehl eingibst: + + + + ```shell + npm run dev + ``` + + + ```shell + pnpm run dev + ``` + + + ```shell + yarn run dev + ``` + + + + Jetzt solltest du in dem Kommandozeilenprogramm die Bestätigung sehen, dass Astro im Entwicklungsmodus läuft. 🚀 + + +## Vorschau deiner Website ansehen + +Deine Projektdateien enthalten den gesamten Code, um eine Astro-Website darzustellen, aber der Browser zeigt deine Seiten an. + + +11. Klicke auf den `localhost`-Link in deinem Kommandozeilen­programm, 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) + + +:::tip[Astro-Entwicklungsserver verwenden] + +Solange der Astro-Server im Entwicklungsmodus läuft, kannst du keine Befehle im Kommandozeilen­programm 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 Ctrl + C (macOS: Control + C) im Terminal eingibst. + +Manchmal stoppt der Entwicklungsserver während der Arbeit automatisch. Wenn deine Live-Vorschau nicht mehr funktioniert, gehe zurück ins Kommandozeilen­programm und starte den Entwicklungsserver erneut mit `npm run dev`. +::: + + +## Checkliste + + +- [ ] I kann ein neues Astro-Projekt erstellen. +- [ ] Ich kann den Astro-Entwicklungsserver starten. + + + +### Ressourcen + +-

[Erste Schritte mit Visual Studio Code (englischsprachig)](https://code.visualstudio.com/docs/introvideos/basics) — ein Video-Tutorial zum Installieren, Einrichten und Arbeiten mit VS Code

From 4f1ba0cfeb5dae9a271d75050bea780cd1798553 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sat, 4 Oct 2025 18:25:02 +0200 Subject: [PATCH 05/98] Create page 3: section 1 of 6 --- src/content/docs/de/tutorial/1-setup/3.mdx | 71 ++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 src/content/docs/de/tutorial/1-setup/3.mdx diff --git a/src/content/docs/de/tutorial/1-setup/3.mdx b/src/content/docs/de/tutorial/1-setup/3.mdx new file mode 100644 index 0000000000000..c25b9fab314a7 --- /dev/null +++ b/src/content/docs/de/tutorial/1-setup/3.mdx @@ -0,0 +1,71 @@ +--- +type: tutorial +title: Schreibe deine erste Zeile Astro +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog — + Nimm deine ersten Änderungen an der Startseite deines Tutorial-Projekts vor +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'; + + + - Nimm deine erste Änderung an deiner neuen Website vor + + +## Bearbeite deine Startseite + + +1. Navigiere in deinem Code-Editor im Datei-Explorer zu `src/pages/index.astro` und klicke darauf, um den Inhalt der Datei in einem bearbeitbaren Tab zu öffnen. + + Der Inhalt deiner Datei `index.astro` sollte so aussehen: + + ```astro title="src/pages/index.astro" + --- + --- + + + + + + + + Astro + + +

Astro

+ + + ``` + +2. Bearbeite den Inhalt deines ``-Elements. + + Tippe im Editor, um die Überschrift auf deiner Seite zu ändern, und speichere die Änderung. + + ```astro title="src/pages/index.astro" del={2} ins={3} + +

Astro

+

Meine Astro-Website

+ + ``` + +3. Überprüfe die Browser-Vorschau – du solltest sehen, dass sich der Seiteninhalt auf den neuen Text aktualisiert hat. + + +Herzlichen Glückwunsch! Du bist jetzt Astro-Entwickler! 🎉 + +Der Rest dieser Lektion hilft dir, Versionskontrolle einzurichten und eine veröffentlichte Website zu erstellen, die du zeigen kannst. + + +## Checkliste + + +- [ ] Ich kann Änderungen vornehmen und sie im Browser sehen. +- [ ] Ich bin Astro-Entwickler! + + From e464c10f574ff33add66d17099f816dfe2f0b99e Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sat, 4 Oct 2025 18:29:13 +0200 Subject: [PATCH 06/98] Create page 4: section 1 of 6 --- src/content/docs/de/tutorial/1-setup/4.mdx | 73 ++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 src/content/docs/de/tutorial/1-setup/4.mdx diff --git a/src/content/docs/de/tutorial/1-setup/4.mdx b/src/content/docs/de/tutorial/1-setup/4.mdx new file mode 100644 index 0000000000000..8f228c8795aa3 --- /dev/null +++ b/src/content/docs/de/tutorial/1-setup/4.mdx @@ -0,0 +1,73 @@ +--- +type: tutorial +title: Lege dein Repository online ab +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog — + Erstelle ein GitHub-Repository für dein Tutorial-Projekt +i18nReady: true +--- +import Checklist from '~/components/Checklist.astro'; +import Box from '~/components/tutorial/Box.astro'; +import PreCheck from '~/components/tutorial/PreCheck.astro'; +import { Steps } from '@astrojs/starlight/components'; +import Badge from "~/components/Badge.astro" + + + - Lade dein Projekt-Repository online hoch + + +In diesem Tutorial verwenden wir GitHub, um unser Repository zu speichern und mit einem Hosting-Anbieter zu verbinden. Du kannst aber auch einen anderen Online-Git-Anbieter deiner Wahl verwenden. + +:::note +Wenn du bereits mit Git vertraut bist und deinen eigenen Arbeitsablauf hast, kannst du ein neues GitHub-Repository für dein Projekt auf deine bevorzugte Weise erstellen. Überspringe dann diese Seite und fahre fort mit: [„Veröffentliche deine Website im Internet“](/de/tutorial/1-setup/5/). +::: + +## Erstelle ein Repository auf GitHub + +Es gibt verschiedene Möglichkeiten, deinen lokalen Code auf GitHub zu speichern. Dieses Tutorial zeigt dir eine Methode, die keine Verwendung der Kommandozeile erfordert. + + +1. Melde dich in einem Browser bei GitHub.com an und klicke oben rechts auf das +, um ein neues Repository zu erstellen. + +2. Wähle einen Namen für dein Repository. Dieser muss nicht mit dem Namen deines Projektordners übereinstimmen. + +3. Dir werden einige Optionen angezeigt, aber du musst keine davon ändern. Scrolle nach unten und klicke auf die Schaltfläche Create Repository. + +4. Es werden verschiedene nächste Schritte angezeigt, aber du musst keinen davon ausführen. Notiere dir die URL deines Repositories. Du kannst diese Seite jetzt schließen. + + +## Übertrage deinen lokalen Code zu GitHub + +Im letzten Abschnitt hast du den Inhalt deiner Seite geändert. Das bedeutet, dass sich deine Projektdateien verändert haben, und VS Code sollte eine Zahl über dem Symbol des Menüs „Source“ anzeigen. Diese Quellcode-Ansicht ist der Ort, an dem du künftig regelmäßig deine Dateien auf GitHub aktualisierst. + + +1. Klicke in VS Code auf die Registerkarte „Source Control“, um eine Liste der geänderten Dateien zu sehen. Wenn du eine Meldung siehst, dass du `git` installieren musst, folge den Anweisungen und starte VS Code anschließend neu. + +2. Klicke im Menü oberhalb der Commit-Nachricht auf das •••-Menü („3 Punkte“) und wähle Remote > Add Remote. + +3. Wähle Add remote from GitHub. Führe bei Bedarf die Authentifizierungsschritte durch und wiederhole anschließend diese Aktion in VS Code. + +4. Du solltest nun eine Liste deiner Repositories auf GitHub sehen. Wähle das Repository aus, das du für dieses Projekt erstellt hast. Wenn du dein Projekt nicht siehst, füge die GitHub-URL manuell ein. Möglicherweise wirst du gebeten, diesem Repository einen lokalen Namen zu geben. Du kannst einen beliebigen Namen wählen. + +5. Im oberen Bereich des Menüs befindet sich ein Feld für eine **Commit-Nachricht** (Beschreibung deiner Dateiänderungen). Gib `initial commit` ein und klicke auf die Schaltfläche Commit, um diese Änderungen zu committen. + +6. Möglicherweise erscheint eine Meldung, dass du keine „staged“ Commits hast, und du wirst gefragt, ob du sie „stagen“ möchtest. Klicke auf Always und fahre fort. + +7. Zum Schluss sollte die Liste der geänderten Dateien durch eine Schaltfläche Publish ersetzt werden. Klicke darauf, um deine Commits zu GitHub hochzuladen. + + +### Sieh dir dein Projekt auf GitHub an + +Um zu überprüfen, ob dein Projekt erfolgreich auf GitHub gespeichert wurde, gehe auf GitHub.com und öffne unter deinem Konto die Liste deiner Repositories. Wähle das neue Repository aus, das du erstellt hast, und prüfe, ob es deine Astro-Projektdateien enthält. + + +## Checkliste + + +- [ ] Ich habe mein Projekt auf GitHub gespeichert. + + + +### Ressourcen + +-

[Git-Quellcodeverwaltung in VS Code verwenden](https://code.visualstudio.com/docs/sourcecontrol/overview#_git-support)

From 557e990b08ab2a99d9b10ab586304ec9ed51e397 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sat, 4 Oct 2025 18:33:03 +0200 Subject: [PATCH 07/98] Create page 5: section 1 of 6 --- src/content/docs/de/tutorial/1-setup/5.mdx | 83 ++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 src/content/docs/de/tutorial/1-setup/5.mdx diff --git a/src/content/docs/de/tutorial/1-setup/5.mdx b/src/content/docs/de/tutorial/1-setup/5.mdx new file mode 100644 index 0000000000000..86846919a2545 --- /dev/null +++ b/src/content/docs/de/tutorial/1-setup/5.mdx @@ -0,0 +1,83 @@ +--- +type: tutorial +title: Veröffentliche deine Website im Internet +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog — + Verbinde das GitHub-Repository deines Tutorial-Projekts mit Netlify und veröffentliche deine Website im Internet +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" + + + - Füge dein GitHub-Repository als neue Netlify-App hinzu + - Veröffentliche deine Astro-Website im Internet + + +Hier wirst du dein GitHub-Repository mit Netlify verbinden. Netlify verwendet dieses Projekt, um deine Website jedes Mal automatisch zu erzeugen und zu veröffentlichen, wenn du eine Änderung an deinem Code commitest. + +:::tip[Wir verwenden …] +In diesem Tutorial verwenden wir **Netlify**, aber du kannst auch deinen bevorzugten Hosting-Anbieter verwenden, um deine Website im Internet zu veröffentlichen. +::: + +## Erstelle eine neue Netlify-Website + + +1. Erstelle ein kostenloses Konto bei [Netlify](https://netlify.com), falls du noch keines hast. + + Notiere dir deinen Benutzernamen. Du kannst dein Dashboard und alle erstellten Websites unter `https://app.netlify.com/teams/username` (englischsprachig) ansehen. + +2. Klicke auf Add new site > Import an existing project. + + Du wirst aufgefordert, dich mit einem Git-Anbieter zu verbinden. Wähle GitHub und folge den angezeigten Schritten, um dein GitHub-Konto zu authentifizieren. Wähle anschließend das GitHub-Repository deines Astro-Projekts aus der angezeigten Liste aus. + +3. Im letzten Schritt zeigt dir Netlify die Seiteneinstellungen deiner App. Die Standardwerte sollten für dein Astro-Projekt korrekt sein. Scrolle nach unten und klicke auf Deploy site. + + +Herzlichen Glückwunsch – du hast jetzt eine Astro-Website! + +## Ändere deinen Projektnamen + +Auf der Übersichtsseite deiner Website in Netlify siehst du den automatisch generierten Projektnamen sowie deine Website-URL im Format `https://projektname-123456.netlify.app`. Du kannst den Projektnamen in etwas Einprägsameres ändern; die URL wird automatisch angepasst. + +## Besuche deine neue Website + +Klicke in den Website-Einstellungen auf die URL oder gib sie in die Adresszeile deines Browsers ein, um deine neue Website zu besuchen. + + + +### Teste dein Wissen + +Du möchtest die Startseite deiner bestehenden Website aktualisieren. Welche Schritte führst du aus? + + + + + + + + + +## Checkliste + + +- [ ] Ich kann meine aktualisierte Website online ansehen. +- [ ] Ich bin bereit, weiter zu coden! + + + +### Ressourcen + +-

[Eine Schritt-für-Schritt-Anleitung zum Veröffentlichen auf Netlify](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/)

From 40c8f8ce82c90eb8e0380c31e43dbc776e8416ef Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sat, 4 Oct 2025 18:38:21 +0200 Subject: [PATCH 08/98] Create index page: section 1 of 6 --- .../docs/de/tutorial/1-setup/index.mdx | 119 ++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 src/content/docs/de/tutorial/1-setup/index.mdx diff --git a/src/content/docs/de/tutorial/1-setup/index.mdx b/src/content/docs/de/tutorial/1-setup/index.mdx new file mode 100644 index 0000000000000..41ff88b2ea867 --- /dev/null +++ b/src/content/docs/de/tutorial/1-setup/index.mdx @@ -0,0 +1,119 @@ +--- +type: tutorial +unitTitle: Erstelle und deploye deine erste Astro-Website +title: 'Überprüfung: Einheit 1 – Einrichtung' +description: >- + Tutorial: Baue deinen ersten Astro-Blog — + Richte deine Entwicklungsumgebung ein und erstelle und deploye deine erste Astro-Website +i18nReady: true +head: + - tag: title + content: 'Blog-Tutorial: Einheit 1 – Einrichtung | Doku' +--- + +import Checklist from '~/components/Checklist.astro'; +import Box from '~/components/tutorial/Box.astro'; +import { Steps } from '@astrojs/starlight/components'; + +Jetzt, da du weißt, was du bauen wirst, ist es an der Zeit, alle benötigten Tools einzurichten! + +In dieser Einheit lernst du, wie du deine Entwicklungsumgebung einrichtest und zu Netlify deployst. Überspringe diese Einheit und fahre mit [Einheit 2](/de/tutorial/2-pages/) fort, wenn du dich mit deiner Umgebung und deinem Workflow bereits wohlfühlst. + +:::tip[Mache das Tutorial in einem Online-Code-Editor] + +Möchtest du dieses Tutorial lieber in einem Online-Code-Editor absolvieren? Befolge die folgenden Anweisungen, um mit Google IDX zu starten. + +
+Mit Google IDX: Befolge diese Schritte und gehe dann direkt zu Einheit 2! + +**IDX einrichten** + + +1. Folge dem externen Link, um [die „Empty Project“-Vorlage in einem neuen Workspace auf IDX zu öffnen](https://astro.new/minimal?on=idx). + +2. Folge der Aufforderung, dich in dein Google-Konto einzuloggen, falls du noch nicht angemeldet bist. + +3. Gib deinem Projekt einen Namen, wenn du es anders als „Empty Project“ nennen möchtest. Klicke **Create**. + +4. Warte, bis der Workspace erstellt wurde. Das kann 30–60 Sekunden dauern. Wenn alles klappt, siehst du dein Astro-Projekt in einem Online-Code-Editor geladen. + +5. Warte, bis IDX zwei Skripte ausführt: eines zur Installation von Astro und eines zum Starten des Entwicklungsservers. Es kann kurzzeitig die Meldung erscheinen, dass dein Workspace „Astro nicht finden konnte“. Diese Meldung kann ignoriert oder geschlossen werden, falls sie sich nicht von selbst schließt. + + +**Änderung vornehmen** + +Wenn alles funktioniert hat, solltest du den Code der Datei `src/pages/index.astro` geöffnet sehen, in geteilter Ansicht mit einer Live-Vorschau der Website. Folge der Anleitung unter [„Schreibe deine erste Zeile Astro“](/de/tutorial/1-setup/3/), um diese Datei zu ändern. + +**GitHub-Repository erstellen** + + +1. Öffne den Navigationspunkt „Source Control“ in der vertikalen Menüleiste oder mit Strg + Umschalttaste + G. + +2. Wähle die Option, das Projekt auf GitHub zu veröffentlichen. Dadurch wird ein neues Repository in deinem GitHub-Konto erstellt. +3. Folge den Anweisungen, um dich bei deinem GitHub-Konto anzumelden. +4. Nach der Anmeldung kannst du in IDX den Namen deines neuen Repositories wählen und festlegen, ob es privat oder öffentlich sein soll. Für dieses Tutorial kannst du beides wählen. +5. IDX führt einen ersten Commit aus und veröffentlicht das Projekt in deinem neuen GitHub-Repository. +6. Wenn du zukünftig Änderungen hast, die zurück an GitHub übertragen werden sollen, zeigt das Symbol für „Source Control“ eine Zahl an – die Anzahl der Dateien, die sich seit dem letzten Commit geändert haben. Öffne diesen Tab, führe die beiden Schritte „Commit“ und „Publish“ aus, gib eine Commit-Nachricht ein und aktualisiere dein Repository. + + +**Website deployen** + +Wenn du zu Netlify deployen möchtest, um eine live veröffentlichte Version deiner Website zu haben, fahre in Einheit 1 mit [Deine Website ins Web deployen](/de/tutorial/1-setup/5/) fort. + +Andernfalls überspringe diese Einheit und beginne mit [Einheit 2](/de/tutorial/2-pages/), um mit Astro zu bauen! + +
+ +{/* StackBlitz instructions +
+Mit StackBlitz: Befolge diese Schritte und gehe dann direkt zu Einheit 2! + +**StackBlitz einrichten** + + +1. Folge dem externen Link, um [die „Empty Project“-Vorlage auf StackBlitz zu öffnen](https://astro.new/minimal?on=stackblitz). + +2. Klicke oben rechts auf „Sign in“, um dich mit deinen GitHub-Zugangsdaten anzumelden. + +3. Klicke oben links im StackBlitz-Editor auf „fork“, um die Vorlage in deinem eigenen Konto zu speichern. + +4. Warte, bis das Projekt geladen ist. Du solltest eine Live-Vorschau des „Empty Project“-Starters sehen. + + +**Änderung vornehmen** + +Im Datei-Bereich solltest du `src/pages/index.astro` sehen. Klicke darauf und folge [„Schreibe deine erste Zeile Astro“](/de/tutorial/1-setup/3/), um diese Datei zu ändern. + +**GitHub-Repository erstellen** + + +1. Klicke oben in der Dateiliste auf Connect Repository, gib einen neuen Namen für dein Repository ein und klicke auf Create repo & push. + +2. Wenn du Änderungen hast, die du zurück an GitHub übertragen möchtest, erscheint oben links ein „Commit“-Button. Klicke darauf, gib eine Commit-Nachricht ein und aktualisiere dein Repository. + + +**Website deployen** + +Wenn du zu Netlify deployen möchtest, um eine live veröffentlichte Version deiner Website zu haben, fahre in Einheit 1 mit [Deine Website ins Web deployen](/de/tutorial/1-setup/5/) fort. + +Andernfalls überspringe diese Einheit und beginne mit [Einheit 2](/de/tutorial/2-pages/), um mit Astro zu bauen! + +
+*/} +::: + +## Wohin geht die Reise? + +In dieser Einheit wirst du **ein neues Projekt erstellen**, das **online in GitHub gespeichert** und **mit Netlify verbunden** ist. + +Während du Code schreibst, wirst du regelmäßig deine Änderungen nach GitHub committen. Netlify verwendet die Dateien aus deinem GitHub-Repository, um deine Website zu bauen und sie anschließend im Internet unter einer eindeutigen Adresse zu veröffentlichen, die jeder aufrufen kann. + +Jedes Mal, wenn du eine Änderung nach GitHub committest, sendet GitHub eine Benachrichtigung an Netlify. Dann wird Netlify automatisch deine Live-Website neu bauen und erneut veröffentlichen, um diese Änderungen zu übernehmen. + + +## Checkliste + + +- [ ] Ich bin bereit, eine Entwicklungsumgebung für ein Astro-Projekt einzurichten! + + From fdd6c463370cc2a46b127bca9b2a23b9815feb0b Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sat, 4 Oct 2025 18:41:31 +0200 Subject: [PATCH 09/98] Create index page: section 2 of 6 --- .../docs/de/tutorial/2-pages/index.mdx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/content/docs/de/tutorial/2-pages/index.mdx diff --git a/src/content/docs/de/tutorial/2-pages/index.mdx b/src/content/docs/de/tutorial/2-pages/index.mdx new file mode 100644 index 0000000000000..d1bc663e342f3 --- /dev/null +++ b/src/content/docs/de/tutorial/2-pages/index.mdx @@ -0,0 +1,36 @@ +--- +type: tutorial +unitTitle: 'Seiten auf deiner Website hinzufügen, gestalten und verlinken' +title: 'Überprüfung: Einheit 2 – Seiten' +description: |- + Tutorial: Baue deinen ersten Astro-Blog — + Erstelle, gestalte und verlinke Seiten und Beiträge auf deiner Website +i18nReady: true +head: + - tag: title + content: 'Blog-Tutorial: Einheit 2 – Seiten | Doku' +--- + +import Checklist from '~/components/Checklist.astro'; +import Box from '~/components/tutorial/Box.astro'; + +Jetzt, da du eine funktionierende Website im Web hast, ist es an der Zeit, Seiten und Beiträge hinzuzufügen! + +## Ein Blick nach vorn + +In dieser Einheit wirst du: + +- deine ersten Astro-Seiten mit der `.astro`-Syntax erstellen +- Blogbeiträge mit Markdown-Dateien (`.md`) hinzufügen +- eine einzelne Seite mit ``-Tags kannst du Elemente auf deiner Seite gestalten. Wenn du diesen Tags **Attribute** und **Direktiven** hinzufügst, erhältst du noch mehr Möglichkeiten, das Styling zu steuern. + + +1. Kopiere den folgenden Code und füge ihn in `src/pages/about.astro` ein: + + ```astro title="src/pages/about.astro" ins={6-11} + + + + + {pageTitle} + + + ``` + + Überprüfe alle drei Seiten in der Browservorschau. + + - Welche Farbe hat der Seitentitel auf: + + - Deiner Startseite? schwarz + - Deiner About-Seite? lila + - Deiner Blog-Seite? schwarz + + - Die Seite mit der größten Überschrift ist? deine About-Seite + + :::tip + Wenn du Farben nicht visuell unterscheiden kannst, kannst du die Entwicklertools deines Browsers verwenden, um die `

`-Titel-Elemente zu inspizieren und die angewandte Textfarbe zu überprüfen. + ::: + +2. Füge den Klassennamen `skill` zu den generierten `
  • `-Elementen auf deiner About-Seite hinzu, damit du sie gestalten kannst. Dein Code sollte nun so aussehen: + + ```astro title="src/pages/about.astro" 'class="skill"' +

    Meine Fähigkeiten sind:

    +
      + {skills.map((skill) =>
    • {skill}
      • )} +
    + ``` + +3. Füge den folgenden Code zu deinem bestehenden Style-Tag hinzu: + + ```astro title="src/pages/about.astro" ins={6-9} + + ``` + +4. Öffne erneut deine About-Seite im Browser und überprüfe, ob jedes Element in deiner Liste von Fähigkeiten nun grün und fett dargestellt wird – entweder visuell oder mit den Entwicklertools. + + +## Deine erste CSS-Variable verwenden + +Das Astro-` + ``` + +3. Überprüfe deine About-Seite in der Browservorschau. Du solltest sehen, dass die Fähigkeiten nun karminrot (crimson) sind – entsprechend der `skillColor`-Variable, die an die Direktive `define:vars` übergeben wurde. + + + + +## Probiere es selbst – CSS-Variablen definieren + + + 1. Aktualisiere das ` + ``` + + 2. Füge in deinem Frontmatter-Skript alle fehlenden Variablen hinzu, damit dein neues ``-Tags kannst du Elemente auf deiner Seite ge - Deiner About-Seite? lila - Deiner Blog-Seite? schwarz - - Die Seite mit der größten Überschrift ist? deine About-Seite + - Die Seite mit der größten Überschrift ist? deine „Über mich“-Seite :::tip Wenn du Farben nicht visuell unterscheiden kannst, kannst du die Entwicklertools deines Browsers verwenden, um die `

    `-Titel-Elemente zu inspizieren und die angewandte Textfarbe zu überprüfen. @@ -79,7 +79,7 @@ Mit Astros eigenen ``-Tags kannst du Elemente auf deiner Seite ge ``` -4. Öffne erneut deine About-Seite im Browser und überprüfe, ob jedes Element in deiner Liste von Fähigkeiten nun grün und fett dargestellt wird – entweder visuell oder mit den Entwicklertools. +4. Öffne erneut deine „Über mich“-Seite im Browser und überprüfe, ob jedes Element in deiner Liste von Fähigkeiten nun grün und fett dargestellt wird – entweder visuell oder mit den Entwicklertools. ## Deine erste CSS-Variable verwenden @@ -126,7 +126,7 @@ Das Astro-` ``` -3. Überprüfe deine About-Seite in der Browservorschau. Du solltest sehen, dass die Fähigkeiten nun karminrot (crimson) sind – entsprechend der `skillColor`-Variable, die an die Direktive `define:vars` übergeben wurde. +3. Überprüfe deine „Über mich“-Seite in der Browservorschau. Du solltest sehen, dass die Fähigkeiten nun karminrot (crimson) sind – entsprechend der `skillColor`-Variable, die an die Direktive `define:vars` übergeben wurde. From 32e10b0235661f60055f745d774b53357ca50971 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sat, 4 Oct 2025 19:42:23 +0200 Subject: [PATCH 33/98] Fix noun capitalisation in page 5: section 2 of 6 --- src/content/docs/de/tutorial/2-pages/5.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/tutorial/2-pages/5.mdx b/src/content/docs/de/tutorial/2-pages/5.mdx index 63bafe7f7d48d..d8a0737d90460 100644 --- a/src/content/docs/de/tutorial/2-pages/5.mdx +++ b/src/content/docs/de/tutorial/2-pages/5.mdx @@ -1,6 +1,6 @@ --- type: tutorial -title: Füge styles für die gesamte Website hinzu +title: Füge Styles für die gesamte Website hinzu description: |- Tutorial: Erstelle deinen ersten Astro-Blog – Erstelle ein globales Stylesheet für siteweite Styles From 4e11665531fb72d9805e63d887b0ea7f5da81cc3 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sat, 4 Oct 2025 20:32:23 +0200 Subject: [PATCH 34/98] Fix slug name in page 5: section 2 of 6 --- src/content/docs/de/tutorial/2-pages/5.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/tutorial/2-pages/5.mdx b/src/content/docs/de/tutorial/2-pages/5.mdx index d8a0737d90460..3b8ea6b84ceff 100644 --- a/src/content/docs/de/tutorial/2-pages/5.mdx +++ b/src/content/docs/de/tutorial/2-pages/5.mdx @@ -148,6 +148,6 @@ Deine About-Seite wird nun *sowohl* durch die importierte Datei `global.css` *al - [Astro Syntax vs JSX – Vergleich](/de/reference/astro-syntax/#unterschiede-zwischen-astro-und-jsx) -- [Astro ``-Tags kannst du Elemente auf deiner Seite ge - Welche Farbe hat der Seitentitel auf: - - Deiner Startseite? schwarz + - Deiner Startseite? schwarz - Deiner About-Seite? lila - Deiner Blog-Seite? schwarz From d5ad8648e977be2efe509e49ac253a4460579840 Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sun, 5 Oct 2025 11:09:56 +0200 Subject: [PATCH 50/98] Improve wording in page 5: section 2 of 6 --- src/content/docs/de/tutorial/2-pages/5.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/tutorial/2-pages/5.mdx b/src/content/docs/de/tutorial/2-pages/5.mdx index 3b8ea6b84ceff..d4f5ef9d46b4d 100644 --- a/src/content/docs/de/tutorial/2-pages/5.mdx +++ b/src/content/docs/de/tutorial/2-pages/5.mdx @@ -103,7 +103,7 @@ import '../styles/global.css';

    • -Nimm beliebige Änderungen oder Ergänzungen am Inhalt deiner About-Seite vor, indem du HTML-Elemente in das Seitentemplate einfügst – statisch oder dynamisch. Schreibe zusätzlichen JavaScript-Code in dein Frontmatter-Skript, um Werte für dein HTML bereitzustellen. Wenn die Seite fertig ist, committe deine Änderungen zu GitHub, bevor du mit der nächsten Lektion fortfährst. +Nimm beliebige Änderungen oder Ergänzungen am Inhalt deiner About-Seite vor, indem du HTML-Elemente in das Seitentemplate einfügst – statisch oder dynamisch. Schreibe zusätzlichen JavaScript-Code in dein Frontmatter-Skript, um Werte für dein HTML bereitzustellen. Wenn die Seite fertig ist, committe deine Änderungen und lade sie auf GitHub hoch, bevor du mit der nächsten Lektion fortfährst. ### Analysiere das Muster From 8ebf893e5a22c8f6935dec34df655212b8a77d3b Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sun, 5 Oct 2025 11:39:46 +0200 Subject: [PATCH 51/98] =?UTF-8?q?Fix=20non=E2=80=90sense=20wording=20in=20?= =?UTF-8?q?index=20page:=20section=201=20of=206?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com> --- src/content/docs/de/tutorial/1-setup/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/tutorial/1-setup/index.mdx b/src/content/docs/de/tutorial/1-setup/index.mdx index 9834d965b7ca7..52776a7c305f3 100644 --- a/src/content/docs/de/tutorial/1-setup/index.mdx +++ b/src/content/docs/de/tutorial/1-setup/index.mdx @@ -1,7 +1,7 @@ --- type: tutorial unitTitle: Erstelle und veröffentliche deine erste Astro-Website -title: 'Überprüfung: Einheit 1 – Einrichtung' +title: 'Lege los: Einheit 1 – Einrichtung' description: >- Tutorial: Erstelle deinen ersten Astro-Blog — Richte deine Entwicklungsumgebung ein und erstelle und veröffentliche deine erste Astro-Website From 6ea93ba14168624303c826eb3492b27c37c9b34b Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Sun, 5 Oct 2025 11:40:21 +0200 Subject: [PATCH 52/98] =?UTF-8?q?Fix=20non=E2=80=90sense=20wording=20in=20?= =?UTF-8?q?index=20page:=20section=202=20of=206?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com> --- src/content/docs/de/tutorial/2-pages/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/de/tutorial/2-pages/index.mdx b/src/content/docs/de/tutorial/2-pages/index.mdx index c8b9f117dc035..4a96e3e182f68 100644 --- a/src/content/docs/de/tutorial/2-pages/index.mdx +++ b/src/content/docs/de/tutorial/2-pages/index.mdx @@ -1,7 +1,7 @@ --- type: tutorial unitTitle: 'Seiten auf deiner Website hinzufügen, gestalten und verlinken' -title: 'Überprüfung: Einheit 2 – Seiten' +title: 'Lege los: Einheit 2 – Seiten' description: |- Tutorial: Erstelle deinen ersten Astro-Blog — Erstelle, gestalte und verlinke Seiten und Beiträge auf deiner Website From 273c1c898cce51cca7369ad5162a8bc1c23a369b Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 6 Oct 2025 07:23:44 +0200 Subject: [PATCH 53/98] Create index page: section 6 of 6 --- .../docs/de/tutorial/6-islands/index.mdx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/content/docs/de/tutorial/6-islands/index.mdx diff --git a/src/content/docs/de/tutorial/6-islands/index.mdx b/src/content/docs/de/tutorial/6-islands/index.mdx new file mode 100644 index 0000000000000..871ae4769c149 --- /dev/null +++ b/src/content/docs/de/tutorial/6-islands/index.mdx @@ -0,0 +1,38 @@ +--- +type: tutorial +unitTitle: Stich in See zu den Astro-Islands +title: 'Lege los: Einheit 6 – Astro-Islands' +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog — + Verwende Astro-Islands, um Komponenten von Frontend-Frameworks zu deiner Astro-Website hinzuzufügen. +i18nReady: true +head: + - tag: title + content: 'Blog-Tutorial: Einheit 6 – Astro-Islands | Doku' +--- + +import Box from '~/components/tutorial/Box.astro'; +import Checklist from '~/components/Checklist.astro'; +import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; +import Option from '~/components/tutorial/Option.astro'; + +Jetzt, da du einen vollständig funktionsfähigen Blog hast, ist es an der Zeit, deiner Website einige interaktive Islands hinzuzufügen! + +## Ein Blick nach vorn + +In dieser Lektion verwendest du **Astro-Islands (Insel(n))**, um Komponenten von Frontend-Frameworks zu deiner Astro-Website hinzuzufügen. + +Du wirst: + +- Ein UI-Framework, **Preact**, zu deinem Astro-Projekt hinzufügen +- Mit Preact eine interaktive Begrüßungskomponente erstellen +- Lernen, wann du dich _nicht_ für Islands zur Interaktivität entscheiden würdest + + + +## Checkliste + + +- [ ] Ich bin bereit, meiner Website etwas Interaktivität zu verleihen – und das „Island“-Leben zu beginnen! + + From f6d002d6ca407dcee3b6172f0c30d6360dcdc10b Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 6 Oct 2025 13:40:18 +0200 Subject: [PATCH 54/98] Create page 1: section 6 of 6 --- src/content/docs/de/tutorial/6-islands/1.mdx | 228 +++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 src/content/docs/de/tutorial/6-islands/1.mdx diff --git a/src/content/docs/de/tutorial/6-islands/1.mdx b/src/content/docs/de/tutorial/6-islands/1.mdx new file mode 100644 index 0000000000000..ac3864b62f11e --- /dev/null +++ b/src/content/docs/de/tutorial/6-islands/1.mdx @@ -0,0 +1,228 @@ +--- +type: tutorial +title: Erstelle deine erste Astro-Island +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog — + Verwende eine Preact-Komponente, um deine Besucher:innen mit einer zufällig ausgewählten Begrüßung zu empfangen +i18nReady: true +--- + +import Box from '~/components/tutorial/Box.astro'; +import Checklist from '~/components/Checklist.astro'; +import Spoiler from '~/components/Spoiler.astro'; +import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; +import Option from '~/components/tutorial/Option.astro'; +import PreCheck from '~/components/tutorial/PreCheck.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; + + Verwende eine Preact-Komponente, um deine Besuchende mit einer zufällig ausgewählten Willkommensnachricht zu begrüßen! + + + - Füge Preact zu deinem Astro-Projekt hinzu + - Binde Astro-Islands (Preact-`.jsx`-Komponenten) auf deiner Startseite ein + - Verwende `client:`-Direktiven, um Islands interaktiv zu machen + + +## Füge Preact zu deinem Astro-Projekt hinzu + + +1. Falls dein Entwicklungsserver läuft, beende ihn, um auf das Kommandozeilen­programm zugreifen zu können (Strg + C/Control + C). + +2. Aktiviere die Unterstützung für Preact-Komponenten in deinem Astro-Projekt mit einem einzigen Befehl: + + + + ```sh + npx astro add preact + ``` + + + ```sh + pnpm astro add preact + ``` + + + ```sh + yarn astro add preact + ``` + + + +3. Folge den Anweisungen in der Konsole, um das Hinzufügen von Preact zu deinem Projekt zu bestätigen. + + +## Füge ein Preact-Begrüßungsbanner hinzu + +Diese Komponente nimmt ein Array mit Begrüßungen als Prop entgegen und wählt zufällig eine davon als Willkommensnachricht aus. Nutzende können auf eine Schaltfläche klicken, um eine neue zufällige Nachricht zu erhalten. + + +1. Erstelle im Verzeichnis `src/components/` eine neue Datei mit dem Namen `Greeting.jsx`. + + Beachte die Dateiendung `.jsx`. Diese Datei wird in Preact und nicht in Astro geschrieben. + +2. Füge folgenden Code in `Greeting.jsx` ein: + + ```jsx title="src/components/Greeting.jsx" + import { useState } from 'preact/hooks'; + + export default function Greeting({messages}) { + + const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))]; + + const [greeting, setGreeting] = useState(messages[0]); + + return ( +
    +

    {greeting}! Danke für deinen Besuch!

    + +
    + ); + } + ``` + +3. Importiere und verwende diese Komponente auf deiner Startseite `index.astro`. + + ```astro title="src/pages/index.astro" ins={3,8} + --- + import BaseLayout from '../layouts/BaseLayout.astro'; + import Greeting from '../components/Greeting'; + const pageTitle = "Startseite"; + --- + +

    Mein großartiger Blog-Untertitel

    + + +     + ``` + + Sieh dir die Vorschau in deinem Browser an: Du solltest eine zufällige Begrüßung sehen – aber die Schaltfläche funktioniert noch nicht! + + +4. Füge eine zweite ``-Komponente mit der Direktive `client:load` hinzu. + + ```astro title="src/pages/index.astro" ins={9} "client:load" + --- + import BaseLayout from '../layouts/BaseLayout.astro'; + import Greeting from '../components/Greeting'; + const pageTitle = "Startseite"; + --- + +

    Mein großartiger Blog-Untertitel

    + + +     + ``` + + 5. Lade deine Seite neu und vergleiche beide Komponenten. Die zweite Schaltfläche funktioniert, weil die Direktive `client:load` Astro anweist, das JavaScript beim _Laden_ der Seite an den _Client_ zu senden und dort auszuführen. So wird die Komponente interaktiv. Dies nennt man eine **hydrated**-Komponente. + + 6. Sobald du den Unterschied verstanden hast, entferne die nicht-hydrierte Greeting-Komponente: + + ```astro title="src/pages/index.astro" del={8} "client:load" + --- + import BaseLayout from '../layouts/BaseLayout.astro'; + import Greeting from '../components/Greeting'; + const pageTitle = "Startseite"; + --- + +

    Mein großartiger Blog-Untertitel

    + + +     + ``` +     + + + +### Analysiere das Muster + +Es gibt mehrere `client:`-Direktiven. Jede sendet das JavaScript zu einem anderen Zeitpunkt an den Client. `client:visible` zum Beispiel sendet das JavaScript einer Komponente erst, wenn sie auf der Seite sichtbar wird. + +Betrachte eine Astro-Komponente mit folgendem Code: + +```astro +--- +import BaseLayout from '../layouts/BaseLayout.astro'; +import AstroBanner from '../components/AstroBanner.astro'; +import PreactBanner from '../components/PreactBanner'; +import SvelteCounter from '../components/SvelteCounter.svelte'; +--- + + + + + + + +``` + +1. Welche der fünf Komponenten werden **hydriert**, also als Astro-Islands mit JavaScript an den Client gesendet? + +

    + `` und `` werden hydriert. +

    + +2. In welcher Hinsicht sind die beiden ``-Komponenten gleich, und worin unterscheiden sie sich? + +

    + **Gleich:** Beide zeigen dieselben HTML-Elemente und sehen anfangs gleich aus. **Unterschiedlich:** Die Komponente mit der Direktive `client:load` wird nach dem Laden der Seite erneut gerendert und ihre interaktiven Elemente funktionieren. +

    + +3. Angenommen, die `SvelteCounter`-Komponente zeigt eine Zahl und eine Schaltfläche, um sie zu erhöhen. Wenn du nur die veröffentlichte Seite siehst, aber nicht den Code – wie würdest du erkennen, welche der beiden ``-Komponenten `client:visible` verwendet? + +

    + Klicke auf die Schaltfläche und sieh, welche reagiert. Wenn sie auf deine Eingabe reagiert, hat sie eine `client:`-Direktive. +

    +     + + + + + +### Teste dein Wissen + +Bei jeder der folgenden Komponenten: Was wird an den Browser gesendet? + +1. `` + + + + + + +2. `` + + + + + + + + + +## Checkliste + + +- [ ] Ich kann eine Astro-Integration installieren. +- [ ] Ich kann UI-Framework-Komponenten in ihrer eigenen Sprache schreiben. +- [ ] Ich kann eine `client:`-Direktive für die Hydration meiner UI-Framework-Komponenten verwenden. + + + +### Ressourcen + +- [Astro-Integrationshandbuch](/de/guides/integrations-guide/) + +- [UI-Framework-Komponenten in Astro verwenden](/en/guides/framework-components/#framework-komponenten-nutzen) + +- [Astro-Referenz zu `client:`-Direktiven](/de/reference/directives-reference/#client-direktive) From b6aeda197825801843f0c7cef2f4c99aa6b4825b Mon Sep 17 00:00:00 2001 From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com> Date: Mon, 6 Oct 2025 14:19:48 +0200 Subject: [PATCH 55/98] Create page 2: section 6 of 6 --- src/content/docs/de/tutorial/6-islands/2.mdx | 263 +++++++++++++++++++ 1 file changed, 263 insertions(+) create mode 100644 src/content/docs/de/tutorial/6-islands/2.mdx diff --git a/src/content/docs/de/tutorial/6-islands/2.mdx b/src/content/docs/de/tutorial/6-islands/2.mdx new file mode 100644 index 0000000000000..b4d7b7c69f9b9 --- /dev/null +++ b/src/content/docs/de/tutorial/6-islands/2.mdx @@ -0,0 +1,263 @@ +--- +type: tutorial +title: 'Zurück an Land. Verwandle deinen Blog von Tag zu Nacht – ganz ohne Island!' +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog — + Erstelle einen Schalter für den Hell-/Dunkelmodus nur mit JavaScript und CSS +i18nReady: true +--- + +import Box from '~/components/tutorial/Box.astro'; +import Checklist from '~/components/Checklist.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'; + +Jetzt, da du interaktive Astro-Islands erstellen kannst, vergiss nicht: Du kannst auch mit reinem JavaScript und CSS schon sehr weit kommen! + +Lass uns ein klickbares Symbol bauen, mit dem deine Nutzer:innen zwischen Hell- und Dunkelmodus umschalten können – mithilfe eines weiteren ` + ``` + +2. Öffne wieder deine Browser-Vorschau unter `http://localhost:4321` und klicke auf das Theme-Symbol. Überprüfe, ob du zwischen Hell- und Dunkelmodus wechseln kannst. + + + + +### Teste dein Wissen + +Ordne zu, ob jede der folgenden Aussagen Astro-`