Neustart mit Gatsby & React

Mit Gatsby über den WordPress Tellerrand geschaut - was kann der Static Site Generator Gatsby

30. Januar 2020

Man sollte nie aufhören, zu lernen und was liegt da näher, sich ein wenig mit React auseinanderzusetzen.

Meine persönliche Webseite thomasgrau.com wird ab sofort mit Gatsby und React erstellt. Schon jetzt bin ich begeistert von den Möglichkeiten, die React in Zusammenspiel mit Gatsby bietet. Ein nicht unerheblicher Nebeneffekt: durch den Verzicht auf den Einsatz eines klassischen Content-Management-Systems mit zahlreichen Datenbankabfragen wird die Seite statisch ausgeliefert und ist rasend schnell.

Die Lernkurve hat es durchaus in sich - aber das Ergebnis überzeugt mich bereits.

Tailwind CSS

Erstmalig habe ich auch Tailwind CSS als "Utility-First CSS Framework" eingesetzt. Dies erfordert zwar ein wenig Umdenken bei der Gestaltung einer Webseite, aber schon jetzt gefällt mir der Ansatz sehr gut, denn der Einsatz von Tailwind CSS führt deutlich schneller und effektiver zu einem optisch ansprechenden Ergebnis.

<div class="font-sans 
            p-4 m-4 
            text-lg text-center 
            text-white bg-green-500
            hover:text-black hover:bg-red-500
            rounded-lg 
            shadow-2xl">
Mouse-over verändert Farbe
</div>
Mouse-over verändert Farbe

Markdown

Die Inhalte selbst liegen als reine "Textdateien" vor und sind in der Auszeichnungssprache Markdown verfasst. Markdown hatte ich - wie AsciiDoc - bislang nur für Dokumentationen und Notizen eingesetzt. Markdown ist mit jedem Texteditor lesbar und intuitiv verständlich.


# Eine Top-Level Überschrift 

 Hier ist ein [Linktext](https://thomasgrau.com)
 nachfolgend eine unnummerierte Liste:

 - Listenelement 1
 - Listenelement 2

Fazit

Aus festgefahrenen Mustern ausbrechen, neue Dinge lernen, ausprobieren und auch neue Wege finden. Sicherlich wäre es mir deutlich leichter gefallen, diese Seite mit WordPress oder einem anderen klassischen datenbankbasierten CMS aufzusetzen und einfach ein (dezent angepasstes) Theme zu installieren.

Der "Relaunch" dieser Webseite hat mich deutlich mehr Zeit gekostet - dafür habe ich aber auch sehr viele neue Dinge gelernt.