How to build a website using Directus CMS ?

By Rama, published on 26/10/2023, 21:06

5 minutes read

Directus CMS

Dans cet article je vais t’exposer ma réflexion autour des choix techniques que j’ai dû faire pour construire mon blog perso.

T’as sûrement entendu parler de trucs comme Notion, Medium, Dev.to, etc. Il n’a jamais été aussi simple et rapide de créer un blog internet aujourd’hui. La multiplicité de ces outils s’en est allé de manière croissante au fil des années. La plupart du temps, tu tapes sur ton clavier et hop, tu publies !

Seulement l’utilisation de ces outils a coût ; d’abord le prix. Pour Medium il faut débourser la modique somme de $5 par mois pour avoir accès aux articles les plus réputés. Pour Notion c’est 10 € par mois qu’il faut débourser pour accéder au plein potentiel de l’outil. Pourquoi payer alors que je peux une plateforme mieux adapter à mes besoins sans débourser le moindre sous ? Aussi un autre point bloquant est la publicité et les pop-ups enhavissantes. Qui veut être emmerdé par ça ? Cela va avec le dernier point avec l’utilisation de ces outils : le manque de personnalisation du design.

C’est pour toutes ces raisons que j’ai décidé de créer mon blog avec mes propres outils et avec un design établi par moi-même. J’avoue que je ne suis pas faciliter la tâche. Tout ça pour un projet d’école ? Je t’en parle dans cet article, je te conseille grandement de le lire si tu ne l’as pas encore lu.

La stack technique

Apres être sûr que je voulais faire un blog documentant mon apprentissage du WebGL pour mon journal d’apprentissage j’ai commencé à me mettre à l’oeuvre.
Voila la stack :

Vue / Nuxt 3
Typescript
Node.js
Docker
Vercel
Et un serveur NAS Synology

Comme je suis super à l'aise avec Vue, c'était logique de choisir ce framework front-end. Bon, j'ai failli partir sur Angular au début, histoire d'approfondir mes connaissances, car je l'apprenais pour le taf. Mais j'en parlerai dans un prochain article.
De plus, lors de mon précédent poste dans une agence de médiation culturelle, je suis devenu expérimenté du meta-framework Nuxt 3. C'est celui avec lequel je suis le plus à l'aise et ça me permet de coder super vite.

Maintenant que t'as le topo sur la stack, laisse-moi te dire pourquoi j'ai opté pour chaque truc.
Déjà, Vue / Nuxt 3, c'était une évidence. Comme je te disais, je suis super confortable avec Vue, donc ça coulait de source. Et puis, Nuxt 3, c'est le feu pour moi. Ça me permet de coder à fond les ballons, sans me prendre la tête avec des trucs inutiles.
Pourquoi TypeScript ? Ben, c'est un must pour moi. Ça rend le code plus robuste, avec moins de bugs, et ça me force à bien structurer mes projets. Bref, du bonheur en barre.
Node.js, c'est la base. Ça me permet de faire tourner mon backend avec la même techno que mon frontend, donc c'est super fluide.
Directus CMS ? C'est le petit bijou qui me permet de gérer mon contenu super facilement. J'ai besoin de rien d'autre, franchement.
Docker, c'est top pour l'isolation des environnements. Ça me permet de développer dans un environnement propre, sans me prendre la tête avec des conflits de dépendances ou des trucs du genre.
Et Vercel, c'est génial pour le déploiement. J'ai jamais vu un truc aussi simple à utiliser. Tu push ton code et hop, c'est en ligne direct.
Voilà, maintenant tu sais tout sur les choix techniques pour mon blog. Si t'as des questions ou des remarques, lâche-toi dans les commentaires ! Je suis là pour échanger.

Zoom sur le fonctionnement de Directus

Tu es toujours là ? Tu es deep down dans un article long comme un gratte ciel. On est vraiment entre nous maintenant les amis ! C’est maintenant qu’on va rentrer dans le vif du sujet : on va découvrir comment utiliser Directus pour gérer du contenu. Comme pour des articles de blog par exemple !  Todo:   

Installation du CMS avec SQLite comme quickstart
Overview de l’interface
Création d’une première collection “Articles”
Récupération des données de la collection

Installation

Passons au concret : pour l’installation nous allons utiliser un simple CLI NPM qui permettra de rapidement lancer Directus en local. Ce n’est pas adapté pour de la production mais cela nous convient parfaitement pour tester l’outil.  

Initialisation du projet

 Il faut remplacer nom-project par le nom que tu veux utiliser pour ton répertoire de projet.

Il faudra alors définir la database (je conseille SQLite par simplicité) et définir ses identifiants d’administrateur.

Ensuite il suffira de lancer la commande suivante :

Si l’installation se passe bien, le terminal devrait afficher un truc de ce genre :

Après la connexion, on arrive sur le dashboard de Directus :

Tadaa ! 🎉

Dashboard overview

Nous allons maintenant faire un vite aperçu des différentes vues importantes de l’interface de Directus.  Tout d’abord voici la vue du contenu :

C’est ici qu’on gère le content de notre application. C’est un outil puissant qui permet de gérer et d’organiser le contenu de manière flexible et intuitive. Il offre une interface permettant aux utilisateurs de créer, modifier et supprimer du contenu sans nécesiter de compétences techniques avancées.

La page de Data Model offre une vue d'ensemble structurée et visuelle de la manière dont les données sont organisées et interconnectées au sein du système. Elle permet aux utilisateurs de définir et de configurer les différentes collections de données, ainsi que les relations entre ces collections.

La File Library est une interface centrale pour gérer tous les fichiers multimédias utilisés dans un projet. Elle permet aux utilisateurs de téléverser, organiser et partager des fichiers de manière efficace.

Une autre vue importante dans Directus est la page des permissions. Dès qu’on crée une collection quelconque, il faut définir les règles d’accès dans celle-ci.

Première collection

Étape 1 : Il faut d’abord accéder aux paramètres du modèle de données

Dans le tableau de bord de Directus, naviguez vers "Settings" > "Data Model". Cliquez sur le bouton "+" dans l'en-tête de la page, ce qui ouvrira un volet latéral. 

Étape 2 : Ajouter une nouvelle collection

 
Étape 3 : Définir le nom de la collection  Entrez un nom unique pour votre collection. Ce nom sera utilisé comme clé de table de données, clé de collection API et nom de collection par défaut. Notez que ce nom ne pourra pas être modifié ultérieurement, mais il peut être traduit.  

 Étape 4 : Cliquez sur la flèche vers l'avant pour confirmer vos paramètres. Cliquez sur le bouton de validation (check) pour créer la collection.  

 Étape 5 : Configurations des champs

Ajoutez deux champs de type "string" pour le titre et le sous-titre :
- Pour le titre :
  - Nom du champ : "title"
  - Type : "string"
- Pour le sous-titre :
  - Nom du champ : "subtitle"
  - Type : "string"

 Ensuite il faudra ensuite ajouter un builder (M2A) . Le "builder" dans Directus, c'est comme un outil qui te permet de faire des liens entre un élément actuel et plusieurs autres éléments provenant de différentes collections, tu vois ? Par exemple, tu peux avoir un article dans ta collection principale et lier plusieurs images ou morceaux de texte qui sont stockés ailleurs.

C'est super utile, surtout quand tu veux créer des composants de page réutilisables, tu piges ? Comme ça, tu peux ajouter des éléments supplémentaires à ton article sans devoir tout mélanger dans la même collection.
En gros, avec ce "builder", tu peux :

Créer des nouveaux éléments directement dans la collection associée.
Sélectionner des éléments existants depuis cette même collection.
Définir combien d'éléments tu veux voir par page.
Autoriser ou pas le fait d'ajouter plusieurs fois le même élément, tu vois, histoire d'éviter les doublons.

Voilà, c'est comme un outil de lien et de construction qui te donne plus de flexibilité pour organiser tes données comme tu veux.

Attention ! Il faut créer des collections au préable afin de pouvoir les sélectionner. Dans l’exemple ci-dessus j’ai créé “Articles Image” et “Articles Text”. Les collections sont simples, voici à quoi ressemble leur data model :

Une fois les trois fields créés, on devrait un data model qui ressemble à peu près à ça :

Étape 6 : Ajouter le contenu  

Maintenant on va créer un premier article !  Pour cela, on va aller dans l’onglet “Content”, sélectionner la collection nouvellement créée ici, Articles Test puis cliquer sur Create Item. Désormais il suffira de compléter les champs définis dans notre data model.

Et voilà ! 🎉

Fetch les datas

Maintenant je vais utiliser ces données en les récupérant depuis un client. Pour ma part je vais utiliser Vue.js avec l’endpoint GraphQL, mais il y a aussi une API REST que Directus nous fournit.
Pour cela il suffit de faire une requête GraphQL sur ce url endpoint : https://<directus-domain>/graphql

Attention ! Il faut bien modifier les permissions des collections récupérées.