Installation und Konfiguration von Statamic in der ServBay-Umgebung

Statamic ist ein modernes Content-Management-System (CMS) auf Basis des Laravel-Frameworks, das durch seine Flexibilität und leistungsstarken Funktionen besticht. Es ist besonders geeignet für den Aufbau unterschiedlichster Websites. Ein hervorstechendes Merkmal von Statamic ist die standardmäßige Speicherung von Inhalten und Konfigurationen im Dateisystem. Alternativ kann auch eine Datenbank genutzt werden.

In dieser Anleitung erfahren Sie Schritt für Schritt, wie Sie Statamic im umfassenden lokalen Webentwicklungswerkzeug ServBay mittels Composer installieren und einrichten. ServBay bietet die notwendige PHP-Umgebung, integrierte Composer-Unterstützung und eine einfache Verwaltung von Website-Konfigurationen – ideal für Statamic-Projekte.

Schritte zur Installation von Statamic

Die Einrichtung von Statamic im ServBay-Umfeld ist unkompliziert und effizient. Befolgen Sie dazu die folgenden Schritte:

Schritt 1: Projektverzeichnis anlegen

Legen Sie zunächst im ServBay-Webwurzelverzeichnis /Applications/ServBay/www ein neues Unterverzeichnis für Ihr Statamic-Projekt an. Öffnen Sie das Terminal und führen Sie folgende Befehle aus:

cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

Damit wechseln Sie in das Standard-Webverzeichnis von ServBay, erstellen einen neuen Ordner namens servbay-statamic-app und navigieren direkt hinein.

Schritt 2: Statamic-Projekt mit Composer erstellen

Composer ist in ServBay bereits vorinstalliert (Composer-Anleitung). Composer verwaltet PHP-Abhängigkeiten, sodass Sie direkt damit Ihr Statamic-Projekt anlegen können.

Führen Sie im gerade erstellten Verzeichnis servbay-statamic-app den folgenden Composer-Befehl aus:

composer create-project statamic/statamic .

Dieser Befehl lädt die aktuelle Statamic-Version samt Abhängigkeiten und installiert alles in das aktuelle Verzeichnis (.). Warten Sie, bis Download und Installation abgeschlossen sind.

Schritt 3: Webserver konfigurieren (Website in ServBay hinzufügen)

Damit ServBay Ihr Statamic-Projekt ausliefern kann, müssen Sie eine neue Website-Konfiguration in ServBay anlegen.

1. ServBay-App starten: Öffnen Sie die ServBay Desktop-Anwendung.

2. Zum Reiter „Websites“ navigieren: Klicken Sie im oberen Bereich der Oberfläche auf „Websites“ (Hinweis: In älteren Versionen heißt dieser Reiter eventuell „Hosts“).

3. Neue Website hinzufügen: Klicken Sie unten links auf das Pluszeichen (+), um eine neue Website anzulegen.

4. Websitedaten eintragen: Im erscheinenden Konfigurationsfenster füllen Sie folgende Felder aus:

   • Name: Eine leicht erkennbare Bezeichnung, z. B. My Statamic Site.
   • Domain: Der lokale Domainname für Ihr Projekt, empfohlen wird .local am Ende, z. B. servbay-statamic.local. ServBay richtet die lokale DNS-Auflösung automatisch ein.
   • Websitetyp: Wählen Sie PHP.
   • PHP-Version: Die zur Statamic-Version passende PHP-Version (empfohlen: aktuelle, stabile Version).
   • Webwurzelverzeichnis: Dieser Punkt ist besonders wichtig. Die Statamic-Einstiegsdatei index.php befindet sich im public-Unterverzeichnis des Projekts. Das Root-Verzeichnis muss daher lauten: /Applications/ServBay/www/servbay-statamic-app/public.

5. Speichern und anwenden: Klicken Sie auf „Speichern“. ServBay fordert Sie eventuell auf, die Dienste neu zu starten, um die Änderung zu übernehmen (der Webserver ist wahlweise Caddy oder Nginx). Folgen Sie der Aufforderung, damit die neue Website-Konfiguration aktiv wird.

Schritt 4: Statamic-Umgebung einrichten

Im Projektverzeichnis verwendet Statamic die .env-Datei für Umgebungs-Einstellungen (etwa App Key, Datenbank-Zugangsdaten usw.).

1. Umgebungsdatei kopieren: Im Statamic-Projektfolder finden Sie die Beispieldatei .env.example. Kopieren Sie diese im Terminal im Wurzelverzeichnis /Applications/ServBay/www/servbay-statamic-app mit folgendem Befehl:

   cp .env.example .env

2. App Key generieren: Laravel/Statamic benötigt einen einzigartigen Anwendungsschlüssel für Sicherheitszwecke (z. B. Verschlüsselung von Sessions oder sensiblen Daten). Erzeugen Sie diesen Key im Projektverzeichnis per Artisan-Kommando:

   php artisan key:generate

   Der Befehl erzeugt und speichert den Wert für APP_KEY automatisch in der .env-Datei.

Schritt 5: Statamic starten und aufrufen

Ihre Statamic-Website ist nun in ServBay konfiguriert und betriebsbereit.

1. Website im Browser aufrufen: Öffnen Sie Ihren Webbrowser, geben Sie die bei Schritt 3 konfigurierte Domain ein – z. B. https://servbay-statamic.local. ServBay vergibt SSL-Zertifikate automatisch (über die ServBay User CA oder Public CA), sodass HTTPS funktioniert. Die Statamic-Willkommensseite sollte jetzt angezeigt werden.

2. Zum Control Panel wechseln: Die Statamic-Adminoberfläche erreichen Sie üblicherweise über den Pfad /cp: Rufen Sie https://servbay-statamic.local/cp auf. Hier erscheint die Anmelde- oder Einrichtungsseite.

3. Admin-Account anlegen: Beim ersten Besuch des Control Panels werden Sie aufgefordert, einen Administrator-Account einzurichten. Folgen Sie den Anweisungen, vergeben Sie Benutzername, Passwort und E-Mail-Adresse und klicken Sie auf „Konto erstellen“. Anschließend haben Sie Zugriff auf die Verwaltung Ihrer Statamic-Site.

Schritt 6: Plugins & Themes installieren (optional)

Statamic bietet ein umfangreiches Plugin- und Theme-Ökosystem zur Funktionserweiterung und Designanpassung Ihres Projekts.

1. Plugins installieren: Nach dem Login ins Control Panel können Plugins über die grafische Oberfläche (meist im linken Navigationsbereich zu finden) oder per Composer-Kommando hinzugefügt werden. Die Installation über das Control Panel ist in der Regel besonders komfortabel.
2. Themes installieren: Auf ähnliche Weise fügen Sie Themes/Gestaltungen entweder via Control Panel oder durch Ablegen von Dateien im vorgegebenen Theme-Verzeichnis hinzu.

Websites mit Statamic gestalten

Sind Statamic und Umgebung eingerichtet, können Sie die Features für den Webprojektaufbau nutzen. Nachfolgend ein Überblick wichtiger Einstiegsfunktionen:

Inhalte und Collections anlegen

Statamic nutzt sogenannte „Collections“, um Inhalte zu organisieren – vergleichbar mit Seitentypen oder Beitragsarten in klassischen CMS.

1. Collection anlegen: Im Admin-Bereich navigieren Sie zu „Inhalte“ → „Collections“ und klicken auf „Collection anlegen“. Legen Sie Name (z. B. Posts, Pages) und weitere Eigenschaften (wie Routing, Feld-Blueprints etc.) fest.
2. Content Item erstellen: Innerhalb der Collection klicken Sie auf „Neu“, um einzelne Seiten oder Beiträge anzulegen und die von Ihnen definierten Felder auszufüllen.

Navigationen konfigurieren

Erstellen und verwalten Sie die Navigationsstruktur Ihrer Site direkt in Statamic.

1. Navigation anlegen: Unter „Inhalte“ → „Navigation“ klicken Sie auf „Navigation anlegen“. Geben Sie der Navigation z. B. den Namen Main Navigation.
2. Menüpunkte hinzufügen: Ziehen Sie Inhalte aus Collections oder einzelne Seiten als Navigationspunkte in die Struktur und ordnen Sie die Hierarchie per Drag-and-drop an.

Templates und Styles individuell anpassen

Da Statamic auf Laravel basiert, verwenden Sie das Blade-Template-System, um Layout und Inhalt gezielt zu steuern.

1. Templates bearbeiten: Views befinden sich im Ordner resources/views im Projektverzeichnis. Entsprechend der Statamic-Struktur (i. d. R. layouts, partials, collections usw.) passen Sie dort Blade-Dateien (.blade.php) für das HTML-Markup an. Ein Beispiel: Bearbeiten Sie resources/views/layouts/default.blade.php für das globale Layout.

   <!-- resources/views/layouts/default.blade.php -->
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ $title ?? 'My Statamic Site' }}</title>
       {{-- Eingebundenes, kompiliertes CSS --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Beispiel: Rendere die Navigation namens 'main_navigation' --}}
           @inject('nav', 'Statamic\View\ViewServiceProvider')
           @if ($main_navigation = $nav->navigation('main_navigation'))
               <nav>
                   <ul>
                       @foreach ($main_navigation->tree() as $item)
                           <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                       @endforeach
                   </ul>
               </nav>
           @endif
       </header>
       <main>
           {{-- Page-Inhalt rendern --}}
           @yield('content')
       </main>
       {{-- Eingebundenes kompiliertes JavaScript --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Eigene Styles & Skripte hinzufügen: Statamic-Projekte beinhalten meist Laravel Mix oder Vite für das Frontend-Building. Die Rohdateien für CSS und JS liegen standardmäßig in resources/css bzw. resources/js.

   Im Beispiel können Sie in resources/css/app.css eigene Styles hinzufügen:

   /* resources/css/app.css */
   body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.6;
       color: #333;
       margin: 0;
       padding: 20px;
   }
   nav ul {
       list-style: none;
       padding: 0;
   }
   nav ul li {
       display: inline;
       margin-right: 15px;
   }

   Und in resources/js/app.js Ihr JavaScript einbinden:

   // resources/js/app.js
   console.log('Statamic-Frontend-Assets geladen!');
   
   // Beispiel: Einfache Interaktivität
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Hover über: ${item.textContent}`);
           });
       });
   });

3. Frontend-Assets kompilieren: Um CSS und JS in browserkompatible Dateien umzuwandeln, führen Sie die entsprechenden Befehle aus. Statamic-Projekte enthalten i. d. R. eine package.json – Sie können npm oder yarn verwenden, um Abhängigkeiten zu installieren und zu kompilieren. Da Node.js von ServBay unterstützt wird, genügt:

   npm install
   npm run dev

   npm install installiert alle Dependenzen (z. B. Laravel Mix/Vite, Tailwind, Vue/React usw.). Mit npm run dev erfolgt das Build für die Entwicklungsumgebung – unminifizierte Dateien, ggf. inklusive Sourcemaps zur Vereinfachung des Debuggens. Für den Produktiveinsatz nutzen Sie npm run prod oder npm run build.

Fazit

Mit diesen Schritten haben Sie erfolgreich Statamic im ServBay-Entwicklungsumfeld installiert, konfiguriert und einen Überblick über die Grundfunktionen erhalten. ServBay liefert ein Rundum-sorglos-Paket (PHP, Composer, Webserver, komfortable Verwaltung sowie Node.js-Unterstützung) und erleichtert die lokale Entwicklung mit Statamic wesentlich. Nun können Sie von der flexiblen Dateistruktur und den stark erweiterbaren Features profitieren und Ihr Websiteprojekt schnell und effektiv iterieren.