Installation und Konfiguration von Kirby CMS in der ServBay-Umgebung

Kirby ist ein flexibles und leistungsstarkes, dateibasiertes Content-Management-System (CMS), das für alle Arten von Websites geeignet ist. Im Gegensatz zu traditionellen, datenbankgestützten CMS speichert Kirby Inhalte im Dateisystem. Das macht es sehr leichtgewichtig, optimal versionierbar und besonders einfach zu deployen.

Diese Anleitung zeigt Ihnen Schritt für Schritt, wie Sie mit Composer das Kirby 4.2 Starterkit in ServBay – einer speziell für Entwickler konzipierten lokalen Webentwicklungsumgebung – installieren und konfigurieren. ServBay bietet Ihnen eine vorinstallierte PHP-Umgebung, Webserver (z. B. Caddy oder Nginx) und Composer – die ideale Plattform für Ihre lokale Kirby-Entwicklung.

Voraussetzungen

Bevor Sie starten, stellen Sie bitte sicher, dass Sie:

1. ServBay auf Ihrem Mac installiert und gestartet haben.
2. Die benötigte PHP-Version in ServBay aktiviert haben (in diesem Beispiel wird PHP 8.2 verwendet).
3. Composer ist bereits in ServBay integriert, Sie müssen nichts weiter installieren.

Schritte zur Installation von Kirby

Folgen Sie diesen detaillierten Schritten, um Kirby in Ihrer ServBay-Umgebung zu installieren und zu konfigurieren:

Schritt 1: Projektverzeichnis anlegen

Öffnen Sie zunächst das Terminal. Navigieren Sie zum Standard-Webverzeichnis von ServBay unter /Applications/ServBay/www und legen Sie ein neues Projektverzeichnis an. Unser Beispielprojekt soll servbay-kirby-app heißen.

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

Schritt 2: Kirby-Projekt mit Composer erstellen

Da Composer bereits in ServBay integriert ist, können Sie ihn direkt im Terminal verwenden. Wechseln Sie dazu ins neue Verzeichnis servbay-kirby-app und führen Sie folgenden Befehl aus, um das Kirby Starterkit herunterzuladen:

composer create-project getkirby/starterkit .

Dieser Befehl lädt die Kirby-Core-Dateien, Abhängigkeiten und ein Starterkit mit Grundinhalten und Templates in das aktuelle Verzeichnis (.).

3: Webserver konfigurieren (Website zu ServBay hinzufügen)

Damit Ihr Kirby-Projekt vom ServBay-Webserver (wie Caddy oder Nginx) ausgeliefert werden kann, müssen Sie es in der ServBay-Anwendung als neue Website anlegen.

1. ServBay-Anwendung öffnen: Starten Sie die ServBay-App.
2. Websiteverwaltung aufrufen: Klicken Sie im linken Navigationsbereich im ServBay-Fenster auf „Websites“.
3. Neue Website hinzufügen: Klicken Sie unten im Interface auf das „+“-Symbol oder eine ähnliche Option.
4. Website-Informationen eintragen: Geben Sie im erscheinenden Konfigurationsfenster folgende Details ein:
   • Name: Vergeben Sie einen leicht erkennbaren Namen, z. B. My Kirby Site.
   • Domain: Legen Sie eine lokale Entwicklungsdomain fest. Empfohlen werden Endungen wie .local oder .servbay.demo, etwa servbay-kirby.local. ServBay übernimmt die lokale DNS-Konfiguration automatisch.
   • Websitetyp: Wählen Sie PHP, da Kirby ein PHP-basiertes CMS ist.
   • PHP-Version: Wählen Sie die gewünschte PHP-Version, z. B. 8.2. Achten Sie darauf, dass diese Version die Anforderungen von Kirby erfüllt.
   • Web-Stammverzeichnis: Geben Sie das Verzeichnis an, das Ihre Datei index.php enthält – beim Kirby Starterkit typischerweise das Projektverzeichnis. Wählen oder geben Sie den bei Schritt 1 erstellten Pfad ein: /Applications/ServBay/www/servbay-kirby-app.
5. Konfiguration speichern: Prüfen Sie die Eingaben und speichern Sie die Einstellungen. ServBay übernimmt die Konfiguration automatisch und startet gegebenenfalls die entsprechenden Webserver neu.

Schritt 4: Kirby konfigurieren (Erste Einstellungen)

Kirbys Grundeinstellungen finden Sie in der Datei site/config/config.php. Im Starterkit sind die Basiskonfigurationen bereits gesetzt, Sie können die Seite direkt nutzen. Nachfolgend einige typische Anpassungsmöglichkeiten:

• Debug-Modus aktivieren (c::set('debug', true);)
• Panel-Sprache einstellen
• Eigene Routen definieren

Das Verzeichnis content im Projektstamm wird automatisch vom Starterkit erstellt und enthält alle Seiteninhalte.

Schritt 5: Kirby-Website starten und aufrufen

Nach der Konfiguration ist Ihre Kirby-Seite unter der zuvor definierten Domain erreichbar.

1. Kontrollieren Sie, ob ServBay läuft: Stellen Sie sicher, dass die Anwendung sowie der gewählte Webserver (Caddy oder Nginx) und das benötigte PHP-Paket laufen.
2. Webseite aufrufen: Öffnen Sie den Browser und geben Sie Ihre konfigurierte Domain (z. B. https://servbay-kirby.local) in die Adresszeile ein.

Sie sollten die Standard-Willkommensseite des Kirby Starterkits sehen. ServBay aktiviert HTTPS standardmäßig; nutzen Sie daher am besten die Adresse mit https://.

Schritt 6: Kirby-Panel installieren und verwenden (optional)

Kirby bietet ein mächtiges Admin-Panel, mit dem Sie Inhalte, Benutzer und Einstellungen bequem verwalten.

1. Panel-Installationsseite öffnen: Geben Sie im Browser nach Ihrer Domain /panel ein, z. B. https://servbay-kirby.local/panel.
2. Administrator-Konto anlegen: Beim ersten Aufruf von /panel gelangen Sie zur Installationsseite. Dort können Sie Benutzername, Passwort und E-Mail-Adresse eintragen, um Ihr erstes Admin-Konto zu erstellen.
3. Im Panel anmelden: Nach der Kontenerstellung können Sie sich ins Kirby-Panel einloggen und komfortabel Ihre Webinhalte über die grafische Oberfläche managen.

Mit Kirby eine Website erstellen

Jetzt läuft Kirby CMS in ServBay – nutzen Sie die Vorteile der Dateibasiertheit beim Aufbau Ihrer eigenen Website. Folgend einige wesentliche Grundkonzepte und Arbeitsschritte im Kirby-Universum:

Inhaltsstruktur (Content)

Kirbys Inhalte liegen im content-Verzeichnis. Jede Seite entspricht einem Unterordner darin. Die Inhalte werden meist in Textdateien wie page.txt abgelegt, oft im Markdown-ähnlichen Format.

Beispiel: „Über uns“-Seite anlegen

Im Terminal:

cd /Applications/ServBay/www/servbay-kirby-app
mkdir content/about
echo "Title: Über uns\n----\nDies ist der Inhalt unserer Über-uns-Seite." > content/about/about.txt

Rufen Sie anschließend https://servbay-kirby.local/about auf (sofern Ihr Template dies unterstützt).

Templates

Template-Dateien liegen im Verzeichnis site/templates und bestimmen das Aussehen und die Struktur Ihrer Seiten. Dateinamen entsprechen typischerweise dem Namen der Inhaltsordner oder dem Blueprint (z. B. entspricht about.php dem Ordner content/about oder Seiten mit dem Blueprint about).

Beispiel: about.php-Template erstellen

In site/templates/about.php:

<?php snippet('header') ?>

<main>
  <h1><?= $page->title() ?></h1>
  <div class="text">
    <?= $page->text()->kt() // Mit KirbyText rendern ?>
  </div>
</main>

<?php snippet('footer') ?>

Hier wird mit snippet() auf wiederverwendbare Komponenten wie Header und Footer zurückgegriffen.

Blueprints

Blueprint-Dateien liegen in site/blueprints und definieren Struktur, Felder und Optionen von Seiten im Panel. Sie werden in YAML geschrieben.

Beispiel: about.yml-Blueprint anlegen

In site/blueprints/pages/about.yml:

title: Über uns Seite

columns:
  - width: 2/3
    fields:
      text:
        label: Textinhalt
        type: textarea
        size: large
        buttons:
          - bold
          - italic
          - link
          - email

  - width: 1/3
    fields:
      # Seitenleistenfeld, z. B. für Bild-Uploads
      cover_image:
        label: Titelbild
        type: files
        max: 1
        uploads:
          template: image

Wenn Sie diesen Blueprint einfügen, erscheinen die definierten Felder beim Erstellen einer neuen „Über uns“-Seite im Panel.

Snippets

Snippets sind wiederverwendbare PHP-Dateien für Teile wie Header, Footer oder Navigation und werden im Verzeichnis site/snippets abgelegt.

Controller und Modelle

Für komplexere Logik nutzen Sie Controller (site/controllers) zur Datenverarbeitung einzelner Seiten und Modelle (site/models) zur Definition eigener Seitenklassen.

Assets (Statische Ressourcen)

Statische Ressourcen wie CSS, JavaScript und Bilder werden typischerweise im Ordner assets im Projektstamm gespeichert. In Templates greifen Sie per url('assets/...')-Helfer bequem darauf zu.

Beispiel: CSS und JS einbinden

In site/templates/default.php oder site/snippets/header.php:

<link rel="stylesheet" href="<?= url('assets/css/style.css') ?>">
<script src="<?= url('assets/js/script.js') ?>"></script>

Fazit

Mit den obigen Schritten haben Sie Kirby CMS erfolgreich in Ihrer lokalen ServBay-Entwicklungsumgebung aufgesetzt und konfiguriert. ServBay nimmt Ihnen viele Aufgaben der PHP-App-Verwaltung und -Bereitstellung ab, sodass Sie sich ganz auf die Funktionen und die dateibasierte Flexibilität von Kirby konzentrieren können. Entdecken Sie nun die vielfältigen Möglichkeiten von Kirby rund um Templates, Blueprints, Snippets und mehr, um Ihre Website weiterzuentwickeln!