Installer et configurer Statamic dans l’environnement ServBay

Statamic est un système de gestion de contenu (CMS) moderne construit sur le framework Laravel. Reconnu pour sa flexibilité et sa puissance, il convient particulièrement à la création de multiples types de sites web. Une de ses caractéristiques majeures est de stocker, par défaut, les contenus et configurations dans le système de fichiers, tout en offrant également une option pour utiliser une base de données.

Ce guide détaillé vous accompagne à chaque étape pour installer et configurer Statamic à l’aide de Composer dans ServBay, un environnement local Web complet. ServBay fournit tout le nécessaire : environnement PHP, gestionnaire Composer déjà intégré et interface de gestion facile des sites.

Étapes pour installer Statamic

L’installation de Statamic dans l’environnement ServBay est rapide et simple. Suivez les étapes ci-dessous :

Étape 1 : Créer un dossier de projet

Commencez par créer un nouveau sous-répertoire pour votre projet Statamic dans le répertoire racine des sites de ServBay, à savoir /Applications/ServBay/www. Ouvrez le Terminal et exécutez les commandes suivantes :

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

Vous accéderez ainsi au répertoire standard des sites ServBay, puis créerez et entrerez dans le dossier servbay-statamic-app.

2 : Créer un projet Statamic avec Composer

ServBay intègre déjà Composer, l’outil de gestion des dépendances PHP. Vous pouvez donc l’utiliser directement, sans installation supplémentaire, pour créer un projet Statamic.

Dans le dossier servbay-statamic-app que vous venez de créer, lancez la commande Composer suivante :

composer create-project statamic/statamic .

Cette commande démarre le téléchargement de la version la plus récente de Statamic, ainsi que toutes ses dépendances, et les installe dans le dossier courant (.). Patientez pendant le téléchargement et l’installation.

Étape 3 : Configurer le serveur web (ajout d’un site sur ServBay)

Pour que ServBay héberge votre projet Statamic, vous devez ajouter une nouvelle configuration de site dans l’application ServBay.

1. Ouvrez ServBay : Lancez l’application de bureau ServBay.

2. Accédez à l’onglet « Sites » : Cliquez sur l’onglet « Sites » en haut de l’interface (Remarque : sur les anciennes versions, il peut être nommé « Hôtes »).

3. Ajoutez un nouveau site : Cliquez sur le bouton « plus (+) » en bas à gauche pour ajouter une nouvelle configuration de site.

4. Saisissez les informations du site : Dans la fenêtre de configuration apparue, renseignez les champs suivants :

   • Nom : Choisissez un nom facile à identifier, comme Mon site Statamic.
   • Nom de domaine : Le nom de domaine local de développement, typiquement avec le suffixe .local (ex. servbay-statamic.local). ServBay se charge d’automatiser la configuration DNS locale.
   • Type de site : Sélectionnez PHP.
   • Version de PHP : Choisissez la version compatible avec votre projet Statamic (en général, une version stable et récente).
   • Répertoire racine du site : Point crucial : le fichier d’entrée index.php de Statamic se trouve dans le dossier public du projet. Indiquez donc /Applications/ServBay/www/servbay-statamic-app/public comme racine du site.

5. Enregistrez et appliquez la configuration : Cliquez sur « Enregistrer » après avoir renseigné les champs. ServBay peut vous inviter à redémarrer les services pour appliquer les changements — suivez les indications. Le serveur web (Caddy ou Nginx par défaut) prendra en compte la nouvelle configuration.

Étape 4 : Configurer l’environnement Statamic

À la racine de votre projet, Statamic utilise le fichier .env pour gérer la configuration d’environnement (clé d’application, base de données, etc.).

1. Copiez le fichier d’environnement : Un modèle .env.example existe dans tout nouveau projet Statamic. Dans le Terminal, vérifiez que vous êtes toujours dans /Applications/ServBay/www/servbay-statamic-app puis exécutez :

   cp .env.example .env

2. Générez la clé d’application : Laravel/Statamic nécessite une clé unique pour la sécurité (cryptage des sessions, des données sensibles, etc). À la racine du projet, lancez :

   php artisan key:generate

   Cette commande va automatiquement générer et renseigner la valeur APP_KEY dans le fichier .env.

Étape 5 : Lancer et accéder à Statamic

Votre site Statamic est désormais prêt et hébergé dans ServBay.

1. Accédez à votre site Statamic : Ouvrez votre navigateur et entrez le nom de domaine choisi à l’étape 3, par exemple https://servbay-statamic.local. ServBay configure par défaut les certificats SSL locaux (via l’User CA ou la Public CA de ServBay), ce qui permet d’y accéder en HTTPS. Vous devriez voir la page d’accueil de Statamic.

2. Accédez au panneau d’administration : L’interface d’administration est accessible par le chemin /cp, soit https://servbay-statamic.local/cp. La page de connexion ou de configuration s’affichera.

3. Créez un compte administrateur : Lors du premier accès au panneau de contrôle, vous serez invité à renseigner nom d’utilisateur, mot de passe et e-mail pour créer un compte admin. Suivez les instructions à l’écran puis cliquez sur « Créer le compte ». Vous pouvez alors gérer votre site Statamic.

Étape 6 : Installer des plugins et des thèmes (optionnel)

Statamic propose un écosystème étendu de plugins et de thèmes pour enrichir les fonctionnalités ou personnaliser le design.

1. Installer des plugins : Connectez-vous au panneau d’administration et installez des plugins via l’interface (section latérale), ou en utilisant Composer dans le Terminal. L’interface graphique est la voie la plus intuitive.
2. Installer des thèmes : Vous pouvez également installer des thèmes via l’interface ou en ajoutant les fichiers de thème dans le dossier approprié du projet.

Créer un site avec Statamic

Après avoir installé et configuré Statamic, vous pouvez tirer parti de ses nombreuses fonctionnalités pour bâtir votre site. Voici quelques opérations de base :

Créer des contenus et des collections

Statamic organise les contenus autour des « collections », équivalentes aux types d’articles ou de pages dans les CMS traditionnels.

1. Créer une collection : Depuis le panneau d’administration, allez dans « Contenu » → « Collections » et cliquez sur « Créer une collection ». Donnez un nom (ex. Articles, Pages) et définissez les paramètres (structure des URL, schémas de champs...).
2. Ajouter du contenu : Sous la collection créée, cliquez sur « Nouveau » pour ajouter un article ou une page. Remplissez les champs définis dans le blueprint de la collection.

Configurer des menus de navigation

Vous pouvez créer et organiser les menus de navigation de votre site facilement.

1. Créer une navigation : Depuis le panneau d’administration, allez dans « Contenu » → « Navigation » puis cliquez sur « Créer une navigation ». Saisissez un nom (par exemple Navigation principale).
2. Ajouter des éléments : Faites glisser les contenus (collections ou pages individuelles) dans la structure du menu pour organiser la hiérarchie.

Personnaliser les templates et les styles

Statamic étant basé sur Laravel, on utilise le moteur de templates Blade pour contrôler la structure et le rendu des pages.

1. Éditer les templates : Les vues du site sont dans le dossier resources/views à la racine du projet. Modifiez ou créez des fichiers Blade (.blade.php) selon l’architecture Statamic (layouts, partials, collections, etc.) afin de définir la structure HTML des pages. Par exemple, pour ajuster la structure principale, éditez resources/views/layouts/default.blade.php :

   <!-- resources/views/layouts/default.blade.php -->
   <!DOCTYPE html>
   <html lang="fr">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ $title ?? 'Mon site Statamic' }}</title>
       {{-- Inclure le CSS compilé --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Exemple : afficher une navigation nommée '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>
           {{-- Afficher le contenu de la page courante --}}
           @yield('content')
       </main>
       {{-- Inclure le JavaScript compilé --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Ajouter vos styles et scripts : Un projet Statamic utilise en général des outils modernes de build front-end comme Laravel Mix ou Vite. Les sources CSS et JS se trouvent typiquement dans les dossiers resources/css et resources/js.

   Par exemple, pour créer des styles dans 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;
   }

   Exemple de JavaScript dans resources/js/app.js :

   // resources/js/app.js
   console.log('Ressources front-end Statamic chargées !');
   
   // Exemple : interaction simple
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Survol de : ${item.textContent}`);
           });
       });
   });

3. Compiler les ressources front-end : Pour transformer les fichiers sources CSS/JS en ressources utilisables par le navigateur, exécutez les commandes de build en front-end. Le projet Statamic comprend en général un fichier package.json ; grâce au support Node.js de ServBay, vous pouvez lancer :

   npm install
   npm run dev

   npm install installe toutes les dépendances front-end (telles que Laravel Mix, Vite, Tailwind CSS, Vue/React, etc.) d’après votre package.json. npm run dev compile les ressources en mode développement (fichiers non minifiés, source maps). Pour une version production, utilisez npm run prod ou npm run build.

Conclusion

En suivant ces étapes, vous avez installé et configuré Statamic avec succès dans l’environnement local complet ServBay. Grâce à l’intégration de PHP, Composer, un serveur web, une gestion facile des sites, et le support Node.js offerts par ServBay, le processus de développement local avec Statamic est grandement simplifié. Vous pouvez désormais exploiter la structure flexible des fichiers de Statamic et ses nombreuses fonctionnalités pour développer et itérer rapidement vos projets web.