Chaque site web nécessite des mises à jour occasionnelles pour rester en phase avec les standards web modernes et les attentes des utilisateurs. Dans cet article, je vais partager mon parcours de reconstruction de mon site web personnel avec Hugo, en expliquant les défis auxquels j’ai été confronté et les solutions que j’ai mises en place.

Pourquoi j’ai décidé de construire un nouveau site web

Lorsque j’ai commencé ce projet, mon ancien site web présentait plusieurs problèmes qui le rendaient frustrant à utiliser et à maintenir. Il était fonctionnel, mais l’expérience globale — tant pour les visiteurs que pour moi en tant que propriétaire — laissait à désirer. Voici les principales raisons pour lesquelles j’ai décidé de tout reconstruire depuis zéro :

  • La Vue Desktop N’Était Pas Optimale
    L’ancienne version desktop de mon site web avait une mise en page maladroite et dépassée. Le design n’était ni moderne ni visuellement attrayant. Il y avait des problèmes d’alignement et des éléments qui ne s’adaptaient pas bien aux différentes résolutions d’écran. Maintenir la cohérence entre les différents navigateurs était également un casse-tête (bonjour Safari..).

    Vue Desktop Ancienne
    Capture d'écran de l'interface desktop de l'ancien site montrant des problèmes d'alignement

  • La Vue Mobile Était Inutilisable
    La version mobile était encore pire. La navigation était frustrante, les éléments de texte se chevauchaient, et certains boutons étaient presque impossibles à cliquer. Le site web n’était pas totalement responsive, ce qui signifie qu’il ne s’ajustait pas correctement aux différentes tailles d’écran.

    Vue Mobile Ancienne
    Capture d'écran montrant la mauvaise adaptabilité mobile de l'ancien site

  • Je Voulais Pouvoir Écrire et Publier des Articles Facilement
    Une de mes plus grandes frustrations était la difficulté à mettre à jour le contenu. Chaque fois que je voulais publier un nouvel article ou mettre à jour du contenu existant, je devais plonger dans le CSS et ajuster manuellement la mise en forme. C’était chronophage et totalement inutile. Je voulais un système qui me permettrait de me concentrer sur l’écriture du contenu plutôt que de gérer des problèmes de design et de mise en page.

Choisir Hugo comme Solution

Après avoir recherché différentes options, j’ai décidé d’utiliser Hugo comme base pour mon nouveau site web.

Hugo est un générateur de sites statiques rapide et flexible qui permet de créer des sites web en utilisant de simples fichiers Markdown. Au lieu de s’appuyer sur un CMS complexe comme WordPress, Hugo génère des fichiers HTML statiques plus légers à déployer.

Ajouter un Thème

Un des avantages d’Hugo est son système de thèmes, qui permet de mettre en place rapidement un site web. J’ai exploré plusieurs options avant de faire mon choix final :

Choisir PaperMod

J’ai finalement choisi PaperMod pour les raisons suivantes :

  • Il avait le plus d’étoiles GitHub (>10k), et donc un meilleur support communautaire
  • Il avait un design épuré et minimaliste qui correspondait à mes besoins
  • Il offrait des fonctionnalités comme le mode sombre, une meilleure typographie et une mise en page conviviale

J’ai installé PaperMod et commencé à le personnaliser selon mes préférences.

Ajouter des Modules

Pour améliorer les fonctionnalités de mon site web, j’ai ajouté quelques modules Hugo qui fournissaient des fonctionnalités utiles.

Ajouter les Commentaires avec Giscus

Au lieu d’utiliser des systèmes de commentaires traditionnels, j’ai opté pour Giscus, qui est basé sur les Discussions GitHub. Il permet aux utilisateurs de commenter en utilisant leurs comptes GitHub, ce que je trouve pratique.

Étapes d’installation basées sur la documentation de Hugomods :

  1. Ajouter le module Giscus à Hugo dans le fichier config.toml :
module:
  imports:
    - path: github.com/hugomods/giscus
  1. Configurer le fichier config.toml avec les informations du dépôt GitHub. Suivre les étapes de configuration : https://giscus.app/ pour obtenir repo_id et category_id
params:
  giscus:
    endpoint: 'https://giscus.app/' # Point d'accès du script client.
    repo: 'NohamR/giscus' # Le dépôt GitHub, requis.
    repo_id: 'R_kgDON8Oi3w' # rechercher octolytics-dimension-repository_id dans le code source de la page du dépôt.
    category_id: 'DIC_kwDON8Oi384CnHVL'
    mapping: 'pathname'
    strict_matching: true
    theme: 'transparent_dark'
    input_position: 'top' # top: au-dessus des commentaires. / bottom: en-dessous des commentaires.
    reactions: true # Activer les réactions pour le post principal.
    lazy_loading: true # Charger les commentaires de manière différée.
    languages_mapping:
      en-us: 'en'
  1. Ajouter le template Giscus : Créer un fichier nommé comments.html dans layouts/partials :
<!-- Add Giscus comments -->
<h2>{{ i18n "comments_title" | default "Comments" }}</h2>
<hr />
<div class="giscus"></div>
<hr />
{{ partial "giscus/script" . }}
<!-- End of Giscus comments -->
  1. Ajouter le JavaScript de Giscus : Créer un fichier extend_head.html dans layouts/partials :
{{- /* Zone de contenu personnalisé de l'en-tête début */ -}}
{{- /*     Insérer tout code personnalisé (analyse web, ressources, etc.) - il apparaîtra dans la section <head></head> de chaque page. */ -}}
<!-- Add Giscus comments -->
{{- $opts := dict
    "params" (dict "endpoint" .Site.Params.giscus.endpoint)
  -}}
  {{- $js := resources.Get "js/giscus.ts" }}
  {{- $js = $js | js.Build $opts }}
<script src="{{ $js.RelPermalink }}"></script>
<!-- End of Giscus comments -->
{{- /* Head custom content area end */ -}}
  1. Ajouter le JavaScript de Giscus : Créer un fichier giscus.ts dans assets/js
'use strict'

import { default as params } from '@params';
import Giscus from 'mods/giscus/js';

const giscus = new Giscus(params.endpoint);
window.Giscus = giscus;

Gestion des Images avec Hugo Mods Images

La gestion manuelle des images était fastidieuse, j’ai donc ajouté le module Hugo Mods Images pour automatiser les optimisations comme le redimensionnement et la compression en WebP.

Étapes d’installation basées sur la documentation de Hugomods :

  1. Ajouter le module dans le fichier config.toml :
module:
  imports:
    - path: github.com/hugomods/images
  1. Configurer le support WebP :
params:
  hugomods:
    images:
      modern_format: 'webp'

Analytique avec Umami

Au lieu d’utiliser Google Analytics, j’ai choisi d’auto-héberger Umami Analytics, une alternative axée sur la confidentialité.

Étapes d’installation basées sur la documentation de Hugomods :

  1. Ajouter le module dans le fichier config.toml :
module:
  imports:
    - path: github.com/hugomods/umami-analytics
  1. Ajouter l’URL du script Umami et l’ID du site web dans config.toml :
params:
  umami:
    script_url: 'https://stats.noh.am/script.js' # URL vers votre script Umami
    website_id: '11111111-2222-3333-4444-555555555555' # Votre ID de site web
  1. Ajouter le JavaScript d’Umami : Créer un fichier extend_head.html dans layouts/partials :
{{- /* Head custom content area start */ -}}
{{- /*     Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
<!-- Add umami analytics -->
{{ partialCached "hugomods/umami-analytics/index" . .Params.analyze }}
<!-- End umami analytics -->
{{- /* Head custom content area end */ -}}

Corriger les Problèmes

Après avoir configuré le thème et les fonctionnalités supplémentaires, j’ai identifié quelques problèmes mineurs qui devaient être corrigés.

Améliorer les Traductions

Les traductions par défaut de certains éléments de l’interface n’étaient pas optimales, je les ai donc mises à jour manuellement dans le dossier i18n.

Correction CSS pour les Images

Certaines images ne s’affichaient pas correctement. J’ai modifié le CSS pour garantir que toutes les images soient correctement alignées.

Créer un fichier post-single.css dans assets/css/common et ajouter :

.post-content img {
    border-radius: 4px;
    margin: 1rem 0;
    max-width: 100%; /* S'assurer que les images ne sont pas plus larges que le conteneur */
    height: auto; /* S'assurer que les images sont correctement dimensionnées */
}

Ajouter des Cartes Personnalisées à la Page d’Accueil

Je voulais inclure des cartes de profil sur ma page d’accueil pour afficher des données en temps réel. J’ai trouvé un projet existant :

Cependant, il incluait une carte Apple Music dont je n’avais pas besoin. Comme le projet original ne permettait pas de la désactiver, j’ai forké le dépôt, ajouté la possibilité de supprimer le status Apple Music et hébergé ma propre version :

C’est tout pour le moment !