Objectif
Construire un site web personnel qui pourra servir à l'avenir de présentation de mon travail, de blog et de centralisation des notes/mémos que j'écris régulièrement quand je m'intéresse à un nouveau sujet.
Technologie
Après l'essai de différentes solutions pour la production de blog et plus généralement de sites statiques ou non. Force est de constater que le HTML/CSS/JS reste moyen le plus robuste pour répondre à mon rapidement besoin en "maîtrisant" le plus possible les technologies en jeu.
La "stack" technique employée derrière ce blog est donc un simple répertoire contenant la hiérarchie de dossiers et fichiers, et que l'ensemble des pages est ensuite construit via du HTML. La naviagation est implémentée via des balises <a> qui pointent vers les autres fichiers HTML du répertoire. Le style est lui implémenté via des fichiers .css dans le dossier css/, avec l'utilisation de "grid" pour le layout global du site web. Et un dossier JS/ existe pour venir y déposer les fichiers javascript lorsque cela sera nécessaire.
Limite de la stack
Cette stack basique HTML/CSS/JS présente bien entendu des limites. En particulier le fait de devoir dupliquer du code, et de devoir adapter manuellement les chemins de fichiers vers les fichiers CSS, JS, et vers les autres fichiers HTML. Là où une solution plus moderne me permettrait de créer des composants, ou de servir mes pages au travers de templates par exemple. Une autre limites est l'absence de "dynamisme", mais dans le cas d'un blog, servir des pages web statiques me semble amplement suffisant dans un premier temps.
Mise en production
L'avantage de cette stack technique simplifiée est que la mise en production ne pose quasiment aucune contrainte. Avec un serveur dédié, une simple connexion, puis le rappatriement du dossier le répertoire prévu pour être servi (par exemple par un serveur apache), et d'exposer le serveur au reste du monde.
Aujourd'hui la mise en production est d'autant plus simplifiée, qu'avec GitHub ou GitLab le répertoire peut être servi via Pages. C'est ce que je fais ici avec GitLab page et avec le pipeline qui est prévue pour ce cas de figure : HTML.gitlab-ci.yml. Ce pipeline est simplement modifié pour exposer /public/ et ceci permet de déployer rapidement un site, gratuitement, mais dans mon cas, je veux également pouvoir utiliser l'url https://remyadzuar.fr pour atteindre mon site web.
Pour ce faire j'utilise AWS avec son module Amplify, et avec un nom de domaine que j'ai acheté via AWS (plus exactement, c'est un nom de domaine acheté il y a longtemps que j'ai transféré chez AWS). Ici c'est très simple, j'ai lié le projet gitlab associé à ce blog à une app Amplify, et ensuite j'ai ajouté le domaine remyadzuar.fr. Amazon se charge de la certification SSL, et le déploiement consiste simplement à exposer le dossier /public/ du répertoire.
Et la suite ?
Mon blog est désormais fonctionnel, dans les chantiers à entreprendre, je vois deux points principaux :
- Pouvoir Créer mes propres composant pour éviter les duplications de code
- Améliorer l'esthétique en me formant plus en profondeur au CSS
En effet, je sais que le CSS a beaucoup évolué depuis que j'ai terminé mes études, et j'ai besoin de me mettre à jours, d'où m'a volonté de ne pas utiliser de framework pour générer le style de mon site web. Enfin j'aimerai réussir à créer mes propres composants programmables de manière à pouvoir intégrer les footers, les headers, les asides et la navigation sans devoir tout écrire à la main. En outre j'envisage de produire de petits utilitaires Python pour fabriquer des squelettes de page cohérents en fonction de la position du fichier à créer dans la hiérarchie de dossier, de manière à ne plus avoir à configurer à la main les différents lien de navigation, et de fichier css.