Automad: Ein Flat-File-CMS für Ästheten
Das Flat-File-CMS Automad ist ein kleiner und eleganter Web-Baukasten, mit dem Nutzer sehr individuelle Webauftritte mit hochwertigen Designs erstellen können. Die Autorenoberfläche erfordert etwas Einarbeitung, bietet jedoch sehr große Gestaltungsfreiheiten und erlaubt die Erstellung komplexer Layouts in Eigenregie.
Automad wird seit 2013 von Marc Anton Dahmen entwickelt. Im Jahr 2024 wurde ein Release Candidate für eine rundum erneuerte Version 2 vergestellt, die die aktuelle Version 1 aus dem Jahr 2018 ablösen soll. Das System wird kontinuierlich entwickelt und ist damit eine sichere Wahl.
Der Flat-File Guide bietet auf über 80 Seiten einen Marktüberblick und stellt sieben Flat-File-CMS im Detail vor. Jetzt kostenlos und ohne Registrierung herunterladen.
Automad für Autoren
Automad bietet den Autoren eine hohe Flexibilität bei der Gestaltung von Webseiten. Selbst komplexe Layouts mit verschiedenen Abschnitten, Spalten und verschachtelten Elementen sind mit dem kleinen CMS möglich.
Das Dashboard präsentiert sich im reduzierten Schwarz-Weiß-Look. Die Gewichtung der einzelnen Elemente ist etwas eigenwillig: Im Haupt-Tab "Data and Settings" werden die Einstellungen, Konfigurationen und die Inhalte gleichwertig im Akkordeon-Stil dargestellt. Im zweiten Tab "Uploads" können Bilder und Dateien zu einer Seite hochgeladen werden.
Im Content-Bereich arbeitet der Autor bei Automad mit Blöcken. Der Block-Editor ist recht intuitiv und die Block-Auswahl bietet bereits viel Spielraum: Neben Überschriften, Listen oder Tabellen gibt es zum Beispiel Bilder, Bild-Gallerien, Slideshows, Buttons, Pagelists und sogar ein E-Mail-Formular. Alle Elemente werden visuell dargestellt und lassen sich ohne Kenntnisse einer Auszeichnungssprache wie Markdown bearbeiten. Bei einigen Elementen sind noch zusätzliche Layout-Varianten wie zum Beispiel die Text-Ausrichtung wählbar.
Noch mehr Flexibilität bieten die sogenannten Sections, die im Editor ausgewählt werden können. Sections werden als Design-Rahmen für Content-Blöcke genutzt. Mit solchen Sections lassen sich beispielsweise Spalten im Card-Layout oder auch Action-Buttons vor Bildhintergründen erstellen. Die Gestaltung von Layouts mit Hilfe von Sections erfordert allerdings etwas Einarbeitung.
Neben diesen Content-Elementen bietet Automad über die Tabs "Settings" und "Customize" sehr viele weitere Bearbeitungsmöglichkeiten für einzelne Seiten. Zum Beispiel lässt sich für jede Seite im Detail festlegen, welche Navigationselemente angezeigt werden sollen.
Ausblick auf Version 2
Mit der kommenden Version 2 führt Automad viele Verbesserungen für Autoren ein. Die Accordion-Navigation wurde durch Tabs ersetzt und die Anordnung der Elemente wirkt insgesamt intuitiver. Die Sortierung der Seiten in der Navigation kann künftig über ein Drag & Drop erfolgen, und auch die tiefe Verschachtelung von Overlays für Sections wurde aufgelöst.
Hinzu kommen zahlreiche neue Features, besonders nennenswert sind integrierte Revisionen für einzelne Seiten, ein Bild-Editor und eine Unterstützung von Multi-Language-Seiten.
Fazit: Automad bietet unter allen Flat-File-CMS die größten Gestaltungsfreiheiten für Autoren und kann als kleiner Website-Builder charakterisiert werden. Bei design-orientierten Webseiten kommt diese Flexibilität voll zur Geltung. Auch für informationslastige Webseiten mit geringeren Gestaltungsansprüchen kann Automad eine sinnvolle Wahl sein. In diesem Fall sollte man jedoch auch andere Systeme in Erwägung ziehen, da die in diesem Fall eher überflüssigen Gestaltungsmöglichkeiten Anwendungsfehler provozieren könnten.
Automad für Entwickler
Automad läuft mit PHP ab Version 7.4 und unterstützt die Server Apache und Nginx. Im Backend verzichtet das System auf ein separates Framework und nutzt mit Urlify und PHP-Markdown nur zwei externe Bibliotheken. Im Frontend bzw. für die Autorenoberfläche setzt Automad auf JQuery, UI-Kit und Editor.js.
Die kommende Version 2 von Automad läuft ab PHP 8.2 und hat externe Dependencies wie JQuery und UI-Kit durch Typescript und Web-Components ersetzt. Damit bietet Automad 2 derzeit wohl den modernsten Tech-Stack in der Flat-File-Welt.
Automad lässt recht einfach manuell, per Composer oder mit Docker installieren. Wie bei vielen Flat-File-Systemen sind keine großen Konfigurationen nötig, sondern man entpackt die Dateien, navigiert zur Seite und erstellt über ein Formular einen initialen User. Anders als üblich wird bei Automad nicht direkt ein User angelegt, sondern das System generiert eine PHP-Datei mit den Account-Details, die man anschließend in den Config-Ordner ablegen muss. Bei einer Installation über Composer erfolgt dieser Schritt automatisch.
Automad geht in vieler Hinsicht eigene Wege. Das fängt bereits bei der Speicherung von Inhalten an. Automad nutzt dazu txt-Dateien. Darin findet man die Konfigurationen als einfache Werte-Paare. Die Inhalte des Block-Editors werden im JSON-Format mit den Präfixen +hero: und +main: abgespeichert. Das JSON-Format stammt von dem recht neuen und beliebten Script editor.js, auf dem das gesamte Editor-Konzept von Automad beruht. Das JSON-Format bietet natürlich eine enorme Flexibilität bei der Content-Erstellung und muss nicht mit den Beschränkungen des Markdown-Formats leben. Allerdings stellt das JSON-Format auch eine Hürde für Nicht-Entwickler dar, denn eine Bearbeitung der Inhalte außerhalb von Automad ist kaum möglich.
Einen eigenen Weg verfolgt Automad auch mit einer eigenen Sprache für Templates. Während sich Statamic mit seiner Template-Sprache Antler stark an Twig orientiert, weicht Automad etwas mehr von den verbreiteten Vorbildern ab. Das verkürzte Template einer Pageslist kann wie folgt aussehen:
<@ elements/header.php @>
<@ elements/navbar.php @>
<section class="section">
<div class="container">
<div class="columns is-8 is-variable">
<main class="column is-three-quarters content">
<h1 class="am-block title">
@{ title }
</h1>
<p class="am-block is-size-5">
Building a portfolio or blog page is a very common task.
</p>
<@ newPagelist {
filter: @{ ?filter },
match: '{":level": "/(1|2)/"}',
search: @{ ?search },
sort: @{ ?sort | def ('date desc') }
} @>
<div class="columns is-multiline is-variable">
<@ foreach in pagelist @>
<div class="column is-one-third is-flex">
<div class="card is-flex-grow-1">
<div class="card-content">
<div class="content">
<h3>@{ title }</h3>
<span class="is-size-7">
@{ date | dateFormat ('F Y') }
</span>
<p class="mt-3 mb-5">
@{ +main | findFirstParagraph | 150 }
</p>
<a href="@{ url }" class="button">More ...</a>
</div>
</div>
</div>
</div>
<@ end @>
</div>
</main>
<nav class="column is-one-quater">
<@ elements/menu.php @>
</nav>
</div>
</div>
</section>
<@ elements/footer.php @>Die Template-Sprache bietet Statements und Content-Variablen. Content-Variablen ähneln dem Twig-Muster einer Variabel mit folgenden Filtern, die durch Pipes getrennt werden. Allerdings werden die Variablen mit einem at-Zeichen eingeleitet:
@{ variable|filter }@{ date | dateFormat ('F Y') }
Bei den Statements gibt es fünf Varianten:
- snippet definitions
- includes
- function calls
- extension methods
- control structures
Die Varianten für Statements sind relativ selbsterklärend und sehen im Code wie folgt aus:
<@ snippet @>
<@ file.php @>
<@ function { key: 'Value' } @>
<@ namespace/name { options } @>
<@ foreach in pagelist @>
...
<@ end @>Im Gegensatz zu den meisten anderen Flat-File-Systemen bietet Automad kein Event-System an, mit dem üblicherweise Plugins gebaut werden. Es ist jedoch möglich, das System über die Extension Methods zu erweitern. Beispiele für Extensions findet man bei den Packages von Automad.
Zusätzlich kann man für Automad einen "Headless-Mode" aktivieren. Nach Aktivierung werden im Frontend beim Aufruf einer URL einige Angaben im JSON-Format zurückgegeben, beispielsweise Titel, Meta-Angaben oder Teile der Navigationsstruktur mit Children und Siblings. Eine Authentifizierung ist nicht vorgesehen und die Dokumentation zu dem Headless-Mode ist insgesamt etwas knapp gehalten.
Wer in die Template-Entwicklung von Automad einsteigen will, der findet neben den Informationen in der Dokumentation einen ausführlichen Gast-Beitrag von Marc-Anton Dahmen auf CSS-Tricks.
Automad für Nicht-Entwickler
Mit seinem Page-Builder-Ansatz und den sehr flexiblen Layout-Optionen gehört Automad zu den ganz wenigen Flat-File-CMS, die den Autoren auch ohne Rückgriff auf einen Entwicklern eine sehr hohe Gestaltungsfreiheit bieten. Natürlich bewegen sich Autoren immer noch im Rahmen eines Themes. Innerhalb des Themes ermöglichen die vielen Optionen jedoch eine sehr weitgehende Individualisierung und Gestaltung der Webseite.
Für Entwickler oder Einsteiger ist Automad vergleichsweise einfach zu erlernen. Man arbeitet allerdings mit recht eigenen Konzepten, die sich natürlich bis zu einem gewissen Grad auf andere Systeme abstrahieren lassen.
Kosten
Automad und alle seine Themes sind Open Source und kostenfrei. Die Entwicklung dürfte vergleichsweise günstig sein. Zwar wird man durch die eher geringe Bekanntheit des Systems kaum spezialisierte Entwickler finden. Die Einarbeitung in das System dürfte jedoch nur wenige Stunden erfordern.
Einsatzfelder für Automad
Automad ist eine sehr gute Alternative zu WordPress, wenn es um gestalterisch anspruchsvolle Webseiten aus dem Kreativ-Bereich geht: Selbstständige Designer, Künstler und andere Kreativ-Berufe, aber auch kleinere kulturelle Einrichtungen oder kleine Unternehmen aus dem Kreativ-Sektor, die eine aufwändigere Gestaltung wünschen. Die Herausforderung bei der Erstellung solcher Designs wächst zwar mit deren Komplexität. Doch Automad bietet unter den Flat-File-Systemen vermutlich die größten Gestaltungsfreiheiten ohne Zuhilfenahme eines Entwicklers an.
Fazit: Vorteile und Nachteile von Automad
Beim Testen haben uns die folgenden Vorteile besonders gefallen:
- Regelmäßige und aktive Weiterentwicklung.
- Sehr flexible Gestaltungsmöglichkeiten (Website-Builder).
- Elegantes Design.
- Einfache Installation von Erweiterungen über das Admin-Interface.
- Seiten-Sortierung per Drag&Drop (ab Version 2).
- Revision von Seiten integriert (ab Version 2).
- Unterstützung von Mehrsprachigkeit (ab Version 2).
- Moderner Tech-Stack (ab Version 2).
Welche möglichen Nachteile uns beim Testen aufgefallen sind:
- Gestaltungsmöglichkeiten erfordern Einarbeitung.
- Speicherung von Inhalten in JSON statt Markdown begrenzt Portabilität.
- Limitiertes Nutzer-Management ohne Rollen und Rechte.