Récemment, j'ai démarré Bloggrify en tant que side project. Il s'agit d'un générateur de site statique pour démarrer facilement un blog personnel ou d'équipe et qui utilise des fichiers Markdown.

En 2 semaines, j'ai donc sorti :

• Bloggrify
• une landing page qui en fait la promotion
• avec une documentation
• deux thèmes qui ont chacun un site de démo, Mistral, celui par défaut et Epoxia, un thème premium.
• ce blog a été mis à jour avec le thème epoxia

En considérant que c'est un side project, c'est plutôt pas mal je trouve. Et c'est, en partie, lié au choix de technos. Je vous propose de passer en revue cette stack que je trouve super efficace.

Petit disclaimer, à l'origine je suis plus développeur backend que frontend avec une bonne expérience sur Java et son écosystème en général. C'est important à garder ça en tête en lisant la suite. Mais, depuis quelques années, avec les frameworks web actuels, je considère que c'est super simple de bosser côté front. Et c'est de ces technos dont je vais parler.

Nuxt

Nuxt fait partie de ma stack favorite depuis 2022. C'est un framework qui fonctionne avec Vue.js et qui permet de faire des applications CSR (client side rendering, des sites statiques quoi), SSR (avec un rendu effectué côté serveur), mais également en edge.

Ici, j'ai utilisé Nuxt en CSR. Evidemment ça simplifie énormément les choses puisqu'il y a 0 backend, pas de bases de données, d'authentification etc. Ca aurait été bien plus long de coder tout ça. Mais surtout, pour un moteur de blog, ce serait assez inutile à mon sens.

J'avoue que quand je vois la complexité d'un outil comme Wordpress et sa consommation serveur, quand on l'utilise juste pour un blog, je pige pas que ce soit encore le choix de base pour la majorité des personnes.

Et une des grandes forces de Nuxt c'est son écosystème.

Nuxt-content

Nuxt-content fait partie des modules réalisés par l'équipe Core de Nuxt. C'est le cœur même de Bloggrify puisque c'est le moteur qui convertit l'ensemble des fichiers markdown en pages web. C'est donc 80/90% de Bloggrify. Bloggrify s'occupe des fameux 10/20% restants qui prennent du temps, la gestion de sitemap, de robots.txt, le theming, le flux RSS, le système de commentaire, l'analytics etc.

La grande majorité de ce que j'ai rajouté venait de mon site perso : eventuallycoding.com ce qui m'a bien sûr fait gagner du temps.

Je peux cependant difficilement ranger nuxt-content dans la poche avant de ma boite à outils de tous les jours puisque c'est un outil qu'on sort pour un usage très spécifique. Mais c'est un coup de cœur quand même.

Docus

C'était la première fois que je l'utilisais, mais il m'a permis de créer la doc de Bloggrify en 1h de temps. Ensuite, j'ai mis 1h pour comprendre un souci idiot de build ^^ Docus se base lui aussi sur nuxt-content, mais démontre qu'on peut utiliser ce framework pour un autre usage, ici, faire une doc pro de façon très simple.

Tailwind

Tailwind, c'est un framework d'utilitaires CSS. C'est pas un design system à la bootstrap, material UI etc. C'est "juste" un ensemble de classes permettant de construire ce qu'on veut. Je sais que tailwind ne fait pas l'unanimité parce qu'il permet de mettre plein de code CSS dans le code HTML.

Et pourtant, j'adore Tailwind.

Il a une bonne adoption donc il existe des tas d'exemples en ligne pour reproduire un très grand nombre de composants. J'aime beaucoup ces classes de type dark: ou hover: qui permettent de simplifier l'usage des pseudo classes CSS.

Je suis très loin d'être un bon dev front et pourtant j'ai pu produire une landing page totalement acceptable, responsive, ainsi que deux thèmes accessibles et responsives en très peu de temps. Et c'est vraiment grâce à tailwind.

Netlify

Netlify c'est l'outil que j'utilise pour déployer des sites statiques. C'est TRES simple d'usage. On donne le repo github, et c'est parti. Netlify fait le build et le déploiement. Je passe sur toutes les fonctionnalités de Netlify mais rien que ça, et pour 0 euros par mois. Ca permet d'avoir 5 sites en lignes, statiques, pour rien du tout.

Maintenant je ne cache pas que quand j'ai vu ce tweet, j'ai un peu flippé :

https://twitter.com/daniel_nguyenx/status/1762383650765910034

Il s'agit d'une personne qui a vu une hausse de traffic anormale liée à des bots. Et ça a généré une facture de 104k dollars. Dans ce cas précis, netlify a annulé la facture parce que ça a fait le buzz. Mais bon, même 500 balles ça me ferait suer.

Si vous avez des alternatives aussi simples que Netlify à proposer, ça m'intéresse beaucoup en commentaires :)

Midjourney

Je cite midjourney dans cette liste, c'est un peu surprenant mais, midjourney m'a permis de créer le logo de Bloggrify, les images d'avatar masculin et féminin utilisé dans les deux templates, le logo de mon propre blog et sa bannière.

Donc bien sûr, ce n'est pas un outil de productivité de tous les jours, mais ça m'a sauvé un temps certain ^^

Chatgpt et copilot

Je ne pense pas qu'il soit encore nécessaire de les présenter. J'ai plein de cas d'usages différents avec ces deux outils-là. Mais pour en montrer un, je vous invite à lire ce code. À partir de la ligne 14, tout a été proposé en une seule fois par copilot. Ce n'est pas un code difficie à faire. Mais ne pas l'écrire a permis de gagner du temps. Et comme c'est plutôt fréquent, la somme de temps gagné tous les jours est astronomique. Par exemple chatgpt et copilot sont aussi très forts pour proposer et corriger des layouts CSS avec tailwind, y compris à partir d'une capture d'écran...

Voilà, j'ai fait le tour de cette stack. Je pense qu'on ne se rend pas toujours compte de la facilité d'écrire des apps en solo versus il y a plusieurs années. Les frameworks sont plus puissants. L'IA permet de pallier au manque d'expertise sur les parties qu'on ne maitrise pas. Je suis bien conscient que je n'ai pas couvert le backend ici puisque je n'en avais pas besoin. Je creuserai sans doute plus tard pour une autre idée que j'ai en tête.

a+