English version
Créer, héberger et maintenir un CMS n'est pas toujours une chose facile.
Nous avons à notre disposition un grand nombre d'alternatives avec leurs points forts et leurs points faibles.
J'ai, au fil des années et des projets, implémenté pas mal d'entre eux. Wordpress, CMS 100% custom, Headless CMS avec Contentful, Strapi ... mais je n'ai jamais réussi à réunir tous les critères que je cherchais :
- Simplicité
- Rapidité de mise en place
- Faible coût d'hébergement (voire aucun, totalement gratuit !)
- Performant
- 100% personnalisable (il n'y a rien de plus frustrant que de ne pas pouvoir sortir du cadre, non ?)
- Avec un domaine personnalisé
- En gardant la propriété de mes données (coucou Contentful !)
- Respectant le RGPD
- Pouvant intégrer facilement des lambdas pour traiter les formulaires
- Je sais, cela semble exigeant, mais je suis habitué au développement sur-mesure, et j'aime offrir à mes clients une solution sans concessions.
Très rapidement, je me suis intéressé à la JamStack, il me semblait que beaucoup de mes critères étaient respectés, mais je n'avais pas encore trouvé comment gérer cela de manière professionnelle.
Comprendre l'architecture JamStack
Le terme "Jamstack" est un acronyme pour JavaScript, APIs et Markup.
Le gros avantage de cette architecture est de se passer de serveurs, ce qui nous offre davantage de sécurité, de performance et facilite la mise à jour du contenu.
Grâce à la génération de contenu statique, nous n'avons même pas de base de données à gérer. Tout est versionné par Git, simplifiant aussi la stratégie de backup, d'historique et nous permet même d'identifier précisément qui est à l'origine d'une modification.
Stackbit
Stackbit est un service SaaS qui facilite la création rapide de sites Jamstack, directement versionnés sur notre dépôt Git.
L'atout majeur de ce service réside dans son interface de gestion de contenu. Le Studio Stackbit offre la possibilité de construire une interface utilisateur de manière intuitive, tout en offrant une personnalisation approfondie des éléments. Cela permet aux équipes de rédaction de gérer le contenu en toute autonomie.
En outre, il offre énormément de personnalisation, directement depuis l'IDE et permet d'aller vers le sur-mesure très facilement.
Netlify
Par défaut, Stackbit est capable d'héberger le CMS, que ce soit avec un nom de domaine personnalisé ou via un sous-domaine stackbit.
Néanmoins, je trouve leur tarification bien trop élevée (90 $/mois à l'heure où j'écris cet article) et il faut souscrire à l'offre payante pour bénéficier d'un nom de domaine personnalisé (entre autres).
Aussi, j'avais besoin d'avoir la main sur certains éléments Netlify, comme les fonctions.
Stackbit permet, dans la configuration du site, de choisir s'il doit gérer, ou non, l'hébergement.
J'ai donc configuré mon projet sur Netlify pour qu'il publie automatiquement tout commit sur la branche "main" de mon CMS.
Et, comme Netlify permet d'avoir un domaine personnalisé gratuitement, j'ai pu modifier l'APEX de mon site en quelques secondes.
Mise en place de la stack
La création du projet NextJS est ultra simple et rapide. J'ai fait le choix de laisser Stackbit le faire.
J'ai juste eu à choisir la techno que je souhaitais utiliser ainsi qu'un thème de base.
Stackbit a stocké le projet sur mon GitHub et a déployé automatiquement le site sur une de ses instances Netlify.
En quelques secondes, je me retrouve avec la stack suivante :
- Un projet NextJS
- Un site statique avec mes pages et données stockées en Markdown
- Une interface d'édition de contenu directement sur Stackbit
- Un projet versionné
- Un site visible en ligne sur un sous domaine netlify
Configuration de Netlify
Comme je souhaite héberger le site sur un Netlify sur lequel j'ai totalement la main, j'ai ajouté le projet sur mon compte Netlify et je l'ai configuré.
Ici aussi, c'est vraiment rapide !
Ainsi, depuis l'interface Netlify:
- Importez un projet existant à partir d'un dépôt Git
- Connectez-vous à votre fournisseur Git
- Choisissez votre projet
- Configurez-le comme ci-dessous:
- Ajoutez la variable d'environnement
NETLIFY_NEXT_PLUGIN_SKIPdéfinie surtrue - Déployez
- Configurez un nom de domaine personnalisé si nécessaire
- Configurez Stackbit pour ne pas gérer l'hébergement directement dans les paramètres du Studio
Personnalisation
Maintenant que nous avons un projet initialisé et hébergé, nous devons être en mesure de le personnaliser pour cocher toutes les cases.
Pour cela, Stackbit, encore une fois, nous rend la chose aisée.
La structure du site repose sur des pages constituées de sections (blocs).
Chaque page est basée sur un layout (un ensemble de sections prédéfini).
Nous allons ici nous intéresser à la création de Section, plus précisément à la création de la section d'erreur.
Dans le cadre du CMS, j'ai besoin de donner la main à l'équipe de rédaction sur le texte de la page 404.
Le module, très simple, permet donc de définir :
- Le titre de la page
- Le H1
- Le H2
- Le texte déscriptif
Pour cela, nous devons d'abord créer le fichier YAML de configuration, .stackbit/models/ErrorSection.yaml:
type: object
label: Error Section
name: ErrorSection
extends:
- Section
groups:
- sectionComponent
fields:
- type: string
name: title
label: Title
required: true
- type: string
name: subtitle
label: Subtitle
required: true
- type: string
name: text
label: text
required: true
Puis nous créons le component NextJS (simplifié ici à son maximum):
src/components/sections/ErrorSection/index.tsx:
import * as React from 'react';
import Picto from "../../atoms/Picto/Picto";
export default function ErrorSection(props) {
return (
<div className="container p-64 flex flex-col md:flex-row items-center justify-center px-5 text-gray-700">
<div className="max-w-md">
<div className="text-5xl font-dark font-bold">{ props.title }</div>
<p
className="text-2xl md:text-3xl font-light leading-normal"> { props.subtitle }</p>
<p className="mb-8">{ props.text}</p>
</div>
<div className="max-w-lg">
<Picto
className={"cat"}
icon="cat"
/>
</div>
</div>
);
}
Enfin, nous devons ajouter la section au registre de composants:
src/components/components-registry.ts:
const components = {
// ...
'ErrorSection': dynamic(() => import('./sections/ErrorSection'))
};
Et c'est fait, notre section est maintenant visible dans notre bibliothèque de sections :
Créer une page
Nous allons maintenant créer la page "not found" depuis l'interface Stackbit et y ajouter notre section. Le fichier suivant sera généré.
content/pages/page-not-found.md:
---
layout: PageLayout
title: "Not Found"
sections:
- type: ErrorSection
title: '404'
subtitle: '...Page non trouvée'
button: 'Accueil'
text: 'Nous sommes désolé, apparement vous essayez de consulter une page qui n’existe pas ou n’est plus disponible'
---
Puisque nous avons créé une page 404, autant indiquer à Netlify de l'utiliser.
Pour cela, il faut ajouter le bloc suivant au fichier netlify.toml:
[[redirects]]
from = "/*"
to = "/page-not-found"
status = 404
Aller plus loin
Et comme nous utilisons le framework NextJS, nous pouvons faire à peu près tout ce que nous voulons.
Si vous souhaitez avoir de l'internationalisation, installez les packages next-i18next ou react-intl (même si je crois que Stackbit a une approche plus simple built-in).
Top comments (0)