Refonte du Portfolio & Pipeline CI/CD

Refonte du Portfolio & Pipeline CI/CD

Mon premier portfolio avait été conçu sous WordPress. Bien que fonctionnel au début, WordPress présentait des inconvénients majeurs pour un simple site vitrine : lourdeur du moteur PHP/MySQL, surface d’attaque permanente liée aux failles de plugins et consommation excessive de mémoire.

J’ai donc fait le choix de repartir sur des bases saines en adoptant un générateur de site statique avec Hugo et en automatisant l’intégralité du cycle de vie du site.

Les avantages du statique pour un profil DevOps

  • Performance et réactivité : les pages sont pré-générées lors du build. Le serveur web n’a aucun calcul à effectuer à la requête : le chargement est quasi instantané (< 50 ms).
  • Sécurité maximale : sans base de données ni exécution de code côté serveur, la surface d’attaque est nulle.
  • Tout sous Git (Git as Single Source of Truth) : le thème, les configurations (hugo.yml) et les articles en Markdown sont intégralement versionnés dans mon dépôt GitHub.

Pipeline de livraison continue (CI/CD)

flowchart TD A["1. Rédaction d'un article en Markdown"] --> B["2. Envoi sur GitHub (git push)"] B --> C["3. Hugo fabrique le site automatiquement en 1 seconde"] C --> D["4. Le portfolio est immédiatement à jour sur Internet"]

Le déploiement du site repose sur un workflow moderne et entièrement automatisé :

  1. Build multi-stage avec Docker :
    • Étape 1 : l’image hugomods/hugo compile et minifie l’ensemble des fichiers HTML, CSS et JavaScript.
    • Étape 2 : les fichiers statiques compilés sont copiés dans une image Nginx Alpine ultra-légère.
  2. Workflow GitHub Actions : à chaque commit sur la branche main, l’image Docker est construite, étiquetée et publiée sur le registre de conteneurs GitHub (GHCR).
  3. Déploiement en production : le serveur homelab tire la nouvelle image et redéploie le conteneur sans interruption de service.
  4. Reverse-proxy Traefik : Traefik intercepte les requêtes sur rocheralexandre.com, applique la redirection automatique vers HTTPS et gère le renouvellement des certificats SSL Let’s Encrypt.

Accès

Le portfolio est consultable en ligne à cette adresse : https://rocheralexandre.com (vous y êtes déjà !)