Automad: Ein Flat-File-CMS für Ästheten

Das Flat-File-CMS Automad legt einen besonderen Fokus auf ein hochwertiges Design. Die Handhabung ist für Autoren etwas anspruchsvoller. Dafür bietet das kleine System eine erstaunliche Gestaltungsfreiheit und ermöglicht komplexe Layouts, wie man sie vor allem aus der Kreativ-Szene kennt.

Automad wird seit 2013 von Marc Anton Dahmen entwickelt. Nach einer längeren Pause ist im Jahr 2018 eine rundum erneuerte Version von Automad veröffentlicht worden. Seitdem wird das System kontinuierlich weiterentwickelt.

#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. Sections können als Design-Rahmen für Content-Blöcke verstanden werden. Sie lassen sich über ein Icon in der Edit-Bar einfügen. In eine Section können sowohl weitere Sections, als auch Content-Blöcke positioniert und verschachtelt werden. Mit solchen Sections lassen sich beispielsweise Spalten im Card-Layout oder auch Action-Buttons vor Bildhintergründen erstellen.

Der Block-Editor von Automad wirkt ausgesprochen intuitiv. Wer komplexe Layouts mit Sections erstellen will, der wird etwas Zeit für die Einarbeitung benötigen. Neben der generellen Funktionsweise des Section-Editors muss man sich zusätzlich mit den vielen Einstellungsmöglichkeiten vertraut machen. Hinzu kommt eine mitunter sehr tiefe Verschachtelung komplexer Layout-Elemente, sodass man die eigentlichen Inhalte oft erst im dritten, vierten oder fünften Overlay bearbeiten kann. Hilfreich ist dabei der WYSIWYG-Ansatz der Editoren und die Option, die Inhalte in der fertigen Seitenvorschau über einen In-Page-Edit-Mode zu bearbeiten.

Den Spagat zwischen der gestalterischen Freiheit und einer komplexen Bedienung müssen alle Systeme meistern, die ein Page-Builder-Konzept verfolgen. Beispiele dafür sind WordPress, Webflow oder auch High-End-Lösungen wie der Adobe Experience Manager. Bei Automad lassen sich schon mit dem Block-Editor recht intuitiv hochwertige Designs erstellen. Wer die volle Flexibilität von Automad mit den Sections ausnutzen will, wird sicher etwas zu kämpfen haben. Es gibt jedoch unter den Flat-File-CMS kein anderes System, das einem Autoren ohne die Unterstützung durch einen Entwickler derartige Gestaltungsspielräume bietet.

#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.

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.

#Einsatzsfelder 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.