add: fonctionnement de la nouvelle architecture du blog

src/content/blog/fonctionnement-de-la-nouvelle-architecture-du-blog/index.md

@@ -0,0 +1,77 @@
+---
+title: "Fonctionnement de la nouvelle architecture du blog (pour les nerds)"
+pubDate: 2026-09-12
+description: "Je vais vous décrire pourquoi j'ai refait de A à Z mon site de blog et expliquer techniquement le fonctionnement du nouveau et de l'ancien, appuyé par des schémas. Pour mes nerds :)"
+author: "Guams"
+illustration: "illu.jpg"
+tags: ["Dev"]
+---
+
+# Introduction
+
+Ça fait un bail que je n'ai pas sorti de post sur ce blog ! Je n'étais vraiment pas satisfait du rendu que ça donnait  
+![ancien_look](ancien_look.webp)
+Je trouve le style super générique, sans âme et plein d'autres raisons m'ont un peu forcé la main pour changer complètement l'archi et le style.
+![nouveau_look](nouveau_look.png)
+J'ai opté pour une DA SIGNALIS, un jeu indé vraiment cool que j'ai pu jouer au début d'année !
+
+# Les probèmes structurels de l'ancien blog
+
+Pour un peu de mise en contexte : l'ancien site fonctionnait sur une stack Angluar + SpringBoot + Postgres avec Angular pour frontend en CSR (Client-Side Rendering) qui communique avec un backend Spring qui interagit lui avec la base de données Postgres. Donc en résumé une simple SPA (Single Page Application)
+![schéma_SPA](schema_spa.png)
+
+## Le CSR, un problème pour le référencement
+
+Le CSR est primordial pour le fonctionnement d'une SPA, ça permet de générer une page web dynamiquement grâce au navigateur du client mais étant donné que le contenu des pages n'existe pas réellement sans envoyer de requête au back alors les robots google n'ont pas tout le contenu du site pour pouvoir bien le référencer.
+
+## Un problème fondamental de conception
+
+J'ai par flemme conçu mon système pour encoder chacune des images sur les blogs en base64
+. Comme ça au lieu de les stocker sous forme de fichier statique sur le back, je peux les stocker directement en base de données. Problème : une image encodée en base64 est approximativement 33% à 37% plus lourde, donc sur un blog qui contient 23 images (ce qui est le cas de [l'analyse de fire punch](https://kolibri.guams.fr/posts/analyse-de-fire-punch)) donc en cumulant la taille de chaque image ça devient TRES LOURD.
+
+## Un problème de performance
+
+En rapport avec le précédent point, voici qui héberge TOUS mes sites :
+![rpi](rpi.png)
+C'est un Raspberry pi 5 donc le principe de devoir faire une requête lourde de potentiellement quelques dizaines de Mo peut le faire un peu galérer (en fonction de l'internet on peut attendre de 5 secondes à 30 secondes rien que pour récupérer les blogs...).
+
+## Une qualité de code plutôt mauvaise
+
+Angular était mon premier framework web que j'ai appris à utiliser. Et avec du recul, Angular est un assez mauvais choix car en plus d'être lourd et plutôt pas performant, il est difficile à réellement prendre en main (mon ancien blog était en angular 18 mais le framework a beaucoup changé depuis).
+
+SpringBoot de son côté est un super framework pour des API web mais est super complexe à prendre en main (j'ai été formé 1 an à l'utiliser et je ne comprends pas encore réellement son fonctionnement !).
+
+# Le nouveau fonctionnement du blog
+
+Ce nouveau blog est développé en Astro, un framework web plutôt léger qui permet notamment l'interprétation de fichier markdown en page HTML.
+
+L'architecture de l'appli ressemble à ça :
+![headless_cms_schema](headless_cms.png)
+
+Ça ressemble assez vite fait à un headless CMS car le fonctionnement est globalement pareil mais ce n'en est pas vraiment un. Pour expliquer plus en détail le schéma : 
+* Depuis Gitea j'upload des fichiers markdown qui correspondent aux posts
+* Gitea exécute un runner qui va s'occuper de build la nouvelle image docker
+* Le runner sert un site web 100% statique
+
+L'intérêt principal c'est les temps de chargement instantanés.
+
+J'en ai profité pour créer un compte qui s'occupe de commit les blogs aussi, puisque le blog est en rapport avec SIGNALIS 
+![who_is_bro](who_is_bro.png)
+
+# Les avantages / inconvénients de cette solution
+
+
+* \+ Aucun temps de chargement
+* \+ Maintient plus facile (pas de back à maintenir, juste un front)
+* \+ Une interprétation native du markdown grâce à Astro
+- \- Dépend de Gitea
+- \- Le temps de build est très long (surtout sur un RPI)
+![build_time](build_time.png)
+
+# Conclusion
+
+J'ai fait une refonte complète de mon ancien blog avec un style plutôt original, une architecture entièrement différente et j'ai pu expérimenter ma première mise en place de CI/CD.
+
+Je compte faire quelques améliorations concernant le style ou le fonctionnement du site. La version actuellement existante n'est pas finale. J'espère que ma petite tirade aura intéressé quelques nerds... Si vous avez des questions concernant les détails du site, vous pouvez aller lire le code sur gitea (pas encore documenté D:) ou bien m'envoyer un message sur insta ou autre. 
+
+Je vais faire de mon mieux pour rester actif en tout cas !