Migration meiner Website von Hugo zu Astro

Migration zum Astro Framework #1: Basics

#Astro#Azure#Hugo#Tailwind

Übersicht

In dieser Artikelserie beschreibe ich die Migration meines persönlichen Blog von Hugo zu Astro:

  1. Teil: Basics, GitHub Repository
  2. Teil: AzureStatic Web App und Azure DNS
  3. Teil: Astro
  4. Teil: Tailwind CSS

Motivation

Meine “IT adventures” Website läuft seit einigen Jahren als “static web site” in einem Azure storage account mit Azure FrontDoor und Edgio CDN. Als Generator habe ich damals Hugo gewählt, da es die meisten von mir benötigten Features ‘out of the box’ mitgebracht hat.

Da Edgio durch den Konkurs von Verizon eingestellt wird nutze ich die Gelegenheit, meine Website zu modernisieren und ein paar neue Technologien zu lernen:

Dev environment Setup

Als Editor nutze ich Visual Studio Code und habe die folgenden Extensions installiert:

  • Astro
  • GitHub Actions
  • HashiCorp Terraform
  • MDX
  • Prettier - Code formatter
  • Tailwind CSS IntelliSense

Außerdem benötigen wir einen Git Client und Node.js.

Git und Node Setup

  • Zuerst erstellen wir ein neues Repository auf GitHub, entweder über die GitHub GUI oder direkt via GET request (https://github.com/new?name=astro-site&visibility=private&description=A+personal+astro+site&owner=@me). Mehr details in der offiziellen GitHub Dokumentation unter Ein neues Repository erstellen.
  • Anschließend klonen wir das Repo in unsere lokale Dev-Umgebung mit git clone https://github.com/YOUR-USERNAME/astro-site.
  • Dann wechseln wir in das Verzeichnis des eben geklonten Repositories und initialisieren Node.js mit npm init --yes.
  • Zuletzt installieren wir Astro, indem wir npm install astro ausführen.

Es ist außerdem empfehlenswert, eine .gitignore-Datei für Node/Astro mit folgendem Inhalt zu erstellen:

dist/
.astro/
node_modules/
npm-debug.log*

Zusätzlich erleichtert es die Entwicklung mit Astro, in der Datei package.json die entsprechenden Scripts zu erstellen:

"scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
}

Nächster Artikel

Weiter geht’s in Migration zum Astro Framework Teil 2 mit dem Setup der Azure ressourcen.