Play with Statamic

Start am 18. Oktober 2024

Ich habe es mit etwas herumprobieren nun endlich geschafft, Statamic lokal zu installieren.

Habe von Statamic das erste mal Ende 2023 gehört. Ein Kollege hat mir im CoWorking kurz mal gezeigt wie das Backend aussieht. Damals dachte ich mir: „Boah, richtig cool und aufgeräumt. Aber das kriege ich mit WordPress Custom Post Types auch hin“.

Das Interesse war aber geweckt. Ich schaute mir die nächsten Wochen ab und zu mal die Statamic Doku und verschiedene Videos an. Da ich damals viele Kundenprojekte hatte und ich sehr effizient bin mit meinem WordPress-Tech-Stack, interessierte es mich nicht weiter, da ich keinen Mehrwert darin sah.

Seit längerem möchte ich ein kleines Nebenbusiness aufziehen, in welchem ich Kunden Fertig-Webauftritte anbiete. Bisher konnte ich mich nicht dazu aufraffen, das mit WordPress zu starten. Es wäre alles ready. Aber bei WordPress habe ich seit 2-3 Jahren immer das Gefühl, dass ich quasi den ganzen Stack jedes Jahr anpassen kann, weil es noch effizienter und flexibler wird. Die Weiterentwicklungen sind so rasant. Zudem nervt es langsam etwas mit den Core-Updates und dem immer prüfen müssen, ob denn nach Updates alles noch korrekt funktioniert.

Das ist nicht weiter schlimm und gehört bei WordPress dazu. Und von 1000 Updates habe ich geschätzt mal bei 10 Updates ein Problem. Aber dank Staging/Backups und abwarten vor Aktualisierungen, ist das kein Problem.

Trotzdem finde ich, möchte ich dann nicht ständig alle 5-6 Monate Sicherheitsupdates machen müssen bei den Websites des Neben-Businesses. Das wird mir zu doof.

Auch deshalb habe ich mich nun für andere Lösungen umgeschaut. Nach vielem hin- und her mit Strapi, Contentful, Payload und Grav, bin ich dann wieder bei Statamic gelandet. Es muss nach mir nicht mehr 100% Open Source sein. Naja, ist es ja irgendwie trotzdem. Die 275$ pro Website und dann jährlich noch 65$ im Jahr sind auch mehr als gerechtfertigt und jeden Cent wert.

Item. Ich habe es dann am 18. Oktober auch mal geschafft, Statamic via Laravel Herd lokal zu installieren. Nun habe ich LocalWP und Laravel Herd installiert. Beides prima. Möchte für WordPress bei LocalWP bleiben, da das schon extrem schnell geht damit. Ich kann einfach nicht beides gleichzeitig laufen lassen wegen den Ports, das stört aber auch nicht, da ich entweder an Statamic oder an WordPress arbeite.

Erste Fragen an Statamic

Diese Punkte möchte ich klären:

  • Wie funktionieren Formulare? Wie werden die Versendet? Wohin gehen die Einträge? Können diese eingesehen werden?
  • Wie funktioniert Mehrsprachigkeit? Sprachwechsler, Lokalisierung etc.
  • Wie baue ich ein einfaches responsives Mega Menu?
  • Kann ich scss nutzen? Wie leicht lässt sich mit CSS arbeiten, Tailwind etc?
  • Wie funktioniert die Arbeit mit Bildern, .webp, .avif – srcset etc?

Ich glaube das ist alles relativ schnell geklärt. Mal schauen. Ich spiele nun einfach etwas damit herum und teste alles aus.

Edit nach zwei Stunden später.
Omg ist das Teil mächtig. Ist ja krass. Schade, probiere ich das erst jetzt aus.

Im Vergleich zu WordPress

Aus meiner Sicht: Dein Skill als Entwickler entscheidet über alles. Bei WordPress kannst du öfter mal auf vorgefertigte Lösungen greifen.

Das ist wie ein ACF Pro10 auf Steroiden, wobei du alles selbst entscheidest. Die Grundidee mit den Collections, Navigations, Taxonomies, Assets und Globals ist für WordPress Entwickler einfach zu verstehen. Es ist vom Prinzip änhlich aufgebaut:

  • Collections = Post Types wie Seiten, Beiträge, News, Referenzen, Mitarbeiter etc.
  • Navigations = Menus in WordPress, wobei du gleich eigene Menu-Locations anlegen kannst (Main, Secondary, Footer etc.)
  • Taxonomies = Nicht direkt nur an vordefinierte Post Types wie Beiträge angelegt. Du kannst dir damit für alle Collections das erstellen lassen, was du willst. Kategorien, Schlagworte, Filter, Variationen – alles möglich.
  • Assets = Die Mediathek
  • Globals = Gibt es so in WordPress nicht direkt. Da kannst du dir eine ACF Options-Page vorstellen, in welchem du bspw. Kontaktangaben, Social Media Links, E-Mail und Tel-Links ausgeben lassen kannst, welche dann überall auf der Website verwendet werden.

Zusätzlich dazu gibt es standardmässig noch Blueprints, Fieldsets und Forms

  • Blueprints = Das sind wie ACF Gruppen, wobei du für alles in Statamic beliebige Felder anlegen kannst.
  • Fieldsets = Habe ich noch nicht ganz verstanden. Ich denke, die können zusätzlich zu den Blueprints angelegt werden, damit dort wirklich fast alles damit erreicht werden kann.
  • Forms = Wie eine Art Formularplugin, mit welchem eigene Formulare angelegt werden können.

Das coole am Statamic Backend. Ich kann alles so einstellen wie ich möchte. Ich kann alle Menüeinträge umbenennen, an beliebige Reihenfolge schieben, neue hinzufügen, neue Sections erstellen etc. Richtig cool.

Zudem finde ich das „Pin to Favourites“ auch richtig praktisch. Es geht alles so schnell und fix. Richtig cool!

Zweiter Tag: 19. Oktober 2024

Es ist so mächtig!

  • Ich kann entweder nur in VSCode Arbeiten, oder alles via GUI steuern und zusammenklicken. Perfekte Mischung!
  • Die Idee mit den antlers & partials ist richtig genial gelöst. Simpel aber unendlich flexibel.
  • TailwindCSS wird automatisch mitinstalliert und ist schon eingerichtet. Ich glaube auch deswegen sehen irgendwie alle Statamic Websites schick und perfekt aus 😉

Ressources – Views

  • layout.antlers.html = das ist quasi das Main Template / Catch All Template
  • home.antlers.html = das Frontpage/Home Template
  • default.antlers.html = dort wird nur content ausgespielt

Ich kann nun innerhalb vom layout verschiedene beliebige partials einblenden lassen.

Die erstelle ich entweder in einem neuen partials Ordner innerhalb von views, oder ich lege diese direkt im views Ordner ab und füge davor ein „_“ ein.

Also views > partials und dann nav.antlers.html / footer-antlers.html etc.

Oder views > _nav.antlers.html / _footer.antlers.html

Tailwind nutzen

Hier noch wichtig, dass du via Terminal im Projekt noch folgendes eingibst. Jedes mal wenn du wieder von neuem code schreibst 😉

Bash
npm install && npm run watch

Ab da funktioniert das dann auch mit neuen Tailwind Klassen perfekt.

22. Oktober

Es ist nun einige Tage her. Seit dem ersten herumspielen ist folgendes passiert:

  • Habe verschiedene Templates erstellt
  • Habe verschiedene Navigationen erstellt und dabei alpine.js integriert
  • Viel Dokus lesen: tailwind, alpine.js, statamic, laravel
  • Habe mich auch wieder mal mit Laravel auseinandergesetzt und damit rumgespielt
  • Verschiedene Blogs und Talks zu Statamic angeschaut
  • LaravelForge und Ploin angeschaut
  • Discord und Reddit beigetreten und die Diskussionen durchforstet
  • Geschaut, wie ich eigene Skripte einbinden kann und damit herumgespielt

Was noch offen ist:

  • Ich muss mal irgendwie meine lokale Entwicklungsumgebung säubern.
    • Pfade zu den Tools anpassen, damit composer, statamic cli und npm alle korrekt laufen. Bei neuen Projekten muss ich immer die Pfade nochmal neu einfügen
  • Blade vs. Antlers anschauen
  • Kann ich hinter/unter Statamic Laravel sonst gleich nutzen oder gibt es Einschränkungen?
  • Meine GitHub Repos mal aufräumen und für die momentanen Projekte auch noch ein Repo erstellen
  • VSCode aufräumen und Extensions richtig einstellen

« zurück zur Übersicht