A la découverte de Laravel Statamic CMS

--- title: A la découverte de Laravel Statamic CMS tags: Statamic, CMS, Laravel, Overview description: Mise en place d'un mini blog avec Statamic 3. --- # A la découverte du CMS Statamic <img src="https://academy.sdf30.com/bin/files/sites/6/2022/03/academy30-purple_logotype.svg" /> [SDFAcademy by Open-SDF](https://open.sdf30.com) ## Sommaire - [**Introduction**](#introduction) * [C’est quoi Statamic?](#what-is-statamic) * [Avantages du CMS](#statamic-advantages) * [Fonctionalités](#some-statamic-features) * [Quelle différence avec les autres CMS ?](#what-difference-with-another) * [Mode d’utilisation](#how-to-use-it) - [**Installation et configuration**](#installation-and-config) - [Intégration dans un projet Laravel existant](#setup-into-existing-laravel-project) - [Créer un nouveau projet Statamic](#create-new-statamic-project) - [Créer le premier utilisateur du CMS](#create-your-first-user) - [Acces au panneau d’administration (Control Panel)](#access-to-control-panel) - [Créer son premier contenu](#create-first-entry) - [Markdown](#the-markdown) - [**Les concepts propres au CMS**](#statamic-concepts) - [Structure de dossier](#folder-structure) - [Les champs personnalisés, types et jeux de champs](#blueprints-fields-type-fields-set) - [Les assets](#assets) - [Antlers (le moteur de template par défaut de Statamic)](#antlers) - [Les variables globales](#globales) - [La navigation](#navigation) - [Fichiers de configuration (Yaml, PHP)](#config-files) - [**Guide pratique**](#quick-start-guide) - [Prérequis](#prerequisites) - [Environnement de développement](#development-environment) - [Le projet](#the-project) - [Le workflow](#the-workflow) - [Personnaliser du layout](#customize-layout) - [Création du blog](#blog-creation) - [Créer une nouvelle collection](#create-new-collection) - [Générer les vues](#scafold-views) - [Configurer la collection](#configure-collection) - [Créer votre premier article](#create-first-post) - [Personnalisation des vues](#view-customization) - [Utilisation des parials](#using-partials) - [Création des pages](#pages-creation) - [**Déloiement en tant que site statique**](#static-site-deployment) - [Sur Firebase](#deploy-on-firebase) - [Sur Netlify](#deploy-on-netlify) - [**Astuces**](#tips-and-tricks) - [**Conclusion**](#conclusion) --- <div id="introduction"></div> ## Introduction <div id="what-is-statamic"></div> #### C’est quoi Statamic? Statamic est un CMS intuitif basé sur laravel et offrant la possibilité de créer des sites Web et blog personnalisés qui sont à la fois faciles à gérer et élégants. Etant basé sur Laravel (PHP) et tirant partie de la puissance de ce framework, vous pouvez en tant que développeur Laravel personnaliser votre site à votre gise. Parcontre, il n'est pas nécessaire d'avoir des connaissances poussées en développement pour l'utiliser. En tant que CMS complet, il offre des composants glisser-déposer, ce qui facilite la conception de sites Web et la création de contenu. Statamic est un CMS fait avec Laravel. Pour les amoureux de CMS du style WordPress Statamic est un CMS qui offre beaucoup de fonctionnalités et vous permet de garder votre aise sur Laravel, car vous pouvez toujours décider de vous mettre à développer si vous avez des fonctionnalités précises à rajouter. <div id="statamic-advantages"></div> #### Avantages du CMS Voici quelques des raisons pour lesquelles Statamic est un outils pratique : * Système de fichiers plats, ce qui réduit le risque d'erreurs de base de données. * Base de code moderne intégrant les normes de sécurité les plus récentes. * Un soutien solide de la part des développeurs de Statamic et des utilisateurs de la communauté générale. * Facilité de déploiement * Interface utilisateur ergonomique et épurée * Possibilité de l'utiliser comme un CMS headless * Parcontre la version gratuite de Statamic reste adaptée aux besoins personnels. Ainsi toutes les fonctionnalités ne sont pas gratuites. <div id="some-statamic-features"></div> #### Fonctionalités Statamic est un CMS moderne à fichier plat construit sur la base de Laravel. La chose la plus cool à son sujet est la façon dont il peut s'adapter à nos besoins actuels. Par défaut, il est basé sur des fichiers, mais il a un support de base de données. Il est dynamique, mais il peut être converti en site statique. Il peut être un CMS front-to-back, mais nous pouvons aussi l'utiliser comme un CMS headless. Comme nous l'avons mentionné précédemment, l'objectif principal de Symfony est d'optimiser les applications web. Les frameworks Symfony ont les caractéristiques uniques suivantes : https://hackr.io/blog/symfony-framework#features https://isolution.pro/fr/t/symfony/symfony-quick-guide/symfony-guide-rapide https://www.axopen.com/blog/2021/04/symfony-php-framework-choix-developpement-web/ Statamic propose : 1) de divers thèmes (starter kits) 2) des fonctionnalités pour gérer son blog 3) divers extensions complémentaires pour étendre davantage Statamic * Une documentation claire, intuitive et agréable à lire * Des recommandations de bonnes pratiques et conventions * Prévisualisation du contenu en cours de rédaction * Un gestionnaire de fichier (Gallerie) * 40 types de champs Et plus d'une vintaines d'[autres fonctionnalités](https://statamic.com/features) <div id="what-difference-with-another"></div> #### Quelle différence avec les autres CMS ? Statamic est-il meilleur que Wordpress ? Comme nous l'avons dit, chez morphsites, nous ne sommes pas liés à un CMS particulier et nous n'allons certainement pas en critiquer un plutôt qu'un autre. Mais comme on nous pose souvent des questions sur Wordpress, voici quelques différences clés : Fonctions intégrées. Vous pouvez tout faire sur l'un ou l'autre des CMS, mais la principale différence est que Statamic ne nécessite aucun plugin pour la plupart des sites. Tout ce dont vous aurez probablement jamais besoin fait partie des fonctionnalités de base, ce qui signifie qu'il n'est pas nécessaire de rechercher des plugins tiers et de se demander s'ils fonctionnent correctement. Cohérence. Wordpress a évolué au fil des ans, ce qui signifie qu'il peut y avoir plusieurs façons de construire un site, ce qui peut prêter à confusion. Les sites Statamic sont tous structurés de manière similaire, ce qui signifie que vous pouvez passer d'un site à l'autre en sachant exactement où commencer. Fonctionnalité personnalisée. Comme pour le point précédent, Statamic étant basé sur le cadre dorsal Laravel, vous pouvez construire des sites Web personnalisés comme vous le souhaitez. En résumé, Statamic a été conçu pour créer des sites Web sur mesure, tandis que Wordpress s'est développé au fil des ans à partir de ce qui était à l'origine un simple format de blog/information, avec tous les problèmes d'héritage qui vont de pair. <div id="how-to-use-it"></div> #### Mode d’utilisation Dans ce cours, découvrirons les bases de ce CMS polyvalent et complet. Dans ce guide, je vous présenterai les bases de Statamic et vous expliquerai comment construire et déployer les modifications et comment les convertir en un site web statique. Language: PHP Templates: Antlers, HTML, Blade, Twig, Markdown Nous pouvons voir que tout dans Statamic est divisé en : Collections - types de messages dans lesquels nous stockons les messages et les pages. Taxonomies - moyens de regrouper les articles stockés dans les collections. Navigations Actifs - toutes les images, vidéos et PDFs Formulaires Il existe également trois parties très importantes qui nous permettent de personnaliser la structure des données selon la forme souhaitée : Les Blueprints vous permettent de modéliser votre contenu. Vous pouvez définir des champs, sélectionner des types de champs pour ceux-ci, les regrouper, définir des conditions, etc. Les ensembles de champs sont des ensembles de champs réutilisables qui permettent de garder tout en ordre. Grâce à eux, vous pouvez définir un ensemble de champs qui peuvent être ajoutés à toutes les collections et être gérés depuis un seul endroit. Les variables globales sont des variables disponibles à l'échelle mondiale. Elles sont parfaites pour stocker des éléments tels que les URL de vos médias sociaux ou l'adresse de votre entreprise. <div id="installation-and-config"></div> ## Installation et configuration <div id="setup-into-existing-laravel-project"></div> #### Intégration dans un projet Laravel existant <div id="create-new-statamic-project"></div> #### Créer un nouveau projet Statamic <div id="create-your-first-user"></div> #### Créer le premier utilisateur du CMS <div id="access-to-control-panel"></div> #### Acces au panneau d’administration (Control Panel) <div id="create-first-entry"></div> #### Créer son premier contenu <div id="the-markdown"></div> #### Le Markdown <div id="statamic-concepts"></div> ## Les concepts propres au CMS <div id="folder-structure"></div> #### Structure de dossier <div id="blueprints-fields-type-fields-set"></div> #### Les champs personnalisés, types et jeux de champs <div id="assets"></div> #### Les assets <div id="antlers"></div> #### Antlers (le moteur de template par défaut de Statamic) <div id="globales"></div> #### Les variables globales <div id="navigation"></div> #### La navigation <div id="config-files"></div> #### Fichiers de configuration (Yaml, PHP) <div id="quick-start-guide"></div> ## Guide pratique <div id="prerequisites"></div> #### Prérequis <div id="development-environment"></div> #### Environnement de développement <div id="the-project"></div> #### Le projet <div id="the-workflow"></div> #### Le workflow <div id="customize-layout"></div> #### Personnaliser du layout <div id="blog-creation"></div> #### Création du blog <div id="blog-creation"></div> ##### Créer une nouvelle collection <div id="scafold-views"></div> ##### Générer les vues <div id="configure-collection"></div> ##### Configurer la collection ##### Créer votre premier article <div id="view-customization"></div> ##### Personnalisation des vues ##### Utilisation des parials <div id="static-site-deployment"></div> ## Déloiement en tant que site statique <div id="tips-and-tricks"></div> ## Astuces <div id="conclusion"></div> ## Conclusion