Wie wurd's gemacht?

Wie man eine Seite mit 100% bei Google Lighthouse baut!

Als Entwickler haben wir nicht wirklich viel Lust, uns mit WordPress zu beschäftigen. Also haben wir einmal probiert, wie man alternativ und mit nicht zu großem Aufwand eine Seite so aufsetzen kann, dass wir sie als Entwickler einfach pflegen können.

github pages

Github pages sind eine einfache Möglichkeit, ein github-Repository als Website zu veröffentlichen. Man legt einfach ein Repository namens <org/user>.github.io an. Darin erstellt man ein index.html, und schon kanns losgehen. Die erstellte Site ist dann unter https://<org/user>.github.io erreichtbar.

Das Spannende daran ist natürlich, dass es sich immer um statische Sites handelt. Kein Overhead durch PHP, CMS oder sonstiges. Will man mehr, als HTML und CSS per Hand zu schreiben, ist man auf einen statisches Site-Generator angewiesen. Github pages unterstützen Jekyll.

Cool ist dann eben, dass man seinen Content einfach durch push ins Repository schreibt. Als Entwickler fühlt sich das richtig an. Man hat alle Vorzüge von git. Z.B. kann man Pull-Requests nutzen, um Beiträge reviewen zu lassen.

Jekyll

Jekyll war der erste statische Site-Generator. Mittlerweile gibt es einen ganzen Zoo, z.B. Gatsby, Hugo und natürlich Hyde. Wir bleiben aber bei Jekyll, weil die github pages das unterstützen.

Eigentlich muss man nur eine bestimmte Directory-Struktur einhalten und kann dann seine Seiten oder Blog-Beiträge als Markdown-Dateien ablegen.

Eine gute Anleitung gibt Jekyll: Github Pages.

Man kann auf sehr einfache Weise aus einer Reihe von Themes wählen.

Wir haben einfach unter layouts/default.html unser Layout als HTML mit Tailwind CSS angelegt.

Tailwind CSS

Tailwind CSS ist ein “utility-first” CSS Framework. Damit meinen die Autoren, dass man nicht, wie z.B. bei Bootstrap, CSS Klassen mit semantischer Bedeutung (input-group) hat, sondern eher Werkzeug-Klassen, die ganz konkrete optische Effekte haben (bg-white).

Das führt dazu, dass

• an einem HTML-Element ggf. ziemlich viele Klassen aufgeführt sind,
• ähnliche Elemente, z.B. auf verschiedenen Seiten, nicht automatisch gleich aussehen und
• und man sich fragt, ob man nicht gleich einen style hätte angeben können.

Der Vorteil liegt jedoch in der feinen Abwägung zwischen Gestaltungsfreiheit und Richtlinien. Für viele Werte (z.B. paddings, flex-cells, Graustufen, etc.) gibt Tailwind ein Raster vor und sorgt damit einerseits für eine einheitliche Design-Sprache. Andererseits erlaubt es, Elemente individuell zu gestalten. Damit sind Tailwind-Designs viel individueller und vermeiden den berühmten “Ach, das ist mit Bootstrap gemacht”-Effekt.