diff --git a/src/content/docs/de/tutorial/0-introduction/1.mdx b/src/content/docs/de/tutorial/0-introduction/1.mdx index 42d9798ef63ad..75d9fe360481a 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 „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.
-Wie kann ich die Checklisten am Ende jedes Kapitels nutzen? +Wie kann ich die Checklisten am Ende jeder Lektion nutzen? Du hakst sie einfach ab! @@ -28,11 +28,11 @@ Du kannst auch einige Punkte der Checkliste erst mal nicht abhaken, als Erinneru
-Einheit 1 behandelt Themen, die ich schon kenne. Kann ich sie überspringen? +Lektion 1 behandelt Themen, die ich schon kenne. Kann ich sie überspringen? -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.
@@ -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! 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..513b443f6505d --- /dev/null +++ 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'; + + In diesem Tutorial lernst du die wichtigsten Funktionen von Astro, indem du einen vollständig funktionierenden Blog von Grund auf erstellst – bis zum Launch! 🚀 + +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. +::: + + + +## Checkliste + + +- [ ] Sieht super aus! Ich bin bereit, loszulegen! + + 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..ee0308323380f --- /dev/null +++ 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" + + + - Installiere alle Werkzeuge, die du zum Erstellen deiner Astro-Website benötigst + + +## 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­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. +::: + + +1. [Installiere VS Code](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 Terminal 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.

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..a223e21d67dbe --- /dev/null +++ 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" + + + - 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 + + +## 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 Terminals 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, 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 Enter (macOS: Return), 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. + + +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 + + +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 Strg + J (macOS: Cmd ⌘ + J). + ::: + + +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 + + +10. Starte den Astro-Entwicklungsserver, indem du im VS Code-Terminal folgenden Befehl eingibst: + + + + ```shell + npm run dev + ``` + + + ```shell + pnpm run dev + ``` + + + ```shell + yarn run dev + ``` + + + + Jetzt solltest du im Terminal 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 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) + + +:::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 Strg + 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 Terminal und starte den Entwicklungsserver erneut mit `npm run dev`. +::: + + +## Checkliste + + +- [ ] Ich kann ein neues Astro-Projekt erstellen. +- [ ] Ich kann den Astro-Entwicklungsserver starten. + + + +### Ressourcen + +-

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

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..a77a175237d34 --- /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 mit anderen teilen kannst. + + +## Checkliste + + +- [ ] Ich kann Änderungen vornehmen und sie im Browser sehen. +- [ ] Ich bin Astro-Entwickler! + + 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..000f5df89e93a --- /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, allerdings musst du 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)

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..7f8aff2dd423c --- /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` 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/)

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..8732960c0830b --- /dev/null +++ b/src/content/docs/de/tutorial/1-setup/index.mdx @@ -0,0 +1,119 @@ +--- +type: tutorial +unitTitle: Erstelle und veröffentliche deine erste Astro-Website +title: 'Lege los: Lektion 1 – Einrichtung' +description: >- + Tutorial: Erstelle deinen ersten Astro-Blog — + Richte deine Entwicklungsumgebung ein und erstelle und veröffentliche deine erste Astro-Website +i18nReady: true +head: + - tag: title + content: 'Blog-Tutorial: Lektion 1 – Einrichtung | Docs' +--- + +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 Lektion lernst du, wie du deine Entwicklungsumgebung einrichtest und deine Seite auf Netlify veröffentlichst. Überspringe diese Lektion und fahre mit [Lektion 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 Lektion 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 veröffentlichen** + +Wenn du deine Seite auf Netlify veröffentlichen möchtest, um eine live veröffentlichte Version deiner Website zu haben, fahre in Lektion 1 mit [„Deine Website im Web veröffentlichen“](/de/tutorial/1-setup/5/) fort. + +Andernfalls kannst du diese Lektion überspringen und mit [Lektion 2](/de/tutorial/2-pages/) weitermachen, um mit Astro zu bauen! + +
+ +{/* StackBlitz instructions +
+Mit StackBlitz: Befolge diese Schritte und gehe dann direkt zu Lektion 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 Lektion 1 mit [„Deine Website ins Web deployen“](/de/tutorial/1-setup/5/) fort. + +Andernfalls überspringe diese Lektion und beginne mit [Lektion 2](/de/tutorial/2-pages/), um mit Astro zu bauen! + +
+*/} +::: + +## Wohin geht die Reise? + +In dieser Lektion 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 erstellen und sie anschließend im Internet unter einer eindeutigen Adresse zu veröffentlichen, die jeder aufrufen kann. + +Jedes Mal, wenn du eine Änderung committest und auf GitHub hochlädtst, sendet GitHub eine Benachrichtigung an Netlify. Dann wird Netlify automatisch deine Live-Website neu erzeugen und erneut veröffentlichen, um diese Änderungen zu übernehmen. + + +## Checkliste + + +- [ ] Ich bin bereit, eine Entwicklungsumgebung für ein Astro-Projekt einzurichten! + + diff --git a/src/content/docs/de/tutorial/2-pages/1.mdx b/src/content/docs/de/tutorial/2-pages/1.mdx new file mode 100644 index 0000000000000..418901e58db39 --- /dev/null +++ b/src/content/docs/de/tutorial/2-pages/1.mdx @@ -0,0 +1,165 @@ +--- +type: tutorial +title: Erstelle deine erste Astro-Seite +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog — + Füge deiner Website neue Seiten mit Navigationslinks zwischen ihnen hinzu +i18nReady: true +--- + +import Checklist from '~/components/Checklist.astro'; +import Blanks from '~/components/tutorial/Blanks.astro'; +import Box from '~/components/tutorial/Box.astro'; +import PreCheck from '~/components/tutorial/PreCheck.astro'; +import { Steps } from '@astrojs/starlight/components'; + +Jetzt, da du weißt, dass `.astro`-Dateien für die Seiten deiner Website verantwortlich sind, ist es an der Zeit, eine zu erstellen! + + + - Erstelle zwei neue Seiten auf deiner Website: About und Blog + - Füge Navigationslinks zu deinen Seiten hinzu + - Veröffentliche eine aktualisierte Version deiner Website im Web + + +## Eine neue `.astro`-Datei erstellen + + +1. Navigiere im Dateibereich deines Code-Editors zum Ordner `src/pages/`, in dem du die vorhandene Datei `index.astro` siehst. + +2. Erstelle im selben Ordner eine neue Datei mit dem Namen `about.astro`. + +3. Kopiere oder schreibe den Inhalt von `index.astro` in deine neue Datei `about.astro`. + + :::tip + Dein Editor zeigt möglicherweise einen ausgefüllten weißen Kreis auf dem Tab der Datei an. Das bedeutet, dass die Datei noch nicht gespeichert wurde. Aktiviere im Menü „Datei“ in VS Code die Option **Auto Save**, damit du deine Dateien nicht mehr manuell speichern musst. + ::: + +4. Füge am Ende der URL in der Adressleiste deines Website-Vorschaufensters `/about` hinzu und überprüfe, ob dort eine Seite geladen wird (z. B. `http://localhost:4321/about`). + + +Im Moment sollte deine „Über mich“-Seite genau wie deine Startseite aussehen, aber das werden wir gleich ändern! + +## Bearbeite deine Seite + +Bearbeite den HTML-Inhalt, um diese Seite über dich zu gestalten. + +Um den Inhalt deiner About-Seite zu ändern oder zu erweitern, füge weitere HTML-Element-Tags mit Inhalt hinzu. Du kannst den folgenden HTML-Code zwischen die vorhandenen ``-Tags einfügen oder deinen eigenen erstellen: + +```astro title="src/pages/about.astro" ins={3-8} del={2} + +

Meine Astro-Seite

+

Über mich

+

… und meine neue Astro-Seite!

+ +

Ich arbeite mich durch das einführende Astro-Tutorial. Dies ist die zweite Seite meiner Website und die erste, die ich selbst erstellt habe!

+ +

Diese Website wird aktualisiert, während ich mehr vom Tutorial abschließe – schau also regelmäßig vorbei, um zu sehen, wie meine Reise verläuft!

+ +``` + +Besuche jetzt erneut deine `/about`-Seite in deinem Browser-Tab, und du solltest die aktualisierten Inhalte sehen. + +## Navigationslinks hinzufügen + +Um das Vorschauen aller Seiten zu erleichtern, füge HTML-Seitennavigationslinks vor deinem `

` oben auf beiden Seiten (`index.astro` und `about.astro`) hinzu: + +```astro title="src/pages/about.astro" ins={1-2} +Startseite +Über mich + +

Über mich

+

… und meine neue Astro-Seite!

+``` + +Überprüfe, ob du diese Links anklicken kannst, um zwischen den Seiten deiner Website zu wechseln. + +:::note +Im Gegensatz zu vielen Frameworks verwendet Astro standardmäßige HTML-``-Elemente, um zwischen Seiten (_Routes_) zu navigieren, mit traditionellen Seitenaktualisierungen. +::: + + +## Probiere es selbst – Füge eine Blog-Seite hinzu + +Füge eine dritte Seite `blog.astro` zu deiner Website hinzu, indem du [die gleichen Schritte wie oben](#eine-neue-astro-datei-erstellen) befolgst. + +(Vergiss nicht, auf jeder Seite einen dritten Navigationslink hinzuzufügen.) + +
+Zeige mir die Schritte. + +1. Erstelle eine neue Datei unter `src/pages/blog.astro`. +2. Kopiere den gesamten Inhalt von `index.astro` in `blog.astro`. +3. [Füge einen dritten Navigationslink](#navigationslinks-hinzufügen) oben auf jeder Seite hinzu: + + +```astro title="src/pages/index.astro" ins={4} + + Startseite + Über mich + Blog + +

Meine Astro-Seite

+ +``` +
+ + +Du solltest nun eine Website mit drei Seiten haben, die alle miteinander verlinkt sind. Jetzt ist es an der Zeit, Inhalte für die Blog-Seite hinzuzufügen. + +Aktualisiere den Seiteninhalt in `blog.astro` wie folgt: + +```astro astro title="src/pages/blog.astro" ins={7-8} del={6} + + Startseite + Über mich + Blog + +

Meine Astro-Seite

+

Mein Astro-Lern-Blog

+

Hier werde ich über meine Reise beim Lernen von Astro schreiben.

+ +``` + +Vorschau deiner gesamten Website, indem du alle drei Seiten in der Browser-Vorschau besuchst, und prüfe: +- Jede Seite verlinkt korrekt zu allen drei Seiten +- Deine beiden neuen Seiten haben jeweils eine aussagekräftige Überschrift +- Deine beiden neuen Seiten haben jeweils eigenen Absatztext + +## Änderungen im Web veröffentlichen + +Wenn du unserem Setup in Lektion 1 gefolgt bist, kannst du deine Änderungen über Netlify auf deiner Live-Website veröffentlichen. + +Wenn du mit der Vorschau zufrieden bist, **committe** deine Änderungen in dein Online-Repository bei GitHub. + + +1. Vorschau der Dateien in VS Code, die seit deinem letzten Commit zu GitHub geändert wurden. + + - Gehe zum **Quellcode-Kontroll-Tab** im linken Menü. Dort sollte eine kleine „3“ angezeigt werden. + + - Du solltest `index.astro`, `about.astro` und `blog.astro` als geänderte Dateien sehen. + +2. Gib eine Commit-Nachricht ein (z. B. „Zwei neue Seiten hinzugefügt – About und Blog“) und drücke Strg + Enter (macOS: Cmd ⌘ + Return), um die Änderungen in deinem aktuellen Workspace zu committen. + +3. Klicke auf den Button Sync Changes, um die Änderungen mit GitHub zu synchronisieren. + +4. Nach ein paar Minuten besuche deine Netlify-URL, um zu überprüfen, dass die Änderungen live veröffentlicht wurden. + + +:::tip[Regelmäßig committen und veröffentlichen] +Führe diese Schritte jedes Mal aus, wenn du eine Arbeitspause einlegst! Deine Änderungen werden in deinem GitHub-Repository aktualisiert. Wenn du auf einer Netlify-Website veröffentlicht hast, wird sie neu gebaut und erneut veröffentlicht. +::: + + +## Checkliste + + +- [ ] Ich kann eine neue Seite für meine Website erstellen und von einer bestehenden Seite darauf verlinken. +- [ ] Ich kann meine Änderungen zurück zu GitHub committen und meine Live-Seite auf Netlify aktualisieren. + + + +### Ressourcen + +- [Dateibasierte Routing in Astro](/de/basics/astro-pages/#dateibasiertes-routing) + +- [Astro-Seiten-HTML](/de/basics/astro-pages/#astro-seiten) diff --git a/src/content/docs/de/tutorial/2-pages/2.mdx b/src/content/docs/de/tutorial/2-pages/2.mdx new file mode 100644 index 0000000000000..17c9a943843bb --- /dev/null +++ b/src/content/docs/de/tutorial/2-pages/2.mdx @@ -0,0 +1,100 @@ +--- +type: tutorial +title: Schreibe deinen ersten Markdown-Blogbeitrag +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog — + Füge deiner Website Markdown-Seiten hinzu +i18nReady: true +--- + +import Checklist from '~/components/Checklist.astro'; +import Blanks from '~/components/tutorial/Blanks.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" + +Jetzt, da du Seiten mit `.astro`-Dateien erstellt hast, ist es an der Zeit, Blogbeiträge mit `.md`-Dateien zu schreiben! + + + - Erstelle einen neuen Ordner und lege einen neuen Beitrag an + - Schreibe etwas Markdown-Inhalt + - Verlinke deine Blogbeiträge auf deiner Blog-Seite + + +## Erstelle deine erste `.md`-Datei + + +1. Erstelle ein neues Verzeichnis unter `src/pages/posts/`. + +2. Lege in deinem neuen `/posts/`-Ordner eine (leere) Datei namens `post-1.md` an. + +3. Rufe diese Seite in deiner Browser-Vorschau auf, indem du `/posts/post-1` an deine bestehende Vorschau-URL anhängst (z. B. `http://localhost:4321/posts/post-1`). + +4. Ändere die Vorschau-URL im Browser zu `/posts/post-2` (diese Seite existiert noch nicht). + + Achte auf den Unterschied in der Ausgabe zwischen einer „leeren“ Seite und einer, die nicht existiert. Das hilft dir später beim Beheben von Problemen. + + +## Schreibe Markdown-Inhalt + + +1. Kopiere oder tippe den folgenden Code in `post-1.md` ein. + +2. Überprüfe deine Browser-Vorschau erneut unter `http://localhost:4321/posts/post-1`. + Du solltest jetzt Inhalt auf dieser Seite sehen. Er ist möglicherweise noch nicht richtig formatiert, aber keine Sorge – du wirst das später im Tutorial anpassen! + +3. Öffne die DevTools deines Browsers und untersuche die Seite. + Dir wird auffallen, dass dein Markdown automatisch in HTML umgewandelt wurde, obwohl du keine HTML-Elemente geschrieben hast. Du kannst dort Überschriften, Absätze und Listenelemente sehen. + + +:::note +Die Informationen am Anfang der Datei, innerhalb der Code-Abgrenzungen, nennt man *Frontmatter*. +Diese Daten – einschließlich Tags und Beitragsbild – sind Informationen *über* deinen Beitrag, die Astro nutzen kann. +Sie erscheinen nicht automatisch auf der Seite, aber du wirst sie später im Tutorial verwenden, um deine Website zu erweitern. +::: + +## Verlinke deine Beiträge + + +1. Verlinke deinen ersten Beitrag mit einem Anker-Tag in `src/pages/blog.astro`. + +2. Füge anschließend zwei weitere Dateien in `src/pages/posts/` hinzu: `post-2.md` und `post-3.md`. + Du kannst den untenstehenden Beispielcode verwenden oder eigene Texte schreiben. + +3. Füge Links zu diesen neuen Beiträgen hinzu. + +4. Überprüfe in der Browser-Vorschau, ob alle Links zu Beitrag 1, Beitrag 2 und Beitrag 3 auf funktionierende Seiten führen. + (Wenn etwas nicht klappt, überprüfe deine Links in `blog.astro` oder die Dateinamen deiner Markdown-Dateien.) + + + +### Teste dein Wissen + +1. Inhalt in einer Markdown-Datei (`.md`) wird umgewandelt in: + + + + + + + + +## Checkliste + + +- [ ] Ich kann innerhalb von `src/pages/` einen neuen Ordner für meine Blogbeiträge erstellen. +- [ ] Ich kann eine neue Markdown-Datei (`.md`) für einen Blogbeitrag anlegen. +- [ ] Ich verstehe, dass Markdown eine weitere Sprache ist, die – wie Astro – in meinem Browser HTML erzeugt. + + + +### Ressourcen + +- [Markdown-Cheatsheet vom Markdown-Guide](https://www.markdownguide.org/cheat-sheet/) + +- [Was sind Entwickler-Tools im Browser? – MDN](https://developer.mozilla.org/de/docs/Learn/Common_questions/What_are_browser_developer_tools) + +- [YAML-Frontmatter](https://assemble.io/docs/YAML-front-matter.html) diff --git a/src/content/docs/de/tutorial/2-pages/3.mdx b/src/content/docs/de/tutorial/2-pages/3.mdx new file mode 100644 index 0000000000000..bd784669fbbc0 --- /dev/null +++ b/src/content/docs/de/tutorial/2-pages/3.mdx @@ -0,0 +1,278 @@ +--- +type: tutorial +title: Füge dynamische Inhalte über dich hinzu +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog – + Verwende Variablen und bedingtes Rendern auf deinen Astro-Seiten +i18nReady: true +--- + +import Checklist from '~/components/Checklist.astro'; +import Spoiler from '~/components/Spoiler.astro'; +import Blanks from '~/components/tutorial/Blanks.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'; + +Jetzt, da du eine mehrseitige Website mit HTML-Inhalten hast, ist es an der Zeit, etwas dynamisches HTML hinzuzufügen! + + + - Definiere deinen Seitentitel im Frontmatter und verwende ihn in deinem HTML + - Zeige HTML-Elemente abhängig von Bedingungen an + - Füge einige Informationen über dich hinzu + + +Jede HTML-Datei ist gültige Astro-Syntax. Aber mit Astro kannst du mehr machen als nur reguläres HTML! + +## Eine Variable definieren und verwenden + +Öffne `about.astro`. Sie sollte so aussehen: + +```astro title="src/pages/about.astro" +--- +--- + + + + + Astro + + + Startseite + Über mich + Blog +

Über mich

+

… und meine neue Astro-Seite!

+ +

Ich arbeite mich gerade durch Astros Einsteiger-Tutorial. Das ist die zweite Seite auf meiner Website – und die erste, die ich selbst gebaut habe!

+ +

Diese Website wird sich weiterentwickeln, während ich das Tutorial abschließe. Schau also regelmäßig vorbei und verfolge, wie meine Reise voranschreitet!

+ + +``` + + +1. Füge folgende JavaScript-Zeile im Frontmatter-Skript zwischen die **Code-Begrenzungen** ein: + + ```astro title="src/pages/about.astro" ins={2} + --- + const pageTitle = "Über mich"; + --- + ``` + +2. Ersetze sowohl den statischen „Astro“-Titel als auch die „Über mich“-Überschrift in deinem HTML durch die dynamische Variable `{pageTitle}`. + + ```astro title="src/pages/about.astro" del={5,12} ins={6,13} + + + + + Astro + {pageTitle} + + + Startseite + Über mich + Blog +

Über mich

+

{pageTitle}

+

… und meine neue Astro-Website!

+ +

Ich arbeite gerade das Astro-Einführungstutorial durch. Das ist die zweite Seite meiner Website und die erste, die ich selbst gebaut habe!

+ +

Diese Website wird sich weiterentwickeln, während ich das Tutorial abschließe. Schau also regelmäßig vorbei und verfolge, wie meine Reise voranschreitet!

+ + + ``` + +3. Aktualisiere die Live-Vorschau deiner `/about`-Seite. + + Der Seitentext sollte gleich aussehen, aber der Seitentitel im Browsertab sollte jetzt „Über mich“ statt „Astro“ anzeigen. + + Anstatt Text direkt in HTML-Tags zu schreiben, hast du gerade **eine Variable definiert und verwendet** – in den beiden Bereichen deiner `.astro`-Datei. + +4. Verwende dasselbe Muster, um in `index.astro` („Startseite“) und `blog.astro` („Mein Astro-Lernblog“) eine `pageTitle`-Variable anzulegen. Aktualisiere das HTML auf diesen Seiten so, dass der Seitentitel mit der Überschrift übereinstimmt. + + +:::note[Wichtige Punkte] +1. **Definiere** Variablen im Astro-Skript mit JavaScript- oder TypeScript-Ausdrücken. +2. **Verwende** diese Variablen im Astro-Template in geschweiften Klammern `{ }`, um Astro mitzuteilen, dass du JavaScript nutzt. +::: + +## JavaScript-Ausdrücke in Astro schreiben + + +1. Füge folgendes JavaScript in dein Frontmatter ein – zwischen die **Code-Begrenzungen**: + + (Du kannst den Code anpassen, aber dieses Tutorial nutzt folgendes Beispiel.) + + ```astro title="src/pages/about.astro" ins={4-9, 11} + --- + const pageTitle = "Über mich"; + + const identity = { + firstName: "Sarah", + country: "Kanada", + occupation: "Technische Redakteurin", + hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"], + }; + + const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"]; + --- + ``` + +2. Füge den folgenden Code unter deinem bisherigen Inhalt in dein HTML-Template ein: + + ```astro title="src/pages/about.astro" +

Hier sind ein paar Fakten über mich:

+
    +
  • Mein Name ist {identity.firstName}.
    • +
  • Ich lebe in {identity.country} und arbeite als {identity.occupation}.
    • + {identity.hobbies.length >= 2 && +
  • Zwei meiner Hobbys sind: {identity.hobbies[0]} und {identity.hobbies[1]}
    • + } +
+

Meine Fähigkeiten sind:

+
    + {skills.map((skill) =>
  • {skill}
    • )} +
+ ``` + + +:::note[Kerngedanke] +1. Ein Astro-Template zu schreiben ist fast wie **HTML zu schreiben**, aber du kannst JavaScript-Ausdrücke darin einfügen. +2. Das Frontmatter-Skript in Astro enthält nur JavaScript. +3. Du kannst alle modernen JavaScript-**Operatoren**, **Ausdrücke** und **Funktionen** in beiden Bereichen deiner `.astro`-Datei verwenden – aber geschweifte Klammern sind (nur) im HTML-Template nötig. +::: + + + +### Teste dein Wissen + +1. Das Frontmatter einer `.astro`-Datei ist geschrieben in: + + + + + + + +2. Zusätzlich zu HTML erlaubt dir die Astro-Syntax, Folgendes einzubinden: + + + + + + + +3. Wann musst du dein JavaScript in geschweifte Klammern schreiben? + + + + + + + +## Elemente bedingt rendern + +Du kannst deine Skriptvariablen auch nutzen, um zu entscheiden, **ob** bestimmte HTML-Elemente im `` angezeigt werden oder nicht. + + +1. Füge die folgenden Zeilen zu deinem Frontmatter-Skript hinzu, um **Variablen zu definieren**: + + ```astro title="src/pages/about.astro" ins={13-15} + --- + const pageTitle = "Über mich"; + + const identity = { + firstName: "Sarah", + country: "Kanada", + occupation: "Technische Redakteurin", + hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"], + }; + + const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"]; + + const happy = true; + const finished = false; + const goal = 3; + --- + ``` + +2. Füge folgende Zeilen unter deinen bisherigen Absätzen hinzu. + + Überprüfe dann die Live-Vorschau im Browser, um zu sehen, was angezeigt wird: + + ```astro title="src/pages/about.astro" /:|&&/ "?" + {happy &&

Ich freue mich, Astro zu lernen!

} + + {finished &&

Ich habe dieses Tutorial abgeschlossen!

} + + {goal === 3 ?

Mein Ziel ist es, in 3 Tagen fertig zu werden.

:

Mein Ziel sind nicht 3 Tage.

} + ``` + +3. Committe deine Änderungen auf GitHub, bevor du weitermachst. + Mach das immer, wenn du deinen Fortschritt speichern und deine Live-Website aktualisieren möchtest. + + +:::tip +Die Template-Syntax von Astro ist ähnlich wie die von JSX. Wenn du dir also unsicher bist, wie du dein Skript im HTML verwenden kannst, hilft eine Suche danach, wie es in JSX gemacht wird, oft weiter! +::: + + + +### Analysiere das Muster + +Angenommen, dein `.astro`-Skript sieht so aus: + +```astro title="src/pages/about.astro" +--- +const operatingSystem = "Linux"; +const quantity = 3; +const footwear = "Stiefel"; +const student = false; +--- +``` + +Kannst du vorhersagen, welches HTML (falls überhaupt) an den Browser gesendet wird? +Klicke, um herauszufinden, ob du richtig liegst! + +1. `

{operatingSystem}

` + +

+ `

Linux

` +

+ +2. `{student &&

Ich bin noch in der Schule.

}` + +

+ Nichts wird angezeigt, da `student` als false ausgewertet wird. +

+ +3. `

Ich habe {quantity + 8} Paar {footwear}

` + +

+ `

Ich habe 11 Paar Stiefel

` +

+ +4. `{operatingSystem === "macOS" ?

Ich benutze einen Mac.

:

Ich benutze keinen Mac.

}` + +

+ `

Ich benutze keinen Mac.

` +

+ + + +## Checkliste + + +- [ ] Ich kann Werte in `.astro`-Dateien definieren und verwenden. +- [ ] Ich kann HTML-Elemente bedingt rendern. + + + +### Ressourcen + +- [Dynamische Ausdrücke in Astro](/de/reference/astro-syntax/#jsx-ähnliche-ausdrücke) diff --git a/src/content/docs/de/tutorial/2-pages/4.mdx b/src/content/docs/de/tutorial/2-pages/4.mdx new file mode 100644 index 0000000000000..6dcbce8b6759a --- /dev/null +++ b/src/content/docs/de/tutorial/2-pages/4.mdx @@ -0,0 +1,200 @@ +--- +type: tutorial +title: Style deine „Über mich“-Seite +description: |- + Tutorial: Erstelle deinen ersten Astro-Blog – + Füge ein Astro-Style-Tag für seitenbezogene Styles hinzu +i18nReady: true +--- + +import Checklist from '~/components/Checklist.astro'; +import Spoiler from '~/components/Spoiler.astro'; +import Box from '~/components/tutorial/Box.astro'; +import PreCheck from '~/components/tutorial/PreCheck.astro'; +import { Steps } from '@astrojs/starlight/components'; + +Jetzt, da du eine About-Seite mit Inhalten über dich hast, ist es Zeit, sie zu gestalten! + + + - Elemente auf einer einzelnen Seite gestalten + - CSS-Variablen verwenden + + +## Eine einzelne Seite gestalten + +Mit Astros eigenen ``-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 „Ü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. + ::: + +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 „Ü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 + +Das Astro-` + ``` + +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. + + + + +## Probiere es selbst – CSS-Variablen definieren + + + 1. Aktualisiere das ` + ``` + + 2. Füge in deinem Frontmatter-Skript alle fehlenden Variablen hinzu, damit dein neues ` + ``` + +2. Füge ein ` + +
    + + + +
    + ``` + +3. Überprüfe erneut deine Browser-Vorschau und bestätige, dass jede Seite eine aktualisierte Fußzeile anzeigt. +     + + + +### Teste dich selbst + +1. Welche Codezeile musst du im Frontmatter einer Astro-Komponente schreiben, um die Werte von `title`, `author` und `date` als Props zu erhalten? + + + + + + +2. Wie **übergibst du Werte als Props** an eine Astro-Komponente? + + + + + + + + + + +## Checkliste + + +- [ ] Ich kann neue `.astro`-Komponenten in `src/components/` erstellen. +- [ ] Ich kann Astro-Komponenten innerhalb anderer Astro-Komponenten importieren und verwenden. +- [ ] Ich kann Props an eine Astro-Komponente übergeben. + + + +### Ressourcen + +- [Komponenteneigenschaften in Astro](/de/basics/astro-components/#props-komponenteneigenschaften) \ No newline at end of file diff --git a/src/content/docs/de/tutorial/3-components/3.mdx b/src/content/docs/de/tutorial/3-components/3.mdx new file mode 100644 index 0000000000000..713d0c83fa481 --- /dev/null +++ b/src/content/docs/de/tutorial/3-components/3.mdx @@ -0,0 +1,204 @@ +--- +type: tutorial +title: Baue es selbst – Kopfzeile +description: >- + Tutorial: Erstelle deinen ersten Astro-Blog — + Verwende alles, was du bisher gelernt hast, um eine Kopfzeile mit responsiver + Navigation zu bauen +i18nReady: true +--- + +import Badge from '~/components/Badge.astro'; +import Box from '~/components/tutorial/Box.astro'; +import Checklist from '~/components/Checklist.astro'; +import PreCheck from '~/components/tutorial/PreCheck.astro'; +import { Steps } from '@astrojs/starlight/components'; + +Da deine Website auf verschiedenen Geräten angesehen wird, ist es an der Zeit, eine Seitennavigation zu erstellen, die sich an verschiedene Bildschirmgrößen anpasst! + + + - Erstelle eine Kopfzeile für deine Website, die die Navigationskomponente enthält + - Mache die Navigationskomponente responsiv + + + + +## Versuche es selbst – Baue eine neue Kopfzeilenkomponente + + +1. Erstelle eine neue Kopfzeilenkomponente. Importiere und verwende deine vorhandene `Navigation.astro`-Komponente innerhalb eines `