Installer et configurer Kirby CMS dans l’environnement ServBay

Kirby est un système de gestion de contenu (CMS) flexible et puissant, qui repose sur le stockage de fichiers plutôt qu’une base de données. Cette approche rend Kirby particulièrement léger, facile à versionner et à déployer pour la création de tout type de site web.

Ce tutoriel vous guide pour installer et configurer le Starterkit Kirby 4.2 dans ServBay, un environnement local spécialement pensé pour les développeurs web. ServBay inclut une configuration prête à l’emploi de PHP, d’un serveur web (Caddy ou Nginx) et de Composer, formant ainsi la plateforme idéale pour développer localement des projets Kirby.

Prérequis

Avant de commencer, assurez-vous d’avoir :

1. ServBay installé et en cours d’exécution sur macOS.
2. La version de PHP requise activée dans ServBay (ici, nous utiliserons PHP 8.2).
3. Composer déjà inclus dans ServBay, aucune installation supplémentaire n’est nécessaire.

Étapes d’installation de Kirby

Voici les étapes détaillées pour installer et configurer Kirby dans l’environnement ServBay :

Étape 1 : Créer le dossier du projet

Commencez par ouvrir l’application Terminal. Naviguez jusqu’au répertoire racine web par défaut de ServBay, /Applications/ServBay/www, puis créez un nouveau dossier de projet. Nous utiliserons servbay-kirby-app comme nom d’exemple.

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

Étape 2 : Créer le projet Kirby avec Composer

Composer étant déjà intégré à ServBay, vous pouvez l’utiliser directement dans le terminal. Dans le dossier du projet servbay-kirby-app, exécutez la commande suivante pour télécharger et créer le projet Starterkit Kirby :

composer create-project getkirby/starterkit .

Cette commande télécharge les fichiers principaux de Kirby, ses dépendances ainsi qu’un Starterkit contenant du contenu et des modèles de base, le tout dans le répertoire courant (.).

Étape 3 : Configurer le serveur web (ajout du site dans ServBay)

Pour que le serveur web de ServBay (Caddy ou Nginx) puisse servir votre projet Kirby, il vous faut ajouter une nouvelle configuration de site dans l’application ServBay.

1. Ouvrir l’application ServBay : Lancez ServBay.
2. Accéder à la gestion des sites : Cliquez sur l’onglet « Sites » dans la barre latérale à gauche de la fenêtre.
3. Ajouter un site : Cliquez sur le bouton « + » ou sur l’option correspondante pour ajouter un nouveau site.
4. Remplir les informations du site : Dans la fenêtre de configuration, indiquez les éléments suivants :
   • Nom : Un nom facile à reconnaître, par exemple My Kirby Site.
   • Domaine : Définissez un domaine local dédié, avec une extension recommandée comme .local ou .servbay.demo, par exemple : servbay-kirby.local. ServBay configurera automatiquement la résolution DNS en local.
   • Type de site : Choisissez PHP, puisque Kirby est une application PHP.
   • Version PHP : Sélectionnez la version PHP voulue (ici 8.2). Veillez à ce que la version respecte les exigences minimales de Kirby.
   • Répertoire racine : Indiquez le dossier contenant le fichier index.php de Kirby. Pour le Starterkit, il s’agit généralement du dossier du projet créé précédemment : /Applications/ServBay/www/servbay-kirby-app.
5. Sauvegarder la configuration : Vérifiez les informations, puis cliquez sur « Enregistrer ». ServBay appliquera la nouvelle configuration et pourra redémarrer le serveur web concerné si besoin.

Étape 4 : Configuration initiale de Kirby

La configuration principale de Kirby s’effectue dans le fichier site/config/config.php. Le Starterkit propose déjà un paramétrage de base suffisant pour démarrer, que vous pourrez adapter ensuite. Par exemple :

• Activer le mode debug (c::set('debug', true);)
• Définir la langue de l’interface d’administration
• Ajouter des routes personnalisées, etc.

Le dossier content à la racine de votre projet, qui sert à stocker l’intégralité du contenu de votre site, est créé automatiquement par le Starterkit.

Étape 5 : Lancer et accéder à votre site Kirby

Une fois la configuration dans ServBay terminée, vous pouvez accéder à votre site Kirby depuis le nom de domaine défini précédemment.

1. Vérifiez que ServBay fonctionne : Assurez-vous que l’application ServBay, le serveur web (Caddy ou Nginx) et PHP sont bien en service.
2. Accédez à votre site : Ouvrez votre navigateur et entrez le domaine défini à l’étape 3, par exemple https://servbay-kirby.local.

Vous devriez voir la page d’accueil par défaut du Starterkit Kirby. ServBay active HTTPS par défaut : il est donc recommandé d’utiliser https://.

Étape 6 : Installer et utiliser le panneau d’administration Kirby (optionnel)

Kirby propose un panneau de gestion complet pour administrer contenus, utilisateurs et réglages de votre site.

1. Accéder à la page d’installation du panneau : Dans le navigateur, ajoutez /panel à votre domaine, par exemple https://servbay-kirby.local/panel.
2. Créer un compte administrateur : Lors de la première visite sur /panel, vous serez guidé vers la page d’installation. Suivez les instructions pour renseigner les informations nécessaires (nom d’utilisateur, mot de passe, adresse email) et créer le premier compte admin.
3. Connectez-vous : Après création, utilisez vos identifiants pour accéder au panneau et commencer à gérer votre site via une interface graphique intuitive.

Créer un site avec Kirby

Vous avez maintenant Kirby installé et prêt dans ServBay, et pouvez exploiter la gestion de contenu basée sur des fichiers pour concevoir votre site. Voici quelques concepts et outils essentiels pour débuter en développement Kirby :

Structure du contenu (Content)

Tout le contenu de Kirby est stocké dans le dossier content. Chaque page du site correspond à un sous-dossier dans content. Le contenu des pages est généralement placé dans des fichiers texte (exemple : page.txt), utilisant une syntaxe proche du Markdown.

Exemple : créer une page "À propos"

Dans le terminal :

cd /Applications/ServBay/www/servbay-kirby-app
mkdir content/about
echo "Title: À propos\n----\nCeci est le contenu de notre page à propos." > content/about/about.txt

Accédez à https://servbay-kirby.local/about (si le modèle le permet).

Modèles (Templates)

Les fichiers de modèle se trouvent dans site/templates et déterminent le rendu des pages. Le nom du fichier correspond au dossier de contenu ou au nom du blueprint (exemple : about.php pour la page « about »).

Exemple : créer un modèle about.php

Dans site/templates/about.php :

<?php snippet('header') ?>

<main>
  <h1><?= $page->title() ?></h1>
  <div class="text">
    <?= $page->text()->kt() // Rend le contenu avec KirbyText ?>
  </div>
</main>

<?php snippet('footer') ?>

Ici, la fonction snippet() permet d’inclure des blocs réutilisables, comme l’entête et le pied de page.

Blueprints

Les fichiers de blueprint sont déposés dans site/blueprints et définissent la structure, les champs et les options des pages dans le panneau d’administration. Ils sont rédigés en YAML.

Exemple : créer un blueprint about.yml

Dans site/blueprints/pages/about.yml :

title: Page à propos

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

  - width: 1/3
    fields:
      # Champs secondaires, comme téléchargement d'image
      cover_image:
        label: Image de couverture
        type: files
        max: 1
        uploads:
          template: image

Une fois votre blueprint en place, les champs s’afficheront lors de la création d’une page « À propos » dans le panneau.

Snippets

Les snippets sont des fichiers PHP réutilisables, utilisés pour des parties communes du site (header, footer, navigation…), et stockés dans site/snippets.

Contrôleurs (Controllers) et modèles (Models)

Pour une logique métier avancée, utilisez des contrôleurs (site/controllers) pour manipuler les données des pages, ou des modèles (site/models) pour définir des classes de page personnalisées.

Ressources statiques (Assets)

Placez vos CSS, JavaScript et images dans le dossier assets à la racine du projet. Utilisez la fonction d’assistance url('assets/...') dans vos modèles pour générer l’URL des ressources.

Exemple : inclure CSS et JS

Dans site/templates/default.php ou site/snippets/header.php :

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

Conclusion

En suivant ces étapes, vous avez installé et configuré Kirby CMS dans votre environnement local ServBay. Grâce à ServBay, le déploiement et la gestion des applications PHP sont simplifiés, vous permettant de vous concentrer sur la puissance et la flexibilité de Kirby pour développer vos sites sur-mesure. Vous pouvez maintenant explorer plus en profondeur les concepts de modèles, blueprints et snippets de Kirby, afin de bâtir des architectures web encore plus avancées.