Kirby CMS Installeren en Configureren in de ServBay-omgeving

Kirby is een flexibel en krachtig bestandsgebaseerd contentmanagementsysteem (CMS), geschikt voor het bouwen van allerlei soorten websites. In tegenstelling tot traditionele database-gebaseerde CMS'en slaat Kirby de content op in het bestandsysteem, wat het zeer licht, eenvoudig te versioneren en gemakkelijk te deployen maakt.

In deze tutorial leer je hoe je met Composer Kirby 4.2 Starterkit installeert en configureert binnen ServBay, een lokaal webontwikkelplatform speciaal voor ontwikkelaars. ServBay biedt een vooraf geconfigureerde PHP-omgeving, webservers (zoals Caddy of Nginx) en Composer, en is hiermee ideaal voor lokale Kirby-ontwikkeling op macOS.

Vereisten

Zorg ervoor dat je het volgende hebt voordat je begint:

1. ServBay is geïnstalleerd en draait op macOS.
2. De benodigde PHP-versie is ingeschakeld in ServBay (in dit voorbeeld PHP 8.2).
3. Composer is in ServBay geïntegreerd; je hoeft het dus niet apart te installeren.

Stappen voor het installeren van Kirby

Hieronder vind je de gedetailleerde stappen voor het installeren en configureren van Kirby in de ServBay-omgeving:

Stap 1: Maak een projectmap aan

Open een terminalapplicatie. Navigeer naar de standaard webroot van ServBay op /Applications/ServBay/www en maak een nieuwe projectmap aan. In dit voorbeeld noemen we het project servbay-kirby-app.

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

Stap 2: Maak een Kirby-project aan met Composer

Composer is al geïntegreerd in ServBay, dus je kunt het direct gebruiken. Voer in de projectmap servbay-kirby-app het volgende Composer-commando uit om de Kirby Starterkit te downloaden en het project aan te maken:

composer create-project getkirby/starterkit .

Deze opdracht downloadt Kirby's kernbestanden, afhankelijkheden en een Starterkit met basiscontent en templates naar de huidige map (.).

Stap 3: Webserver configureren (website toevoegen in ServBay)

Zorg ervoor dat de webserver van ServBay (zoals Caddy of Nginx) je Kirby-project kan bedienen door een nieuwe website toe te voegen in de ServBay-applicatie.

1. Open de ServBay-app: Start ServBay.
2. Ga naar Websitemanagement: Klik op het tabblad “Sites” in de linkernavigatie.
3. Voeg een nieuwe website toe: Klik op de “+”-knop of een vergelijkbare optie om een nieuwe site toe te voegen.
4. Vul de websitegegevens in: Voer in het pop-upvenster de volgende informatie in:
   • Naam: Geef je site een herkenbare naam, bijvoorbeeld My Kirby Site.
   • Domein: Stel een lokale ontwikkeldomeinnaam in. We raden een .local of .servbay.demo extensie aan, bijv. servbay-kirby.local. ServBay regelt automatisch de lokale DNS.
   • Websitetype: Selecteer PHP, want Kirby is een PHP-applicatie.
   • PHP-versie: Kies de gewenste PHP-versie, bijvoorbeeld 8.2. Controleer of deze voldoet aan Kirby's minimumeisen.
   • Webroot: Geef de map op waar het Kirby-project zijn index.php bevat. Dit is meestal de hoofdmap; selecteer het pad dat je in stap 1 hebt aangemaakt: /Applications/ServBay/www/servbay-kirby-app.
5. Configuratie opslaan: Controleer de gegevens en sla de website op. ServBay past de configuratie toe en start indien nodig de webserver opnieuw.

Stap 4: Kirby configureren (basisinstellingen)

De hoofdconfiguratie van Kirby gebeurt via het bestand site/config/config.php. De Starterkit is standaard al functioneel, maar je kunt hier extra instellingen doen, zoals:

• Debugmodus inschakelen (c::set('debug', true);)
• Paneeltaal instellen
• Eigen routes definiëren

In de projectroot is de map content al door de Starterkit aangemaakt voor alle pagina-inhoud.

Stap 5: Kirby-website draaien en openen

Na configuratie kun je je Kirby-site openen via de domeinnaam die je zojuist hebt ingesteld.

1. Controleer of ServBay draait: Zorg dat ServBay actief is, samen met de juiste webserver (Caddy of Nginx) en de PHP-module.
2. Open je website: Start een webbrowser en voer je domeinnaam in, zoals https://servbay-kirby.local.

Je zou nu het standaard welkomstscherm van de Kirby Starterkit moeten zien. ServBay activeert standaard HTTPS, dus gebruik bij voorkeur https://.

Stap 6: Kirby Panel installeren en gebruiken (optioneel)

Kirby heeft een krachtig beheerderspaneel waarmee je content, gebruikers en instellingen eenvoudig beheert.

1. Ga naar het installatiepaneel: Voeg /panel toe aan je domein in de browser, bijv. https://servbay-kirby.local/panel.
2. Admin-account aanmaken: Bij het eerste bezoek aan /panel word je naar het installatieformulier geleid. Vul de gevraagde gegevens in (gebruikersnaam, wachtwoord, e-mailadres) om je eerste admin-account te maken.
3. Inloggen op het paneel: Na het aanmaken kun je inloggen in het Kirby Panel en via een grafische interface de inhoud van je website beheren.

Websites bouwen met Kirby

Nu je Kirby CMS succesvol in ServBay hebt geïnstalleerd en geconfigureerd, kun je beginnen met het bouwen van je website op basis van bestandsopslag. Hier volgen enkele basiselementen van Kirby-ontwikkeling:

Contentstructuur (Content)

Alle content van Kirby staat in de map content. Elke pagina heeft een eigen submap. De inhoud van de pagina wordt opgeslagen in tekstbestanden binnen de desbetreffende map (zoals page.txt), vaak met Markdown-achtige syntax.

Voorbeeld: een "Over ons"-pagina maken

In de terminal:

cd /Applications/ServBay/www/servbay-kirby-app
mkdir content/about
echo "Title: Over ons\n----\nDit is de content van de Over ons-pagina." > content/about/about.txt

Bezoek daarna https://servbay-kirby.local/about (mits je template dit ondersteunt).

Sjablonen (Templates)

Sjabloonbestanden staan in site/templates en bepalen de weergave van elke pagina. De bestandsnaam correspondeert met de mapnaam of blueprint-naam (bijvoorbeeld about.php hoort bij content/about of een pagina met de about-blueprint).

Voorbeeld: een about.php-template aanmaken

In het bestand site/templates/about.php:

<?php snippet('header') ?>

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

<?php snippet('footer') ?>

Met de functie snippet() voeg je herbruikbare delen in, zoals de header en footer.

Blueprints

Blueprint-bestanden staan in site/blueprints en definiëren de veldindeling en opties in het Kirby Panel. Ze zijn geschreven in YAML-formaat.

Voorbeeld: een about.yml blueprint maken

In site/blueprints/pages/about.yml:

title: Over-pagina

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

  - width: 1/3
    fields:
      # Zijbalkvelden, bijvoorbeeld voor afbeeldingen uploaden
      cover_image:
        label: Omslagafbeelding
        type: files
        max: 1
        uploads:
          template: image

Na toevoegen van dit blueprint verschijnen deze velden bij het aanmaken van een nieuwe ‘Over’ pagina in het Panel.

Snippets

Snippets zijn herbruikbare PHP-bestanden, meestal voor onderdelen als de header, footer of navigatie, en staan in site/snippets.

Controllers en Modellen

Voor meer geavanceerde logica kun je controllers (site/controllers) gebruiken om paginadata te verwerken, en modellen (site/models) om aangepaste paginaklassen te definiëren.

Statische bestanden (Assets)

CSS, JavaScript, afbeeldingen en andere assets staan in de map assets in het project. Gebruik in je templates de helper url('assets/...') om de juiste URL te genereren.

Voorbeeld: CSS en JS toevoegen

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

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

Samenvatting

Met deze stappen heb je Kirby CMS succesvol geïnstalleerd en geconfigureerd in de ServBay-ontwikkelomgeving. Door de geïntegreerde PHP-infrastructuur van ServBay wordt het beheren en uitrollen van Kirby-projecten eenvoudiger dan ooit, zodat jij je kunt richten op de flexibiliteit en kracht van Kirby's bestandsgebaseerde benadering bij het bouwen van jouw website. Ga nu gerust verder met het verdiepen in templates, blueprints, snippets en meer om de structuur en functionaliteit van je site uit te breiden.