7 septembre 2022
En tant que développeur front, il était évident pour moi de construire mon blog de zéro. Pour autant, il faut que la stack reste simple et très personnalisable.
Mon framework de cœur est ReactJS. C'est celui que j'utilise tous les jours dans mon travail, et celui que je maîtrise le mieux.
Pour un site qui a vocation à être correctement indexé par les moteurs de recherche, il est important de pouvoir faire de la génération statique. Pour cela, j'utilise NextJS, un meta framework que je connais bien et qui est très versatile.
NextJS permet aussi bien de faire la génération statique (SSG: Server Side Generation) que du SSR (Server Side Rendering). Il est également possible de faire du rendu uniquement côté client pour des parties applicatives qui ne seront pas indexées.
Pour finir, j'utilise TypeScript depuis quelques semaines. Couplé aux bibliothèques écrites en TypeScript, il permet de gagner en productivité avec une autocomplétion bien plus efficace dans nos IDEs. La vérité est que parfois son usage est trop lourd pour un simple blog, mais c'est un excellent exercice pour s'habituer et explorer les possibilités et les difficultés que je pourrais rencontrer avec TypeScript dans mon travail.
Pour le style, après avoir testé beaucoup de solutions ces dernières années, j'ai choisi mon outil préféré du moment : Chakra UI. Chakra est un meta framework de composants React, permettant de construire des interfaces rapidement et de façon très personnalisable.
Chakra fournit non seulement des composants stylistiques, mais aussi des composants
fonctionnels et les hooks qui vont avec. Je pense par exemple au composant <Collapse />
et le hook useDisclosure() qui permet de faire des menus déroulants très facilement.
function CollapseExample() {
const {isOpen, onToggle} = useDisclosure();
return (
<>
<Button onClick={onToggle}>Toggle Collapse</Button>
<Collapse in={isOpen}>
<Box py="2">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Box>
</Collapse>
</>
)
}
Chakra est inspiré de Tailwind CSS, et ressemble un peu à une bibliothèque de composants headless (des composants très fonctionnels avec peu/pas de style). Chakra apporte certe une pâte graphique reconnaissable, mais est vraiment très personnalisable.
La personnalisation passe par un thème sur lequel on peut personnaliser chaque valeur ainsi que créer des variants. Un variant permet d'appliquer un style particulier avec une seule props sur un composant, et en gardant la possibilité de modifier les autres props.
<HStack>
<Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">ghost</Button>
<Button variant="link">Link</Button>
</HStack>
Pour l'hébergement, j'ai choisi Vercel. Connecté à mon repository privé Github, il
me permet de déployer automatiquement mon site à chaque push sur la branche main.
Mes branches parallèles de développement sont également déployées, pour tester en direct
les changements sur leurs serveurs, et l'impact sur les tests Lighthouse.
Pourquoi cette solution ?
Ces points font que j'ai choisi Vercel plutôt qu'un serveur VPS par exemple que j'aurais eu a manager moi-même. Prochainement, je déploierai sûrement sur mon homeserveur (un serveur chez moi) des microservices pour par exemple ajouter un compteurs de vue sur les articles.
Si savoir configurer correctement un VPS est très intéressant voir indispensable selon moi, je pense que parfois, il faut savoir utiliser des outils simples lorsqu'ils sont adaptés à nos besoins. C'est le cas ici de Vercel avec un site statique.
Pour la gestion des articles, j'ai choisi une solution qui m'offre beaucoup de liberté : le MDX
Le MDX est un format de fichier qui permet d'écrire du Markdown avec du JSX. L'idée est de pouvoir écrire des articles en Markdown, mais aussi d'ajouter des composants React au besoin.
J'ai fait le choix de ne pas utiliser de CMS pour une personnalisation bien plus simple pour ajouter du contenu complexe. Le désavantage est que je dois écrire mes articles via mon IDE ou directement sur Github. Ce n'est pas vraiment un problème dans mon cas.
Je n'utilise pas @next/mdx. L'outil nous oblige à mettre les fichiers avec nos pages et
n'est pas des plus pratiques et personnalisable à mon goût. Je préfère avoir mes articles
dans un dossier à part et générer mes pages et leur route moi-même.
Pour cela, j'utilise next-mdx-remote. Je charge mes fichiers MDX lors des
getStaticPaths et getStaticProps avec fs et je les passe à next-mdx-remote qui
me retourne un objet avec le contenu de l'article et les métadonnées frontmatter.
Mon arborescence est la suivante : /ressources/[category]/[slug].mdx
Mes articles ne sont pas triés avec une catégorie en metadonné, mais avec un dossier. Cela me permet de mieux m'y retrouver dans mon arborescence. Tout ce contrôle me permettrait plus tard, de modifier cette arborescence pour ajouter des dossiers de dates sans impacter le rendu du blog.
La bibliothèque permets de modifier les composants utilisés pour rendre le markdown en html.
Cela me permet d'utiliser pleinement le potentiel de Chakra UI sans avoir recours à
une feuille de style. Cela me permet également d'utiliser next/image pour optimiser
mes images.
J'utilise gray-matter pour récupérer les métadonnées pour générer la page d'accueil
du blog. Cette bibliothèque est bien plus légère dans ce cas, car elle ne traite pas
le markdown.
Comme je l'ai évoqué, je voudrais ajouter un système de comptages de vues des articles. Ainsi qu'un système de like pour à terme créer un classement des articles.
Il se peut aussi que j'intègre un système de playground pour mieux expliquer du code en permettant de l'éditer et de voir le rendu en live.
Je vous encourage à tester les outils dont je parle, mais sans pour autant chercher à reproduire mon architecture. J'ai pensé ce blog en fonction de mes problématiques et de mes habitudes. Faites ce qui vous ressemble !