Gregordy.com fête ses 10 ans !

Retour sur les différentes évolutions techniques, esthétiques (et même thématiques) derrière ce blog que j'affectionne tant.

10 ans.

Ce site a désormais 10 ans.

Plus exactement, depuis le 26 juin 2024, Gregordy.com a officiellement fêté sa dixième année d'existence. Ou plutôt de présence sur internet — sa création étant en réalité bien antérieure.

Aujourd'hui, je reviens sur les différentes évolutions du site.

Cela inclura les frameworks utilisés pour chaque version mais aussi les changements au niveau du contenu, des polices de caractères et de bien d'autres joyeusetés.

Rembobinons l'histoire et commençons par le commencement.

La toute première version #

J'ai créé la toute première version de Gregordy en juillet 2014.

Et je pense l'avoir mise en ligne aux alentours de décembre de cette même année. En fait, quand j'y repense, je ne suis même plus sûr que cette version était vraiment accessible en ligne 😬.

Tu te demandes peut-être à quoi elle ressemblait ?
Eh bien, à ça.

À cette époque, cela ne faisait qu'un an ou deux que j'avais commencé la programmation. Et je dois l'avouer, j'avais déjà une forte envie d'écrire.

C'est principalement ce qui m'a poussé à créer pour la toute première fois mon site personnel : gregordy.com.

Contenu #

Alors là, j'ai un peu honte d'en parler.
Mais bon, cet article étant spécial je vais tout de même le faire.

Étant donné que cette version du site date de plus d'une décennie, j'ai dû retourner voir dans mes backups qu'est-ce que j'écrivais à l'époque.

Et j'ai trouvé, oooh oui que j'ai trouvé.

Sur quoi donc j'écrivais ? Eh bien... sur à peu près tout.

Dans mes archives, j'ai retrouvé des articles sur :

• les différents types de sushis
• les formes de visages et les coiffures qui s'accordent le mieux
• les effets du manque de sommeil
• les chambres anéchoïques
• le fait que Poutine aurait Asperger.

Et bien évidemment, des tas d'articles sur la technologie !
Ehhh ouais, même à l'époque, je ne m'appelais pas Gregordy pour rien.

En parcourant les archives d'articles tech, j'ai (re-)découvert que je traitais des :

• meilleures applications Android (de 2015 !!)
• parts de marchés grandissantes de Xiaomi
• sites les plus pratiques pour créer son CV
• meilleures optimisations pour son SSD
• avantages et inconvénients des différentes technologies d'écran
• easter eggs du web
• et plus encore.

C'était varié (pour ne pas dire dispersé).

Afin de rendre hommage à cette toute première version, j'ai décidé de ré-uploader quelques-uns de ces articles — par pure nostalgie.

Tu les trouveras dans ma catégorie tech. Comme j'ai réutilisé leur véritable date de publication, ils seront placés en toute fin de la page.

S'il te plaît, ne rigole pas trop. J'étais jeune à l'époque.

Framework #

Je n'y crois pas moi-même mais c'est bien vrai : à cette époque, j'utilisais déjà un framework !

Je pensais que pour la toute première version de mon site j'avais juste assemblé des tas de fichiers HTML ensemble, et que je les aurais ensuite juste jetés maladroitement en ligne, mais non !

J'ai vraiment utilisé un framework la toute première fois que j'ai construit mon site. J'en suis encore impressionné.

*Se jette des fleurs à soi-même*

À cette époque, je me suis pris d'affection pour Pico CMS . Je me souviens avoir beaucoup aimé l'approche flat-file qu'il permettait.

Chaque article vivait dans un simple fichier Markdown et, petit spoiler : encore aujourd'hui (en 2025), ça reste ma méthode préférée pour rédiger des posts.

Comme tu le constateras dans les prochaines sections, bien que le Markdown soit resté ma façon préférée de m'attaquer au contenu, bien d'autres choses ont changé.

Gestion du JS & CSS #

Le thème Pico CMS que j'ai choisi (nommé Forging) utilisait Gumby en interne. Le CSS et le JS étaient donc packagés ensemble par le framework.

Je ne me souviens pas avoir utilisé quoi que ce soit de particulier en plus de cela. Pas de bundle minifier, pas de préprocesseur CSS, rien de fancy.

Mis à part quelques classes CSS personnalisées, rien de bien fou.

Polices de caractères #

Tu le sais peut-être mais je suis un taré de fonts.

Je peux passer des heures (voire des jours 🤐) à rechercher la combinaison de polices qui m'inspirera un certain sentiment dès le premier regard.

Sentiment qui, au fur et à mesure de ma lecture, s'accentuera quand je constaterai complètement consterné à quel point elle embellit les lettres, mots et phrases qui ponctuent l'écran sur lequel elles reposent.

Toutefois, pour la toute première version de mon site, je n'étais pas encore tombé dans le chaudron de fonts.

J'utilisais donc les polices suivantes.

Titre du site (Gregordy) : Nova Flat.
Titres : Open Sans (graisse 400).
Corps de texte : Open Sans (graisse 300).

Hosting #

Pour cette toute première version, tout était sur un VPS OVH.

Je gérais donc mon serveur moi-même comme un grand.

Les mises à jour de l'OS, les redémarrages après celles-ci et... les vérifications que rien n'était cassé à l'issue de ces reboots.

Pas très industrialisé tout ça mais bon, c'était le début, n'est-ce pas ?

Processus de déploiement #

Un mot : FTP.

Oui, à cette époque c'était clairement le mode de déploiement (si on peut appeler ça comme ça) que je privilégiais.

Un petit glisser-déposer des familles dans le dossier FTP du VPS que j'utilisais pour héberger mon application PHP (car oui Pico était écrit en PHP) et le tour était joué.

Pas de build.
Pas de CI .
Pas de Git.

"D'ailleurs, c'est quoi Git ?" (Dirait le moi de l'époque.)

Gregordy 2.0 #

C'est la version que j'ai créée en février 2017. Elle est restée comme telle jusqu'en Q1 2021.

Grâce à la Wayback Machine, tu peux encore consulter cette version à cette adresse .

Contenu #

Cette version était pour un temps entièrement en français.

C'est alors que j'ai commencé à internationaliser mon site. J'ai ajouté l'anglais avec comme objectif la traduction de plusieurs de mes articles dans cette langue.

Au final, ça demandait bien plus de temps que prévu.

Peu d'articles en anglais ont vu le jour pour cette version bien que la volonté était là.

Le pire ?

J'ai même ajouté le japonais comme troisième langue du blog.

Après cela, ce fut le drame.
Aucun article en japonais n'a vu le jour.

Tout était prêt pour accueillir des articles dans ces deux nouvelles langues :

• internationalisation des URLs et du SEO
• ajout d'une dropdown dans le header pour la sélection de langue
• les icônes des différents drapeaux dans le footer pour une navigation plus simple.

Icônes que j'ai même inlined dans le HTML pour réduire le nombre de requêtes HTTP effectuées par le site et donc accélérer son chargement.

Au bout du compte ?

J'ai fini par comprendre la quantité de travail supplémentaire que traduire chaque article en plusieurs langues représentait.

Je me suis donc uniquement concentré sur les articles en français.

Framework #

Quelle n'a pas été ma surprise en découvrant que pour cette version... je suis resté sur le même framework !

C'était encore Pico qui animait mon site !

J'ai toutefois ajouté une fonction de recherche d'articles que j'ai rendue possible en implémentant un petit algorithme fait maison.

Elle était accessible en cliquant sur la loupe tout à droite du menu de navigation (visible sur la capture d'écran située deux sections plus haut).

Gestion du JS & CSS #

Alors là, il y a matière à discuter.

En ce qui concerne le CSS, c'était plutôt simple. Je n'utilisais qu'un simple styles.css personnalisé dans lequel j'avais tous mes... styles personnalisés. (Incroyable.)

C'est au niveau du JS que c'était, disons, rigolo.

À cette époque (2017), je découvrais tout juste les frameworks JS. Et je ne souhaitais pas encore en intégrer un à mon site.

Du coup, j'ai fait autrement.

Le plus gros de la logique (pour la fonctionnalité de recherche d'articles, ou le tri des articles par date et catégorie) était fait dans des fichiers de templating Twig .

J'utilisais modernizer.js pour la détection des features CSS3 et HTML5 disponibles pour l'UA qui visitait le site, typed.js pour les animations de saisie de caractères sur la page d'accueil et micromodal.js pour l'affichage des fenêtres modales.

Polices de caractères #

C'est avec cette version de mon site que j'ai découvert une police de caractère qui est restée ma préférée, et cela pendant des années :

Sorts Mill Goudy.

Je la reconnaîtrais entre mille.

Et c'est bien elle qui a pris la place de l'ancienne pour le corps de texte.
Pour le reste, voici les détails.

Titre du site (Gregordy) : Quicksand (graisse 400).
Titres : Quicksand (graisse 400).
Corps de texte : Sorts Mill Goudy.

Ehh oui, comme tu l'auras constaté, je n'utilisais que deux polices pour cette version de Gregordy.com.

Le titre du site et tous les titres (headings) partageaient exactement la même font et la même graisse.

Hosting #

Pico CMS nécessitant PHP, j'avais toujours mon VPS chez OVH.

Je "m'amusais" donc encore à installer et maintenir toutes les dépendances requises pour faire fonctionner le site ainsi que celles nécessaires pour les à-côtés.

Oui, oui, tout ça manuellement.

Que ce soit NGINX, PHP 5, le serveur FTP qui me permettait d'uploader mes fichiers compilés localement sur ma machine (hum, je sais, je sais), ou toute autre dépendance requise pour que l'ensemble fonctionne, je faisais tout manuellement.

Processus de déploiement #

Je venais de me prendre de passion pour un certain outil nommé Git.

Est-ce que ça veut dire que j'avais un beau pipeline de déploiement où chaque commit poussé sur mon repository déclenchait un build qui — quand il passait — entraînait le déploiement automatique de mon merveilleux site ?

Ah pas du tout.

Durant cette période, les notions même de CI/CD m'étaient encore plus qu'inconnues. Et les outils permettant la mise en place de tout ce beau monde ? N'en parlons même pas.

Non, non, ce que je faisais c'est que je glissais-déposais ENCORE mes fichiers sur mon VPS depuis mon client FTP après les avoir attentivement préparés localement.

Pour le côté industrialisation, on repassera.
Les choses étaient toutefois sur le point de changer.

La troisième version de Gregordy.com #

J'ai publié cette version en avril 2022.
Voici à quoi la page d'accueil en français ressemblait.

Bien que d'apparence minimaliste, il y en a des choses à dire sur cette version. À commencer par son contenu !

Contenu #

Avec cette nouvelle version, j'ai décidé que mon site serait principalement en anglais.

Je souhaitais l'utiliser en tant que portfolio pour obtenir un job au Japon. J'ai donc axé le contenu sur mes compétences techniques, les projets que j'ai réalisés, et quelques articles techniques.

Aussi, j'ai remplacé le orange par du rouge foncé.

Que ce soit pour la couleur des liens, ou celle des composants UI, j'ai dit aurevoir au orange. Comme mon blog, ma personnalité a évolué et le rouge foncé est devenu ma couleur préférée.

Enfin, c'était ma première tentative de créer un site qui présentait :

• mon profil technique (avec deux pages dédiées à le détailler)
• et mes productions écrites.

La section "Blog" amenait sur une partie de mon site où le menu de navigation principal affichait toutes les catégories d'articles disponibles en place des pages dédiées à mon profil technique.

Avec le temps, j'ai compris que cet aspect était plus que perfectible.

Framework #

Cette version apportait du changement, et quel changement !

Je me suis découvert une attirance pour la Jamstack . Et avec elle, je me suis intéressé à Vue.js. Connaissant déjà très bien Angular, je souhaitais quelque chose de plus simple pour mon site personnel.

C'est à ce moment-là que j'ai découvert Gridsome .

Si l'anglais ne te rebute pas, je décris plus amplement ce qu'est Gridsome dans cet autre article.

Cette découverte marqua le début d'une nouvelle ère pour mon site.

J'ai dit au revoir au PHP et à toute fonctionnalité de rendu côté serveur. J'envisageais alors l'avenir uniquement composé du couple framework JS et Static Site Generator.

C'est surtout ce dernier type d'outil qui eut toute mon attention.

Particulièrement grâce aux bénéfices qu'il apportait pour les besoins d'un site statique. Type de site que mon blog est à 100 %.

Gestion du JS & CSS #

Niveau CSS, c'est avec cette version de mon site que j'ai commencé à apprendre Tailwind CSS.

Bien que je n'étais pas complètement sûr de l'utilité de ce framework au début, avec le temps, j'ai fini par ne plus jurer que par celui-ci.

Le plaisir que c'est d'avoir des classes CSS prêtes à l'utilisation et de ne pas avoir à créer de classes personnalisées pour le moindre petit besoin de design.

Absolument génial.

Côté JS, j'utilisais Vue.js (car c'est le framework sous-jacent de Gridsome). Tout mon code Javascript était donc proprement organisé au travers d'une multitude de fichiers courts qui ne contenaient que les éléments nécessaires à leur propre fonctionnement.

Polices de caractères #

Plus je scrutais cette version, moins je l'aimais. Et je pense que c'est la première fois que mon site me donnait cette impression.

Surtout aussi rapidement.

J'ai fini par me dire que la police pour le corps de texte n'était pas si lisible que ça et que l'espace que j'avais donné aux paragraphes et aux titres ne semblait, au final, pas très homogène.

Aussi, j'utilisais trois polices dont voici les détails.

Titre du site (Gregordy) : Space Mono.
Titres : Averia Serif Libre.
Corps de texte : Scope One.

Soit dit en passant : gros coup de cœur pour Space Mono .
Je trouve cette police absolument sublime.

Hosting #

Netlify, Netlify !

Avec cette version, et mon engouement pour la Jamstack, je me suis évidemment pris de passion pour Netlify !

Finis la configuration de serveur, fini les mises à jour manuelles de dépendances ou encore les montées de version de Debian. Bye bye la complexité et bonjour la simplicité.

Le meilleur dans tout ça, c'est que Netlify est totalement gratuit !

Grâce à ce dernier point, le ROI de mon site s'en trouvait automatiquement décuplé. (Bien que les revenus soient de zéro haha.)

Processus de déploiement #

Là aussi, beaucoup de changements.

Cette version de Gregordy.com disposait d'un repository connecté à Netlify. À chaque commit sur une branche autre que master, un déploiement de staging était lancé et je pouvais vérifier grâce à une URL spécifique que le site était bien dans l'état désiré.

Est-ce qu'on peut mieux faire ?

Oui, on peut toujours faire mieux.
(Par contre, est-ce qu'il le faut ? Là est la question.)

Avec ce nouveau processus de déploiement davantage streamlined et industrialisé, mon site personnel a vécu plutôt heureux pendant un peu plus de trois années.

Et sans surprise, c'est durant ce même laps de temps qu'une nouvelle envie de changement commença à émerger.

La quatrième (et actuelle) version de Gregordy.com #

Tout cela nous mène à aujourd'hui !

Avec sa quatrième version, Gregordy.com revêt une apparence qui doit forcément t'être familière. : ]

Oui, tu auras remarqué que j'ai gardé exactement la même couleur pour l'arrière-plan. Toutefois, de nombreuses autres choses ont changé... en arrière-plan. (🙃)

Contenu #

Depuis cette refonte, j'ai décidé de passer au tutoiement pour la version française.

Aussi, j'ai décidé d'axer le contenu sur les différents types d'écrits que je produis.

C'est pour cela que les principales catégories accessibles depuis le menu de navigation sont désormais :

• articles
• histoires
• et livres.

Pour rappel, avec la version précédente c'était "Projets", "Compétences" et "Blog". Cliquer sur cette dernière catégorie changeait totalement le menu de navigation.

Niveau UX, c'était un peu confus et embrouillant. Je suis content d'avoir changé cela et j'espère que tu l'apprécieras également.

Aussi, le but de mon site étant désormais différent, il est normal que cette partie ait changé en ce sens, n'est-ce pas ? : }

Framework #

Ici, gros changement !

Gridsome n'étant plus maintenu, j'ai décidé de changer de framework. Je suis passé sous 11ty et...

Ô ciel ! que j'aime 11ty !

Que ce soit pour la rapidité de build du site, la documentation extensive, l'absence de Javascript par défaut et — de manière générale — l'approche minimaliste d'11ty, je suis juste conquis !

Gestion du JS & CSS #

J'utilise encore Tailwind ! En version 4 cette fois-ci.

Grâce à ce merveilleux framework, je n'ai plus vraiment besoin de me soucier du CSS.

Tout ce qu'il me reste c'est un unique fichier dans lequel j'utilise les directives CSS de Tailwind pour appliquer un ensemble de styles à des éléments récurrents (tels que p, ul ou encore kbd).

Voici un exemple.

Tu en conviendras, c'est bien plus propre et scalable que de répéter ces styles à chaque endroit où ce genre d'éléments apparaissent.

Pour ce qui est du JS, il n'y en a quasiment pas.

Les rares fois où j'en utilise, c'est dans certains fichiers Nunjucks. J'écris les quelques lignes dont j'ai besoin et elles sont toutes ajoutées à un mécanisme qui exécute ces instructions quand nécessaire.

Je suis resté dans l'esprit minimaliste d'11ty et je voulais — de toute façon — avoir un site contenant le moins de Javascript possible.

C'est chose faite !

Polices de caractères #

Alors là ... là oui !

Là oui je suis content avec les nouvelles polices que j'ai trouvé (après mille ans de recherches et de tests) et que j'ai décidé d'utiliser pour cette nouvelle version.

Sans grande surprise, ce sont les polices sur lesquelles tes yeux naviguent depuis le début de cet article.

Sans plus attendre, voici leurs doux noms.

Titre du site (Gregordy) : Sofia Sans Extra Condensed.
Titres : Gloock.
Corps de texte : Funnel Display.

Qu'en penses-tu ?
Ne sont-elles pas magnifiques ?
Dis-moi tout ici .

Hosting #

Après avoir longuement utilisé Netlify, j'ai finalement migré vers Cloudflare .

Bien que ça ait peu de chances d'arriver, Netlify a une limitation de bande passante fixée à 100 Go par mois.

Avec le nombre de LLMs scrapant les sites de nos jours, qui sait, ce n'est peut-être pas si tiré par les cheveux ...

Pour être 100 % serein, et profiter des avantages tels qu'une résolution DNS plus rapide et les Workers Cloudflare, j'ai fait le switch pour Cloudflare.

Depuis, je suis plus que ravi !

Processus de déploiement #

Ici, ça reste similaire à la troisième version.

Une fois mes modifications apportées sur mon Git local, j'envoie le tout sur mon repository GitLab.

Il est configuré pour déployer automatiquement sur un environnement de test les derniers changements effectués.

Une fois ces changements validés, je fusionne la branche les contenant avec la branche main pour déclencher le déploiement.

Bien que ce soit pour un simple site statique, j'aime me dire que j'ai industrialisé son processus de déploiement. Comme tu le vois, entre la précédente version et celle-ci il n'y a pas réellement eu d'évolution.

Parfois, quand les choses sont déjà bien faites, c'est agréable de simplement les apprécier en l'état.

Une prochaine version ? #

Je n'en prévois pas ... encore.

Cela ne veut pas dire qu'il n'y en aura pas, mais je suis plus que satisfait de cette toute nouvelle version.

Au fil du temps, j'ai fini par réaliser que le principal n'est pas nécessairement le design ou la rapidité de chargement d'un site, mais bien son contenu.

Oui, ces autres éléments restent importants à bien des égards.
Mais... à quoi bon avoir un site beau et rapide s'il reste ... vide ?

À partir de maintenant, je souhaite me focaliser davantage sur le contenu. Ou, pour être encore plus honnête, je dédierais davantage de temps à alimenter mon site.

D'une quelconque manière ... 😁

Ai-je réussi à t'apprendre quelque chose d'utile ? Ou à te faire rire ?
Remercie-moi avec un matcha ! 🍵