Installation und Konfiguration von Statamic in der ServBay-Umgebung

Was ist Statamic?

Statamic ist ein modernes Content-Management-System (CMS) basierend auf dem Laravel-Framework, das für den Aufbau verschiedener Websitetypen geeignet ist. Statamic ist bekannt für seine Flexibilität und leistungsstarken Funktionen. Es verwendet das Dateisystem zum Speichern von Inhalten, kann aber auch eine Datenbank verwenden.

Schritte zur Installation von Statamic

In diesem Artikel zeigen wir Ihnen, wie Sie Statamic in der ServBay-Umgebung mit Composer installieren und konfigurieren.

Schritt 1: Projektverzeichnis erstellen

Erstellen Sie zunächst ein neues Projektverzeichnis im www-Verzeichnis von ServBay:

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

Schritt 2: Statamic-Projekt mit Composer erstellen

Da ServBay Composer integriert hat, können wir Composer direkt verwenden, um das Statamic-Projekt zu erstellen:

composer create-project statamic/statamic .

Schritt 3: Webserver konfigurieren

1. Neue Website hinzufügen

   Öffnen Sie ServBay, klicken Sie auf den Reiter „Hosting“ und fügen Sie eine neue Website hinzu:

   • Name: My Statamic Site
   • Domain: servbay-statamic.local
   • Websitetyp: PHP
   • PHP-Version: Wählen Sie die entsprechende PHP-Version aus
   • Webseiten-Stammverzeichnis: /Applications/ServBay/www/servbay-statamic-app/public

2. Konfiguration speichern

   Speichern Sie die Konfiguration und starten Sie ServBay neu.

Schritt 4: Statamic konfigurieren

1. Umgebungsdatei bearbeiten

   Kopieren Sie die Datei .env.example im Projektstammverzeichnis zu .env:

   cp .env.example .env

2. Anwendungsschlüssel generieren

   Führen Sie den folgenden Befehl aus, um einen neuen Anwendungsschlüssel zu generieren:

   php artisan key:generate

Schritt 5: Statamic ausführen

1. Zugriff auf Statamic

   Öffnen Sie einen Browser und gehen Sie zu https://servbay-statamic.local. Dort sehen Sie die Begrüßungsseite von Statamic.

2. Zugriff auf das Control Panel

   Öffnen Sie einen Browser und gehen Sie zu https://servbay-statamic.local/cp. Dort sehen Sie die Login-Seite des Statamic-Control Panels.

3. Administratorkonto erstellen

   Folgen Sie den Anweisungen auf der Seite, um ein Administratorkonto zu erstellen. Geben Sie Benutzername, Passwort und E-Mail-Adresse ein und klicken Sie auf „Konto erstellen“.

Schritt 6: Plugins und Themes installieren

1. Plugins installieren

   Melden Sie sich im Statamic-Control Panel an, klicken Sie auf das „Plus“-Symbol und dann auf „Plugins“, um nach den gewünschten Plugins zu suchen und sie zu installieren.

2. Themes installieren

   Klicken Sie auf das „Plus“-Symbol und dann auf „Themes“. Wählen und installieren Sie ein Theme Ihrer Wahl.

Website mit Statamic erstellen

Jetzt haben Sie Statamic erfolgreich in der ServBay-Umgebung installiert und konfiguriert und können es verwenden, um Ihre Website zu erstellen. Hier sind einige häufige Aufgaben:

Erstellen von Inhalten und Sammlungen

1. Sammlung erstellen

   Klicken Sie im Statamic-Control Panel auf „Inhalte“ -> „Sammlungen“, um eine neue Sammlung zu erstellen. Geben Sie den Namen der Sammlung und andere Einstellungen ein und klicken Sie dann auf „Speichern“.

2. Inhalte erstellen

   Klicken Sie auf „Inhalte“ -> „Sammlungen“, wählen Sie die gerade erstellte Sammlung aus, klicken Sie auf „Neu“, geben Sie den Inhaltstitel und den Inhalt ein und klicken Sie dann auf „Speichern“.

Navigationsmenü konfigurieren

1. Navigation erstellen

   Klicken Sie im Statamic-Control Panel auf „Inhalte“ -> „Navigation“, um eine neue Navigation zu erstellen. Geben Sie den Namen der Navigation und andere Einstellungen ein und klicken Sie dann auf „Speichern“.

2. Navigationselemente hinzufügen

   Fügen Sie die Sammlungen und Inhalte zur Navigation hinzu und klicken Sie dann auf „Speichern“.

Templates und Styles anpassen

1. Templates bearbeiten

   Bearbeiten Sie die Blade-Template-Dateien im Verzeichnis resources/views, um das Layout und die Darstellung Ihrer Website anzupassen. Bearbeiten Sie beispielsweise die Datei default.blade.php:

   <!-- resources/views/layouts/default.blade.php -->
   <!DOCTYPE html>
   <html lang="de">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ $title ?? 'My Statamic Site' }}</title>
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           <nav>
               <ul>
                   @foreach ($navigation as $item)
                       <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                   @endforeach
               </ul>
           </nav>
       </header>
       <main>
           @yield('content')
       </main>
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Stile hinzufügen

   Erstellen Sie eine CSS-Datei im Verzeichnis resources/css und binden Sie diese im Template ein. Erstellen Sie beispielsweise die Datei app.css:

   /* resources/css/app.css */
   body {
       font-family: Arial, sans-serif;
   }

   Binden Sie die CSS-Datei im Template ein:

   <!-- resources/views/layouts/default.blade.php -->
   <link rel="stylesheet" href="{{ mix('css/app.css') }}">

3. Skripte hinzufügen

   Erstellen Sie eine JavaScript-Datei im Verzeichnis resources/js und binden Sie diese im Template ein. Erstellen Sie beispielsweise die Datei app.js:

   // resources/js/app.js
   document.addEventListener('DOMContentLoaded', function() {
       console.log('Hello, Statamic!');
   });

   Binden Sie die JavaScript-Datei im Template ein:

   <!-- resources/views/layouts/default.blade.php -->
   <script src="{{ mix('js/app.js') }}"></script>

4. Ressourcen kompilieren

   Führen Sie die folgenden Befehle aus, um die CSS- und JavaScript-Dateien zu kompilieren:

   npm install
   npm run dev

Durch diese Schritte haben Sie Statamic erfolgreich in der ServBay-Umgebung installiert und konfiguriert und können es nun nutzen, um Ihre Website zu erstellen. Mit der Flexibilität und den leistungsstarken Funktionen von Statamic ist es die ideale Wahl für den Aufbau verschiedenster Websitetypen.