Blogs mit Astro erstellen

Dieser Artikel stellt vor, wie man eine Blog-Website mit Astro erstellt, einer JavaScript-losen statischen Website-Generierungs-Engine. Wir behandeln Installation, Konfiguration und Verwendung von Astro.

GitHub:

🚀🧑‍🚀 Keep your eyes to the skies, astronauts [withastro/astro: 🚀🧑‍🚀 Keep your eyes to the skies, astronauts](https://github.com/withastro/astro)

Was ist Astro (von GitHub):

• Ein frischer aber vertrauter Ansatz zum Erstellen von Websites
• DX-Verbesserungen der komponentenorientierten Ära
• Verwenden Sie Ihr bevorzugtes JavaScript-Framework und liefern Sie standardmäßig automatisch das absolute Minimum an JavaScript

withastro/astro: 🚀🧑‍🚀 Keep your eyes to the skies, astronauts

Installation

Unten finden Sie die Installationsanleitung für Astro.

Node.js installieren

Verwenden Sie Chocolatey, um nvm (Node.js Versionsverwaltungssystem) zu installieren. Dies ermöglicht es Ihnen, in späteren Schritten jede Version von Node.js zu installieren.

choco install nvm -y
refreshenv

Für einen Überblick darüber, was Chocolatey ist und wie man es installiert, siehe das Folgende.

Chocolatey unter Windows 11 installieren

Verwenden Sie das installierte nvm, um Node.js Version 14.13.1 mit folgendem Befehl zu installieren. Astro scheint keine bestimmte Node.js-Version anzugeben, aber wir haben bestätigt, dass es mit Node.js Version v14 funktioniert, also fahren wir mit dieser Version fort.

nvm install 14.13.1 

Bestätigen Sie, dass Node.js installiert ist.

> C:\ProgramData\nvm\v14.13.1\node64.exe -v
v14.13.1

Erstellen Sie ein beliebiges Verzeichnis und navigieren Sie dorthin. Initialisieren Sie ein Node.js-Projekt mit dem Befehl npm init, um eine package.json-Datei zu erstellen.

cd C:\pg\node\_win_v14.13.1_dev\
C:\ProgramData\nvm\v14.13.1\npm.cmd init 

Astro installieren

Laut der oben genannten GitHub-Dokumentation wird empfohlen, anstatt das Astro-Paket mit npm install zu installieren, den Befehl npm init astro auszuführen, der automatisch Konfiguration und Dateigenerierung übernimmt.

C:\ProgramData\nvm\v14.13.1\npm.cmd npm init astro

# oder 

npm init astro

Sie können aus mehreren Projekttypen wählen: Starter (allgemein), Blog, Dokumentation, Portfolio, minimal usw. Hier wählen wir als Beispiel Blog.

(Astro mit npm init astro installieren)

(Astro mit npm init astro installieren / Projektauswahl: Starter (allgemein), Blog, Dokumentation, Portfolio, minimal)

Dies generiert Projektdateien mit folgender Struktur.

.
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   ├── favicon.ico
│   ├── social.jpg
│   └── social.png
├── sandbox.config.json
├── src
│   ├── components
│   ├── layouts
│   ├── pages
│   └── styles
└── tsconfig.json

Die anfängliche ./src/layouts/BlogPost.astro-Datei und ./src/pages/posts/index.md-Datei sehen so aus:

Wie in den “next steps” im Bild oben zu sehen, sind die Node/npm-Pakete in package.json noch nicht installiert, also installieren wir sie.

npm install

Astro ausführen

Starten Sie den Entwicklungsserver mit folgendem Befehl:

npm run dev

# oder 

astro dev

Der Server startet, und Sie können die Website anzeigen, indem Sie die localhost-Adresse öffnen.

Um statische Seiten für das Pushen zu GitHub Pages oder das Bereitstellen auf einem Server zu bauen und zu generieren, verwenden Sie folgenden Befehl:

npm run build

# oder 

astro build

Zusammenfassung

Dieser Artikel erklärte die Schritte zum Erstellen einer Blog-Website mit Astro, einer JavaScript-losen statischen Website-Generierungs-Engine. Hier ist eine Zusammenfassung der Hauptpunkte.

Astro ist ein Werkzeug, das einen neuen Ansatz zum Erstellen von Websites bietet und komponentenorientierte Verbesserungen bietet. Es verwendet Ihr bevorzugtes JavaScript-Framework und liefert automatisch das minimal notwendige JavaScript.

Die Installation von Astro umfasst folgende Schritte:

1. Node.js installieren: Installieren Sie NVM (Node.js Version Manager) mit Chocolatey und wählen Sie Node.js Version 14.13.1. Astro erfordert möglicherweise keine bestimmte Node.js-Version, aber Version 14 wurde als funktionierend bestätigt.

2. Astro installieren: Anstatt Astro-Pakete direkt mit npm zu installieren, verwenden Sie den Befehl npm init astro, um das Projekt automatisch einzurichten und den Projekttyp (z.B. Blog) auszuwählen. Dies generiert die Projektdateistruktur.

Die Projektdateistruktur umfasst astro.config.mjs, package.json, src-Verzeichnis usw. und bietet Beispiel-Astro-Komponenten und Inhalte im Anfangszustand.

3. Abhängigkeiten installieren: Installieren Sie Projektabhängigkeiten mit dem Befehl npm install.

Um die Entwicklungsumgebung für ein Astro-Projekt zu starten, verwenden Sie folgende Befehle:

• npm run dev oder astro dev

Dies startet Astros Entwicklungsserver und ermöglicht die Vorschau der Website auf localhost.

Schließlich, um ein Astro-Projekt zu bauen und statische Seiten zu generieren, verwenden Sie folgende Befehle:

• npm run build oder astro build

Durch diesen Prozess sind die grundlegenden Schritte zum Erstellen, Entwickeln und Bereitstellen einer Blog-Website mit Astro abgeschlossen. Dies ermöglicht effizientes Erstellen von statischen, hochleistungsfähigen Websites.