Cet articles n'est plus entièrement à jour suite au changement de stack technique opéré en 2020. Plus d'infos ci-dessous
Edit 2020
La stack marchait bien mais histoire d'être moins cher j'ai migré l'entièreté du blog sur Gatsby, blog écrit maintenant en ReactJS et non plus en VueJS. Pourquoi ? et bien... pourquoi pas. C'était l'occasion de tester.
Ce blog n'est plus hébergé sur un VPS avec une application universelle mais est totalement statique hébergé sur Netlify, connecté à GitHub. Les articles sont rédigés avec Netlify CMS qui génère des fichiers markdown dans le dépôt du code source directement.
Edit 2021
Voir cet article sur la JAMSTACK pour avoir plus d'infos sur Netlify etc...
Les débuts en 2012
A cette époque, je suis étudiant à la MJM Graphic Design et j'ai déjà un goût prononcé pour l'actualité du web, ses tendances et le développement. Aimant transmettre et partager, l'idée me vient de faire un blog lié à mon portfolio : double effet kiss-cool, le référencement de l'un aiderai le référencement de l'autre.
Le projet naît et dans le cadre scolaire nous sommes amenés à développer notre portfolio. J'en profite donc pour commencer en parallèle deux autres projets que je présenterai en même temps que celui-ci : un blog et une interface d'administration ou je peux gérer les réalisations du portfolio et les articles sur le blog. L'idée plait. Techniquement tout est basé sur ma maîtrise du PHP à cette époque, à savoir du PHP procédural et très peu optimisé et loin d'être sécurisé. Très vite sur ce mode et n'étant pas convaincu par mon développement je n'y accorderai pas beaucoup plus d'attentions dans les années à venir...
Épisode 2 : l'attaque du clone.
Quelques années plus tard, après avoir abandonné le blog initial, je décide de m'y remettre comme bon exercice PHP et d'intégration. Et j'ai un tas de projets : des tutoriels HTML/CSS/JS aussi bien pour les débutants que les avancés, des news a propos du web, des tests de CMS, de technos... Ni une ni deux, j'ouvre tous mes outils, je réalise des prototypes, des tests de contenus, je benchmark des typographies, je me renseigne, je fais un POC avec Wordpress, j'envoie à des collègues/amis développeurs et designers pour avoir leur retour, bref : la machine est lancée. Je créé des maquettes sur Photoshop qui prennent en compte différents cas de figure, qui gèrent tous les états possible du site, je créé ma prore colorisation syntaxique qui colle avec la refonte de mon identité visuelle, je créé un nouveau logo pour nkCreation et je commence l'intégration de tout ça. Mais - et ce n'est pas un secret - je ne suis pas un grand fan de Wordpress, et très vite l'intégration du thème ne me comble pas de bonheur et je laisse un peu en suspens la chose. Je passe quand même en production une version du site qui affiche un message de maintenance et le site restera comme ça pendant quelque temps...
Le dénouement
On est en 2017 et je décide de donner un coup de jeune et un coup de boost à nkCreation. Je veux également dissocier mon blog de mon activité de freelance, et pouvoir partager sur celui-ci ce qui fait de moi ce que je suis et pas uniquement du développement. Bonne idée ou pas, nous verrons bien ou cela nous mènera.
Cette fois, je prends mon temps et fais les choses par petites itérations. Je commence par un nouveau logo puis des nouvelles cartes de visites. Je refais ensuite un design plus moderne pour nkcreation.com et une charte graphique. Ensuite je choisis les technos : je veux tester une combinisaion de headless CMS + SPA et je m'oriente alors vers Angular (qui n'est pas forcément la meilleure idée que j'ai pu avoir, j'y reviendrai).
Étape du portfolio
Avec toutes les clés en main je développe dans un premier temps le portfolio courant d'année 2018 : je paramètre mon VPS, j'y installe Directus, je créé mes collection, j'instancie les projets sur mon Gitlab privé, je créé les pipelines, j'ajoute Gitlab Runner/CI au projet, j'intègre le site avec Angular 5 (la v6 sortira peu de temps avant la fin du développement du site) et ça tourne. J'y ajoute des réalisations que je prends soin de rédiger mais seulement quelques unes : je préfère la qualité à la quantité.
L'intégration terminée, je créé ma merge request, je review mon code, je clique sur Merge et grâce à tous mes efforts, le site se livre tout seul et passe en préprod puis en prod.
Étape du blog
Grandi de l'expérience portfolio j'attaque en 2019 le développement du blog avec un seul leitmotiv : si je ne sors pas un truc simple pour commencer je ne sortirai jamais rien. Je me créé donc une nouvelle instance de Directus et je paramètres mes collections : Articles, Pages, Catégories... Le strict nécessaire pour lancer le projet. Niveau technos je décide de ne pas partir sur Angular. En effet, mon expérience avec Angular Universal ne m'a pas vraiment convaincu - je me pencherai la dessus plus tard avec un autre projet que je manquerai pas de vous présenter ici. Ayant fait une petite appli pour une association avec NuxtJS et appréciant fortement VueJS je choisi donc cette stack. Comme pour le portfolio, j'y intègre également de la livraison continue. Et c'est sous cette version que je rédige actuellement cet article, le projet est lancé.
Conclusion ?
C'est bien joli tout ça mais on trouvera quoi ici ? Et bien comme je le disais un peu tout ce qui m'inspire : photographie, développement, voyage et musique principalement. Et ce projet sera amené à évoluer au fur et à mesure de sa vie et avec vos retours. Ce qui va arriver dans un premier temps c'est une présentation technique détaillée de la construction de ce blog et sa stack technique.
Si vous avez des remarques n'hésitez pas !
Je vous remercie pour votre attention. Vous pouvez me faire part de vos messages via la page contact du blog.
La joie de vivre et le jambon, y'a pas trente-six recettes du bonheur !