Débugue tes humanités

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

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 à …)

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

Exercice 1 #

• installez Hugo :
  • Ubuntu/Debian : téléchargez le fichier hugo_extended_0.XX.0_Linux-64bit.deb le plus récent puis sudo dpkg -i [le-fichier].deb
  • Mac : brew install hugo
  • Windows : voir l’installation sur la documentation
• clonez le projet sur votre machine : git clone git@gitlab.huma-num.fr:ecrinum/demarreur.git
• allez dans le dossier créé : cd demarreur
• lancez Hugo pour voir le site en local : hugo serve

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

Exercice 1 #

• installez Hugo :
  • Ubuntu/Debian : téléchargez le fichier .deb le plus récent puis sudo dpkg -i [le-fichier].deb
  • Mac : brew install hugo
  • Windows : voir l’installation sur la documentation
• clonez le projet sur votre machine : git clone git@gitlab.huma-num.fr:ecrinum/demarreur.git
• allez dans le dossier créé : cd demarreur
• lancez Hugo pour voir le site en local : hugo serve