Comprendre la génération de site statique avec hugo
Etudiant ensemble les statics sites generator avec hugo
- 7 min read
Pour céer un site web, plusieurs méthodes sont disponibles:
- Codez le site de A à Z
- Utilisez des outils CMS qui permet d’éditer aisément les contenues avec des interfaces graphique conviviale
- Utilisez un static site generator qui permet de générer des sites statiques à partir de modèles déjà existants
Chacun ces avantages et ces inconvénients, mais aujourd’hui on va présenter la troisième option, car si on parle: d’ HTML, CSS, JS çà sonne pour l’oreil des spécialistes du web. Si on parle également de wordpress, ou de prestashop, çà aussi tous le monde les connait. Mais si on vous dis: Hugo, Astro ou Eleventi, là on se demande Kesako?
Comprendre la génération de site statique avec hugo
Un static site generator est juste un programme qui permet de générer un site statique à partir de deux éléments: un site web templates ou modèle, et des contenues statiques (documents, images, vidéo,…)
Mais déjà qu’est ce qu’un site web statique?
Les sites web statiques sont des sites web dont tous les contenus sont définis en avance avant le déploiement du site. Ce type de site génère des pages web fixes qui ne changent pas en fonction de l’utilisateur ou des actions de ce dernier. Les fichiers HTML, CSS et JavaScript sont directement envoyés au navigateur sans modification côté serveur.
Ils sont l’opposé des sites web dynamiques, dont les contenus peuvent changer en fonction des interactions des utilisateurs, des bases de données ou des paramètres externes. Les sites dynamiques utilisent souvent des technologies côté serveur, comme PHP, Python ou Node.js, pour générer du contenu personnalisé en temps réel.r
Un site web template ou modèle, c’est quoi exactement?
Dans notre contexte, Un template ou modèle est juste un site web déjà créer avec des contenues factices qu’on peut réutiliser et personaliser pour créer notre propre site web.
On parle également de thèmes!!
Dans notre cas avec Hugo, vous pouvez retrouver les thèmes sur cette lien: hugo themes
Et comment le static site generator va générer nos sites web avec ces templates?
Ces technologies se basent sur ce qu’on appelle moteur de rendu de template, ce sont des outils ou librairie qui permet de changer dynamiquement le contenue d’un fichier en offrant la possibilité d’insérer des variables. On peut changer la valeur de ces variables. Dans les fichiers templates, on peut également ajoutés des structures conditionnelles et boucles.
Pour le cas de hugo par exemple, écrit dans la langage de programmation golang, il utilise la librairie de template html/template
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Template</title>
</head>
<body>
<h1>Bonjour {{.Name}}</h1>
<p>Âge: {{.Age}}</p>
<p>Pays: {{.Country}}</p>
</body>
</html>
Dans le code précédent par exemple, on peut modifier la valeur des variables: {{.Name}}, {{.Age}}, {{.Country}} dynamiquement.
Leur valeur peut être récupérer de plusieurs façon, comme via fichier de configuration, via des fichiers: documents, images, vidéo,…
Et cette propriété, c’est la base des programmes SSG.
En résumé voici les étapes que le SSG suit pour générer notre site:
- Le ssg prend un fichier template
- Remplace les variables contenues par des valeurs provenant de divers sources
- Génère un ou plusieurs fichiers statiques regroupant les contenues selon un certain architecture
Dans le cas de notre chers Hugo, ces variables peuvent être récupés depuis les fichiers de configuration toml pouvant changer de nom selon la version: Hugo.toml ou Config.toml . Ces fichiers peuvent aussi être de format yaml: Hugo.yaml ou Config.yaml.
Tous les valeurs variables sont stockés dans une seule fichier de configuration?
Euuuuuuuuh! Non, quand même pas, les fichiers de configuration contient généralement les informations et configurations générale du site web: les éléments du menues de navigation, les informations générale sur l’auteur si c’est un blog personnel, les liens vers l’images de la page d’accueil, nom du thème utilisés, la configuration des parties des sites web à ajouter ou à retirer…
Par la suite les contenues long d’un section d’une site, comme les articles des blogs sont stockés dans d’autres fichiers dans des dossiers particuliers et suivant des formats particuliers, dont le plus connus de tous est le markdown
C’est quoi le markdown:
Le markdown est un langage de balisage qui permet de structurer des contenues, un Moteur de rendu de markdown en html intégrer au SSG va convertir le markdown en html ce qui nous permet d’obtenir des pages statiques.
# Exemple de Documentation en Markdown
Markdown est un langage de balisage léger permettant de formater du texte de manière simple et rapide.
## Titre de Section
### Sous-section
Voici quelques exemples des fonctionnalités les plus courantes en Markdown.
## Liste à puces
- Premier élément
- Deuxième élément
- Troisième élément
## Liste numérotée
1. Première étape
2. Deuxième étape
3. Troisième étape
## Texte en gras et italique
Voici un texte **en gras** et un autre *en italique*.
## Lien hypertexte
Vous pouvez inclure des liens vers des pages web avec le format suivant : [Google](https://www.google.com).
## Insérer des images
Voici comment insérer une image avec Markdown :
WTF?!Pourquoi ne pas utiliser de l’html directement si on doit encore codé avec un autre langage de balisage?
Et oui, il y a une part de vérité et c’est d’ailleurs déroutant au début. Cependant, personnellement, quand j’ai commençé à écrire mes longues articles je me suis vite rendu compte que le markdown est beaucoup plus pratique. A mon avis, c’est du au faite que la liste des fonctionnalités est restreint à l’essentiels. Celà signifie, qu’on se focalise juste sur les contenues de notre rédaction, pas de taille de police, pas de couleur, pas de positionnement et structuration, aussi pas de “balise” ouvrant/fermant. En faite, tous ces parties styles sont laissés aux templates
Si dans le template, la couleur des titres sont définies en rouges, ils seront rouges.
En résumé, avec le langage de balisage markdown, on se focalise juste à la rédaction et insertion de contenue et point. Ce qui fait que le nombre de balise essentiels sont de l’ordre d’une dizaines.
Et en plus, il y a des solutions permettant de rédigés le markdown sans avoir à tous mémoriser, dans mon code j’utilise l’extension de VSCode FrontMatter qui est super.
Existe t-il des alternatives aux langages de balisage markdown?
Des alternatives à markdown, il en existe de nombreux qui peuvent être gérés ou non par les différents SSG. Dans le cas de hugo, il arrive à gérer les formats: AsciiDoc, RestructuredText (REST), HTML, Emacs Org Mode et Pandoc.
Existe t-il des alternatives au SSG hugo?
Jekyll, Gatsby, Astro, hugo et même le fameux NextJS sont également des SSG célèbres
Pourquoi nous avons choisi hugo parmis les SSG?
Dans notre cas, on a choisit hugo principalement due au fait qu’il a été rédigé en langage golang, l’une des langages qu’on utilise souvent pour nos besoin interne. Cette langage connu pour sa simplicité et sa performance élevé apporte les mêmes points fort à hugo qui possède un temps de génération de site extrêmement faible par rapport à d’autre générateur de site statiques.
Un exemple de site web générer avec Hugo:
Un exemple de site web générer avec hugo est cette blog
Est ce que l’utilisation de SSG est faite pour tous le monde:
J’aimerais dire oui, mais ce n’est pas toujours le cas!Çà dépend du contexte et des besoins! Même si le procédé est théoriquement simplifié.
Avoir des notions techniques élémentaires serait toujours plus que nécessaire que ce soit pour accroître les fonctions limités des templates ou préparer l’ environnement de développement et de production.
Il m’est arrivé de temps en temps, d’ajoutés certains code javascript au fichiers du thèmes pour customisé des comportements des contenues markdowns après leur rendu html (par exemple pour ajouté target="_blank" au lien de l’article)
Aussi, comme dans ce blog, vous constatez qu’il existe une gestion des commentaires avec authentification google, github,… C’est une fonctionnalité non intégré à hugo, il ne génère que des pages statiques et les commentaires sont tous sauf statique.
Il faut donc déjà savoir intéragir avec les services externes et s’ ils ne sont pas managés par des fournisseurs, il faut savoir les installés et les configurés.
En résumés, même si les SSG facilitent la création de site web, ils restent toujours des outils déstinés aux spécialistes du web
Conclusion:
Les Systèmes de Génération de site statique sont des outils qui permet de facilité la création de site web.
En effet, le créateur du site n’ a plus à ce soucier du structure générale du site web, des styles des contenues, de l’expérience utilisateur. Toute est déjà prêt à l’emploi dans une template.
Un exemple d’entre eux est Hugo connu pour sa vitesse de génération de site élevé.
Cependant, pour être optimale dans leur utilisations, il faut quand même avoir des notions techniques élémentaires en développement web tels que la configuration de l’environnement de développement, le déploiement de site web en production, des notions basiques sur les langages de développement web et les notions élementaires en cas de besoin d’interaction aux services externes.