DanLevy.net

Erfahrungen beim Upgrade meines Blogs

Astro, Tailwind,MDX, Pagefind und mehr!

Kürzlich habe ich mich daran gemacht, meine über 8 Jahre alte Gatsby‑v1‑Seite zu aktualisieren.

Dieser Blog‑Beitrag teilt einige Erkenntnisse, die ich dabei gewonnen habe, sowie die interessanten Technologien, die ich ausprobiert habe.

Inhaltsverzeichnis

Projektanforderungen

Bevor ich mit dem Upgrade begann, habe ich eine Reihe von Anforderungen definiert:

Da mein Blog täglich stark schwankende Besucherzahlen hat, wollte ich eine statisch vorgerenderte Seite, die die gewünschte Performance liefert, ohne zusätzliche Komplexität.

Außerdem musste ich den bestehenden Inhalt und die Funktionen der Seite erhalten, darunter:

Auswahl des richtigen Technologie‑Stacks

Im Laufe der Jahre habe ich mit vielen Static‑Site‑Tools gearbeitet, von Jekyll, Hugo, Slate bis hin zu Gatsby. Ebenso mit zahlreichen Front‑End‑Frameworks: Ember, Knockout, Angular, Vue und natürlich React.

Damit standen mir exakt zu viele Optionen zur Verfügung, die ich letztlich auf Remix, Next.js und Astro eingrenzte.

Ich könnte eine ganze Blog‑Serie über meinen Evaluationsprozess schreiben, aber ich fasse es hier zusammen:

Ich habe Astro gewählt, weil ich damit schnell sinnvolle Dinge erledigen konnte.

Das API‑Design ist erfrischend simpel. Es bietet ein gutes Gleichgewicht zwischen Flexibilität und durchdachten Design‑Entscheidungen.

Es war beruhigend, dass Astro keinerlei offensichtliche Cloud‑Voreingenommenheit oder Framework‑Agenda aufweist.

Astro war nicht die einzige Technologie, die ich eingesetzt habe; hier ein vollständiger Überblick über den Stack:

Astro: Lernkurve und Kernfunktionen

Astro wurde schnell zum Grundpfeiler meines Upgrades.

Hier sind einige Schlüssel‑Features, die ich besonders nützlich fand:

Einige Dinge überraschten mich etwas, etwa das Styling um Astros injiziertes Markup und die Wirkung von display:contents.

<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>

Vergleich von .astro‑Dateien und Client‑Komponenten

Astro‑Komponenten sind im Wesentlichen HTML‑Templates mit einem leistungsstarken Komponenten‑ und Props‑Muster. Sie können Daten zur Build‑Zeit holen, auf Backend‑Ressourcen zugreifen und bestimmte sensible Informationen verborgen halten.

Der einfachste Weg, Astro‑.astro‑Komponenten zu verstehen, ist der Vergleich mit client‑seitigen Komponenten (React, Vue, Svelte usw.).

Was muss erledigt werden?.astro‑KomponenteClient‑Komponente
HTML mit starkem Template‑+‑Komponenten‑Muster erzeugen✅❌
Daten zur Build‑Zeit holen✅❌
Direkt auf Backend‑Ressourcen zugreifen✅❌
Sensitive Informationen verbergen (Access‑Tokens, API‑Keys usw.)✅❌
Client‑seitiges JavaScript reduzieren✅❌
Client‑Komponenten nutzen (React, Vue, Svelte usw.)✅✅
Interaktivität und Event‑Listener hinzufügen (onClick(), onChange() usw.)❌✅
State‑ und Lifecycle‑Effekte verwenden (useState(), useReducer(), useEffect() usw.)❌✅
Nur‑Browser‑APIs verwenden❌✅
Custom‑Hooks, die von State, Effects oder nur‑Browser‑APIs abhängen❌✅

Modernes CSS: Wow

Zurück zum Frontend‑Entwickeln war ich von den Fortschritten im nativen CSS begeistert:

Search: Pagefind

Eine Seitensuche zu implementieren, ohne Drittanbieter‑Dienste oder Datenbank‑Hosting, schien eine spaßige Herausforderung zu sein. Schließlich habe ich noch nicht 10 000 Beiträge zu indexieren (noch nicht).

Beim Durchstöbern der Astro‑Community‑Integrationen bin ich auf ein fantastisches Tool gestoßen, das ich gerne früher gekannt hätte: Pagefind.

Nur wenige Werkzeuge lösen ein Problem so gut, wie Pagefind die lokale Seitensuche löst.

Die Implementierung von Pagefind ist überraschend einfach – ein echter Genuss. Es lässt sich in jedem statischen Seiteninhalt integrieren, und Sie können entscheiden, ob Sie die Standard‑UI verwenden oder eine komplett eigene Oberfläche bauen wollen.

Damit war sofort alles abgedeckt, was ich brauchte. Die Integration dauerte nur wenige Minuten, und der meiste Aufwand bestand darin, ein <div id="search"></div>‑Tag einzufügen und etwas Styling hinzuzufügen!

Kommentare: Utterances

Leider musste ich mich von Disqus und den über Jahre angesammelten Kommentaren verabschieden.

Ich wollte mehr Kontrolle und Transparenz über die Drittanbieter‑Skripte auf meiner Seite.

Außerdem muss es einfach und wartbar bleiben.

Das brachte mich dazu, den fantastischen Utterances-Dienst zu wählen. Sein auf GitHub‑Issues basierendes Kommentarsystem passt gut zu meinem Publikum. Außerdem ist er leicht einzurichten und kostenlos.

Tailwind: Bedauern

Es gibt nur ein Stück Technologie, das ich zunehmend bereue zu verwenden: Tailwind.

Im Laufe der Zeit spüre ich den Kostenunterschied zwischen Schreiben und Pflegen. Tailwind lässt sich sehr schnell schreiben, aber sobald es komplex genug wird, kann es mühsam zu lesen und zu erweitern sein.

Fazit

Mein altes Gatsby‑v1‑Projekt auf einen modernen Stack rund um Astro zu migrieren war ein spaßiges Erlebnis. 10/10 würde ich es weiterempfehlen.

Wenn Sie ein altes Projekt aktualisieren oder eine neue statische (oder hybride) Website bauen wollen, sollten Sie sich Astro unbedingt ansehen. Der Lernaufwand kann gelegentlich hoch sein, aber die Vorteile in puncto Performance, Entwickler‑Erlebnis und Zukunftssicherheit des Projekts rechtfertigen den Aufwand voll und ganz.

Loading comments...