En parallèle du déploiement de sites sur GitLab, je teste aussi la création d'un blog et d'une page de profil sur GitHub Pages.
La documentation de Docusaurus contient des exemples pour Netlify, Vercel ou GitHub Pages, à retrouver ici : https://docusaurus.io/docs/deployment, mais j'ai tout de même eu besoin de faire quelques ajustements.
Je vais donc détailler un petit peu les actions nécessaires pour un déploiement sur GitHub Pages de votre site Docusaurus.
L'obejctif premier d'un site créé avec Docusaurus est d'être déployé.
Pour mes premiers tests, j'ai hébergé mes repositories sur GitLab, mais malheureusement la documentation de Docusaurus ne contient pas encore d'exemple de pipeline pour GitLab Pages.
La documentation contient des exemples pour Netlify, Vercel ou GitHub Pages, à retrouver ici : https://docusaurus.io/docs/deployment
Je vais donc détailler un petit peu les actions nécessaires pour un déploiement sur GitLab Pages de votre site Docusaurus.
Mermaid.js est une bibliothèque open-source JavaScript qui permet de générer des diagrammes et des graphiques à partir de textes simples. En l'utilisant directement avec Docusaurus, cela permet de mettre au même endroit tous mes schémas as code, et donc de ne pas avoir à gérer différents outils pour générer mes images ou à importer des images stockées ailleurs.
Plus d'exemples dans la documentation de Mermaid.
Quelques types de graphiques intéressants :
Un exemple de GitGraph :
Pour générer des graphs en live : https://mermaid.live
Commencer par importer le plugin @docusaurus/theme-mermaid
npm install --save @docusaurus/theme-mermaid
Dans le fichier /docusaurus.config.js activer le mode Mermaid :
module.exports = {
markdown: {
mermaid: true,
},
themes: ['@docusaurus/theme-mermaid'],
};
Puis dans une page ajouter les balises Mermaid, et mettre le code de votre graphique. Ici pour l'image en début d'article.
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
```