Un CMS avec Stackbit, Netlify et NextJS

English version

A CMS with Stackbit, Netlify and NextJS

Xavier Dubois 🇫🇷 ・ Apr 21 ・ 5 min read

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_SKIP définie sur true
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).

Blog