Installation et configuration de Statamic dans l'environnement ServBay

Qu'est-ce que Statamic ?

Statamic est un système de gestion de contenu moderne (CMS) basé sur le framework Laravel, adapté à la création de divers types de sites Web. Statamic est reconnu pour sa flexibilité et ses puissantes fonctionnalités. Il utilise le système de fichiers pour stocker le contenu, mais il est également possible d'utiliser une base de données.

Étapes d'installation de Statamic

Dans cet article, nous allons expliquer comment installer et configurer Statamic en utilisant Composer dans un environnement ServBay.

Étape 1 : Créer le répertoire du projet

Tout d'abord, créez un nouveau répertoire de projet dans le répertoire www de ServBay :

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

Étape 2 : Créer un projet Statamic avec Composer

ServBay inclut déjà Composer, nous pouvons donc créer un projet Statamic directement avec Composer :

composer create-project statamic/statamic .

Étape 3 : Configurer le serveur Web

1. Ajouter un nouveau site Web

   Ouvrez ServBay, cliquez sur l'onglet "Hôte" et ajoutez un nouveau site Web :

   • Nom : My Statamic Site
   • Domaine : servbay-statamic.local
   • Type de site Web : PHP
   • Version PHP : Choisissez la version PHP correspondante
   • Répertoire racine du site Web : /Applications/ServBay/www/servbay-statamic-app/public

2. Enregistrer la configuration

   Enregistrez la configuration et redémarrez ServBay.

Étape 4 : Configurer Statamic

1. Modifier le fichier de configuration de l'environnement

   Dans le répertoire racine du projet, copiez le fichier .env.example en .env :

   cp .env.example .env

2. Générer une clé d'application

   Exécutez la commande suivante pour générer une nouvelle clé d'application :

   php artisan key:generate

Étape 5 : Exécuter Statamic

1. Accéder à Statamic

   Ouvrez votre navigateur et accédez à https://servbay-statamic.local pour voir la page d'accueil de Statamic.

2. Accéder au panneau de contrôle

   Ouvrez votre navigateur et accédez à https://servbay-statamic.local/cp pour voir la page de connexion du panneau de contrôle de Statamic.

3. Créer un compte administrateur

   Suivez les instructions pour créer un compte administrateur, en fournissant un nom d'utilisateur, un mot de passe et une adresse e-mail, puis cliquez sur "Créer le compte".

Étape 6 : Installer des plugins et des thèmes

1. Installer des plugins

   Connectez-vous au panneau de contrôle de Statamic, cliquez sur l'icône "Plus", puis cliquez sur "Plugins", recherchez et installez les plugins dont vous avez besoin.

2. Installer des thèmes

   Cliquez sur l'icône "Plus", puis cliquez sur "Thèmes", choisissez et installez un thème de votre choix.

Utiliser Statamic pour créer un site Web

Maintenant que vous avez installé et configuré Statamic dans l'environnement ServBay, vous pouvez commencer à l'utiliser pour créer votre site Web. Voici quelques opérations courantes :

Créer du contenu et des collections

1. Créer une collection

   Dans le panneau de contrôle de Statamic, cliquez sur "Contenu" -> "Collections", créez une nouvelle collection en fournissant un nom et d'autres paramètres, puis cliquez sur "Enregistrer".

2. Créer du contenu

   Cliquez sur "Contenu" -> "Collections", sélectionnez la collection créée précédemment, cliquez sur "Nouveau", remplissez le titre et le contenu, puis cliquez sur "Enregistrer".

Configurer le menu de navigation

1. Créer une navigation

   Dans le panneau de contrôle de Statamic, cliquez sur "Contenu" -> "Navigation", créez une nouvelle navigation en fournissant un nom et d'autres paramètres, puis cliquez sur "Enregistrer".

2. Ajouter des articles de navigation

   Ajoutez des collections et du contenu à la navigation, puis cliquez sur "Enregistrer".

Personnaliser les modèles et styles

1. Modifier les modèles

   Dans le répertoire resources/views, modifiez les fichiers de modèles Blade pour personnaliser la mise en page et l'affichage du contenu de votre site Web. Par exemple, modifiez le fichier default.blade.php :

   <!-- 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>
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           <nav>
               <ul>
                   @foreach ($navigation as $item)
                       <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                   @endforeach
               </ul>
           </nav>
       </header>
       <main>
           @yield('content')
       </main>
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Ajouter des styles

   Dans le répertoire resources/css, créez un fichier CSS et référencez-le dans le fichier de modèle. Par exemple, créez le fichier app.css :

   /* resources/css/app.css */
   body {
       font-family: Arial, sans-serif;
   }

   Référencez le fichier CSS dans le fichier de modèle :

   <!-- resources/views/layouts/default.blade.php -->
   <link rel="stylesheet" href="{{ mix('css/app.css') }}">

3. Ajouter des scripts

   Dans le répertoire resources/js, créez un fichier JavaScript et référencez-le dans le fichier de modèle. Par exemple, créez le fichier app.js :

   // resources/js/app.js
   document.addEventListener('DOMContentLoaded', function() {
       console.log('Hello, Statamic!');
   });

   Référencez le fichier JavaScript dans le fichier de modèle :

   <!-- resources/views/layouts/default.blade.php -->
   <script src="{{ mix('js/app.js') }}"></script>

4. Compiler les ressources

   Exécutez les commandes suivantes pour compiler les fichiers CSS et JavaScript :

   npm install
   npm run dev

Avec ces étapes, vous avez réussi à installer et configurer Statamic dans l'environnement ServBay et commencé à l'utiliser pour créer votre site Web. La flexibilité et les puissantes fonctionnalités de Statamic en font un choix idéal pour créer divers types de sites Web.