Wissenscheck: Lektion 1 – Einrichtung

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 fort, wenn du dich mit deiner Umgebung und deinem Workflow bereits wohlfühlst.

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.

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“, 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“ fort.

Andernfalls kannst du diese Lektion überspringen und mit Lektion 2 weitermachen, 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!