Quand on arrive sur le site d’un développeur , on arrive parfois à le mettre dans telle ou telle case. Un portfolio ultra bien léché avec des animations sera celui d’un développeur front, un fichier txt sera celui d’un sysAdmin.
Ici vous arrivez sur un petit conteneur Docker, bien rangé dans un petit environnement chez GCP.
En réalité, ce sont deux applications qui tournent, mais j’y reviendrai un peu plus bas.
Récemment, je me suis dit que l’interface de Notion était vraiment très sympa pour écrire. Et quand j’ai dû créer mon nouveau blog, j’ai un peu fait le tour des solutions, et finalement, à part réinstaller un Wordpress j’ai rien trouvé de bien fou.
J’aurais pu utiliser un headless CMS, mais franchement, rien ne fait beaucoup envie pour la rédaction.
Et puis, il fallait bien un peu de matière pour ce premier article qui va uniquement vous expliquer comment ça marche.
Du coup je me suis dit que j’allais utiliser Notion, juste Notion. Donc dans l’ordre:
Dans Notion, j’ai créé une “Database” qui contient tous mes articles. Ils peuvent avoir différents statuts, les articles que vous lisez sur ce blog étant ceux en Status > Done
Je gère tout ce qui est en rapport avec l’article directement dans Notion. Comme les tags, le slug (la partie URL du lien de l’article), la description. La cover de la page Notion définit l’image de couverture de l’article sur le blog.
Et ensuite je rédige mon article directement sur Notion, en utilisant toutes les fonctionnalités de l’éditeur. Que ce soit pour écrire mon code, mettre en gras, ou même coller des images:
J’ai ensuite un petit service NodeJS, qui va toutes les 15 minutes aller lire l’intégralité de mes articles et les stocker dans une base MongoDB.
Durant cette partie, j’effectue également une petite transformation, étant que je vais aller stocker dans un Bucket GCP toutes les images de Notion pour pouvoir les contrôler moi-même, je vous explique ça un peu plus bas.
J’utilise ensuite Astro , un framework qui permet de générer des sites statiques avec juste du CSS très peu gourmands pour le client.
C’est ce genre de projet qui promet des scores démesurés sur le speedtest de Google .
Bon, en vérité, moi je préfère faire du rendu serveur à la volée, qui me permet d’être un peu plus libre dans tout ce que je peux proposer sur mon site. J’ai donc activé le mode SSR, pour les connaisseurs.
Ensuite, Astro est quand même sympa pour faire des petits sites rendus sur serveurs avec uniquement du javascript. Bref, j’ai fait ça, ça pourrait changer, on s’en fout un peu.
Bref, depuis Astro je lis les articles dans MongoDB et je les affiche sur vos beaux écrans. Et tout ça beaucoup plus rapidement que si j’appelais l’API Notion,
Et ensuite théoriquement des gens lisent ces lignes. Mais pour savoir, si des gens me lisent, j’ai possiblement deux armes:
Bon j’ai utilisé Google Analytics toute ma vie, franchement, c’est cool pour savoir combien de personnes ont cliqué je ne sais où et encore, mais au final au fil de mes expériences, il ne faut pas faire confiance aux chiffres de Analytics ou de ces genres d’outils à la con. De toutes façons ils sont presque interdits par la RGPD on y comprend plus rien.
Donc en vrai, j’ai des bons logs serveurs que je sais traiter, ça me suffit largement pour l’instant pour savoir que personne ne vient sur mon site.
Mais je me suis dit quand même, quand on écrit des articles de Blog c’est cool quand des gens nous disent soit que ce qu’on a dit pue la merde, soit que ça les a fait marrer ou dans le meilleur des cas que ça les a aidé.
Et parfois certains disent
Ha ouais là, je veux faire un peu comme toi mais je galère à faire ça parce que ci ou ça
Et du coup une discussion peut se lancer.
Tout ça pour que je me dise, il me faut un espace de commentaires!
Mais pareil, flemme de coder un système de commentaires, je vais plutôt utiliser Discord il sait très bien le faire.
Les commentaires en dessous de ces articles, fonctionnent de la façon suivante:
.png?w=80&h=80&f=webp)
DiscordThreadId qui comporte une valeur.
Une fois que ces étapes sont passées, quand vous arrivez sur un article, je lance un petit composant VueJS qui va appeler les commentaires du thread en question.
J’ai aussi permis à tout un chacun de déposer un commentaire directement depuis le site sans passer par Discord, pour éviter toute barrière tant que je n’ai strictement aucun lecteur. Le bot se charge d’aller poster le message dans le thread. On a donc une véritable communication entre les commentaires sur mon site et le Discord de ma pseudo communauté faite de mon bot et moi.
Bon je vais pas vous mentir je suis le genre de con qui a un iPhone et un Mac mais qui est un fanboy de la suite Google. Et un hater de Amazon, mais j’utilise quand même un de leurs services de CDN parce qu’il est facile à utiliser, qu’il marche bien et qu’il coûte pas trop cher.
J’ai deux services qui tournent sous Cloud RUN, le premier qui est chargé de faire les mises à jour MongoDB et Discord, et le second qui va juste être utile pour servir le front.
Dans le premier service, j’ai aussi un point d’entrée qui est capable d’aller chercher les images que j’ai sauvé de Notion et d’effectuer une transformation dessus par l’URL (genre largeur, hauteur, format, etc...).
C’est ce point de terminaison que j’ai allègrement recouvert du CDN CloudFront d’AWS pour vous faire profiter d’une expérience hors du commun en chargement d’images (au format WebP!).
Les CRONS sont déclenchés à l’aide de Cloud Scheduler, qui me permet donc d’avoir une console à peu près gratos qui fonctionne.
En ce qui concerne Mongo je me suis pris un compte de bébé chez Atlas gratuit pour rien avoir à héberger
Et ben écoutez pour être honnête pour l’instant ça me coûte vraiment pas grand chose voire 0 euros si vraiment on continue sur ce trend de 0 lecteur.
Dîtes-moi en commentaire si le sujet vous intéresse 👇