Statamic Installeren en Configureren in de ServBay Omgeving

Statamic is een modern content management systeem (CMS) gebouwd op het Laravel-framework, dat bekendstaat om zijn flexibiliteit en krachtige functies; ideaal voor het bouwen van uiteenlopende soorten websites. Een opvallend kenmerk van Statamic is dat het standaard het bestandssysteem gebruikt voor content- en configuratieopslag, maar het biedt ook ondersteuning voor database-opslag.

In deze gids leer je stap voor stap hoe je Statamic installeert en configureert via Composer in de uitgebreide lokale webontwikkelomgeving ServBay. ServBay voorziet Statamic van de benodigde PHP-omgeving, ingebouwde Composer-ondersteuning en eenvoudig websitebeheer.

Stappenplan voor het Installeren van Statamic

Het installatieproces van Statamic in ServBay is overzichtelijk en efficiënt. Volg deze stappen:

Stap 1: Maak een Projectmap aan

Allereerst dien je een nieuwe submap aan te maken voor je Statamic-project in de website-root van ServBay (/Applications/ServBay/www). Open de Terminal en voer de volgende opdrachten uit:

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

Hiermee navigeer je naar de standaard website-root van ServBay, maak je een map genaamd servbay-statamic-app aan en ga je die map in.

Stap 2: Statamic-project aanmaken met Composer

In ServBay is Composer vooraf geïnstalleerd—de toonaangevende tool voor het beheren van PHP-afhankelijkheden. Je kunt Composer direct gebruiken om een Statamic-project aan te maken, zonder extra installatie.

Voer het volgende Composer-commando uit in de nieuw aangemaakte servbay-statamic-app-map:

composer create-project statamic/statamic .

Deze opdracht vraagt Composer om de nieuwste versie van Statamic plus alle vereiste afhankelijkheden te downloaden en installeren in de huidige map (.). Wacht tot de installatie voltooid is.

Stap 3: Webserver Configureren (Website toevoegen in ServBay)

Om je Statamic-project te kunnen hosten, moet je in de ServBay-app een nieuwe websiteconfiguratie aanmaken.

1. Open de ServBay-app: Start de ServBay desktop app.

2. Ga naar het tabblad ‘Websites’: Klik in de ServBay-interface bovenaan op het tabblad ‘Websites’ (in oudere versies kan deze als ‘Hosts’ worden aangeduid).

3. Voeg een nieuwe website toe: Klik linksonder op de ‘plus (+)’-knop om een nieuwe website toe te voegen.

4. Vul de websitegegevens in: In het pop-up venster vul je het volgende in:

   • Naam: Geef een herkenbare naam op, bijvoorbeeld My Statamic Site.
   • Domeinnaam: Je lokale ontwikkeldomein. Gebruik bij voorkeur de .local extensie, bijvoorbeeld servbay-statamic.local. ServBay regelt automatisch de lokale DNS-instellingen.
   • Type website: Selecteer PHP.
   • PHP-versie: Kies een PHP-versie die compatibel is met jouw Statamic-project (meestal een recente stabiele versie).
   • Website-rootdirectory: Dit is essentieel. Het startbestand index.php van Statamic bevindt zich in de submap public van je project, dus wijs de rootdirectory als volgt toe: /Applications/ServBay/www/servbay-statamic-app/public.

5. Sla de configuratie op en pas deze toe: Als alles is ingevuld, klik je op ‘Opslaan’. Mogelijk vraagt ServBay je de services opnieuw op te starten om de wijzigingen door te voeren—volg deze instructies op zodat de webserver (standaard Caddy of Nginx) de nieuwe website laadt.

Stap 4: Statamic Omgevingsbestand Configureren

Statamic gebruikt een .env-bestand in de projectmap voor omgevingsinstellingen (zoals app-sleutels, databaseconnecties, enzovoort).

1. Kopieer het env-voorbeeldbestand: Het Statamic-project bevat een .env.example als template. Zorg dat je nog steeds in de projectmap /Applications/ServBay/www/servbay-statamic-app bent en kopieer vervolgens het bestand:

   cp .env.example .env

2. Genereer de applicatiesleutel: Laravel/Statamic vereist een unieke sleutel voor beveiliging, zoals het versleutelen van sessies en andere gevoelige data. Genereer deze in de projectmap met:

   php artisan key:generate

   Deze opdracht vult de waarde APP_KEY automatisch in je .env-bestand in.

Stap 5: Statamic Starten en Bezoeken

Je Statamic-site is nu in ServBay geconfigureerd en klaar voor gebruik.

1. Bezoek je Statamic-website: Open je browser en ga naar het domein dat je in stap 3 hebt ingesteld, bijvoorbeeld https://servbay-statamic.local. ServBay configureert standaard een SSL-certificaat (via ServBay User CA of ServBay Public CA), dus je hebt direct toegang via HTTPS. Je zou nu het welkomstscherm van Statamic moeten zien.

2. Toegang tot het dashboard: Het admincontrolepaneel van Statamic vind je via /cp, bijvoorbeeld https://servbay-statamic.local/cp. Je ziet het login- of installatiescherm van het Statamic-dashboard.

3. Beheeraccount aanmaken: Bij het eerste bezoek aan het dashboard word je gevraagd een beheerder aan te maken. Vul de gewenste gebruikersnaam, wachtwoord en e-mailadres in, en klik op ‘Account aanmaken’. Daarna kun je inloggen en starten met het beheren van je Statamic-site.

Stap 6: Plugins en Thema’s Installeren (optioneel)

Statamic biedt een uitgebreid ecosysteem van plugins en thema’s waarmee je makkelijk functionaliteit toevoegt of het uiterlijk verandert.

1. Plugins installeren: Na inloggen in het Statamic-dashboard kun je via het zijmenu of met Composer plugins installeren. Installeren via het dashboard is het meest gebruiksvriendelijk.
2. Thema’s installeren: Ook thema’s kun je via het dashboard installeren, of door themabestanden handmatig in de juiste mappen te plaatsen.

Je Website Bouwen met Statamic

Na een succesvolle installatie en setup van Statamic kun je de krachtige functies benutten om je site te bouwen. Hier volgen enkele basisinstructies.

Aanmaken van Content en Collecties

Statamic gebruikt ‘collecties’ (Collections) om je content te organiseren; vergelijkbaar met berichttypen of paginatypen in traditionele CMS'en.

1. Maak een collectie aan: Navigeer in het dashboard naar ‘Content’ -> ‘Collecties’, klik op ‘Collectie aanmaken’. Definieer een naam, zoals Posts of Pages, en andere opties (zoals routing, velden, enz.).
2. Voeg content toe: Onder je collectie klik je op ‘Nieuw’ om items toe te voegen, zoals blogposts of pagina’s. Vul de content in volgens de gedefinieerde blauwdrukken.

Navigatiemenu Beheren

Je kunt eenvoudig navigaties aanmaken en beheren voor je website.

1. Navigatie aanmaken: In het dashboard, ga naar ‘Content’ -> ‘Navigaties’ en klik op ‘Navigatie aanmaken’. Geef het menu bijvoorbeeld de naam Hoofdnavigatie.
2. Navigatie-items toevoegen: Sleep je aangemaakte pagina’s of losse items in het menu en bepaal zo de volgorde en hiërarchie.

Templates en Stijlen Aanpassen

Statamic gebruikt het Blade template-systeem van Laravel voor de HTML-laag en opmaak.

1. Templates aanpassen: Je vindt de views van je site in de resources/views-map in je project. Bewerk of maak een Blade-bestand (.blade.php) aan conform de Statamic structurele conventies (zoals layouts, partials, collections). Bijvoorbeeld, pas resources/views/layouts/default.blade.php aan voor wijzigingen in de algemene paginalayout.

   <!-- 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>
       {{-- Inladen van gecompileerde CSS --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Voorbeeld: Toon een navigatie genaamd '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>
           {{-- Hier wordt de content van de pagina getoond --}}
           @yield('content')
       </main>
       {{-- Inladen van gecompileerde JavaScript --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Stijlen en scripts toevoegen: Statamic integreert meestal met frontend buildtools als Laravel Mix of Vite. De ruwe CSS- en JS-bestanden staan in resources/css en resources/js.

   Bijvoorbeeld, voeg je eigen CSS toe in resources/css/app.css:

   /* 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;
   }

   Voeg JavaScript toe in resources/js/app.js:

   // resources/js/app.js
   console.log('Statamic frontend assets loaded!');
   
   // Voorbeeld: eenvoudige interactieve functionaliteit
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Hovering over: ${item.textContent}`);
           });
       });
   });

3. Frontend assets compileren: Om CSS en JS voor productie te genereren, voer je de buildtools uit. Statamic bevat standaard een package.json, zodat je met npm of yarn de dependencies en scripts kunt installeren en draaien. ServBay ondersteunt Node.js, dus je kunt direct de volgende commando’s uitvoeren:

   npm install
   npm run dev

   npm install download en installeert alle frontenddependenies (zoals Laravel Mix/Vite, Tailwind CSS, Vue/React, enz.). npm run dev start een development build, die vaak onbewerkte resources maakt plus sourcemaps voor debugging. Voor een productie-build gebruik je npm run prod of npm run build.

Samenvatting

Met deze stappen heb je Statamic succesvol geïnstalleerd en geconfigureerd in ServBay, een krachtige lokale ontwikkelomgeving. Dankzij de geïntegreerde stack van ServBay (PHP, Composer, webserver, eenvoudig beheer en Node.js-ondersteuning) wordt het lokale ontwikkelproces van Statamic aanzienlijk vereenvoudigd. Je kunt nu de flexibele bestandsstructuur en functies van Statamic volop benutten voor snelle bouw en iteratie van je webprojecten.