Plan de la séance

  1. Qu’est-ce qu’un site web ?
  2. Mille façons de fabriquer un site web
  3. Approche SSG
  4. Créer un site web avec Hugo

1. Qu’est-ce qu’un site web ? #

  • ensemble de pages web organisées
  • document complexe comprenant des éléments de navigation
  • objet éditorial figé ou en constante évolution

1. Qu’est-ce qu’un site web ?

Exercice d’analyse #

  • choisissez un site web que vous avez l’habitude d’utiliser, que vous appréciez, et qui comporte plus de 10 pages différentes
  • repérez au moins 3 façons de naviguer dans ce site web
  • identifiez une piste d’amélioration du site web (structuration, organisation, navigation, mise en forme)

2. Mille façons de fabriquer un site web #

  • à la main : facilité de création de pages, difficulté de mise à jour des index, légèreté
  • CMS : puissance d’organisation, lourdeur de la solution technique, complexité de la migration
  • générateur de site statique : faussement nouveau, séparation nette entre contenus et fabrique, complexité de prise en main

3. L’approche des générateurs de site statique #

  • deux fonctions principales :
    • convertir d’un format de balisage à un autre, typiquement de Markdown à HTML
      • organiser les pages à partir d’instructions écrites dans un langage de sérialisation de données
  • changement de paradigme : aucun langage dynamique pour servir les pages web
  • résultat : un site statique (notion à …)

3. L’approche des générateurs de site statique

Exercice #

  • rendez-vous sur https://gitlab.huma-num.fr/ecrinum/demarreur
  • explorez les différents dossiers et sous-dossiers afin de comprendre l’architecture du projet :
    • où sont les contenus ?
    • quels sont les fichiers contenant les modèles (ou templates) de données ?
    • y a-t-il un fichier de configuration principal ?
  • visitez https://ecrinum.gitpages.huma-num.fr/demarreur afin d’essayer de comprendre comment les pages sont construites selon les informations affichées (page d’accueil, à propos et introduction)

4. Créer un site web avec Hugo #

  • Hugo : un générateur de site statique parmi d’autres
  • avantages : dépendances limitées (un fichier binaire suffit pour l’installation), rapidité, puissance
  • inconvénients : courbe d’apprentissage un peu raide, documentation aride, extensibilité complexe
  • visite de Hugo avec le mini projet démarreur

4. Créer un site web avec Hugo

Exercice 1 #

4. Créer un site web avec Hugo

Exercice 2 #

  • modifiez le titre du site, pour cela vous devez trouver le fichier de configuration principal
  • ajoutez un « post » : regardez comment sont constitués les deux existants et essayez de comprendre la règle de classement sur la page d’accueil

4. Créer un site web avec Hugo

Exercice 1 #

Débugue tes humanités