Pourquoi un site statique avec Hugo?
Avantages des sites statiques
Rapidité 🏎️
Pas besoin d’attendre que les serveurs fassent leur travail de requête de données et de construction de fichiers à la volée pour voir la page. Le fichier HTML est déjà prêt dès la connexion du visiteur.
On a donc une vitesse de chargement très rapide même sur les connexions en très bas débit.
Sécurité 🔐
Il n’y a pas de base de donnée! Aucune faille d’injection SQL possible, et surtout aucune information des éditeurs n’est donc stockée et piratable. Il n’y a qu’une entrée à garder, votre serveur FTP.
Fiablité 💪
Contrairement à un site dynamique, le serveur ne travaille pas lors d’une visite. Il sert juste des fichiers HTML qui seront téléchargés comme de simples images.
En cas de forte affluence, pas de risque de ralentissement ni de surchauffe des serveurs.
Bye bye Erreur 501!
Note comparative lors d’une visite
WordPress ou site dynamique classique
- Le Visiteur arrive sur la page
- Le Serveur se connecte à la base de donnée
- Le Serveur récupère les données demandées
- Le Serveur utilise les données reçues pour construire à la volée le fichier HTML.
- Le navigateur du Visiteur télécharge la page HTML et l’affiche
Site statique
- Le Visiteur arrive sur la page
- Le navigateur du Visiteur télécharge la page HTML et l’affiche
Solution CMS ✏️
Un CMS sans base de donnée ? C’est possible!
Forestry.io est une compagnie Canadienne (🇨🇦❣️) qui présente une solution de CMS pour site statique plus qu’adéquate.
👉 Démo Forestry.io
- Ajout/Édition de page
- Ajout de média
- Ajout de bloque dans une page
- Aperçu avant publication
- Shortcode/Snippet
Pourquoi Hugo plutôt qu’un autre générateur de sites statiques ?
Hugo figure parmis les trois principaux générateurs de sites statiques1. Il est le grand gagnant en matière de rapidité.
Rapidité de compilation
Un site statique doit pouvoir compiler toutes les pages HTML du site dès que le contenu est modifié.
Plus la fréquence de mise à jour est importante plus la vitesse de compilation devient critique.
Hugo compile 10,000 pages en moins de 10 secondes 😱
Quelques chiffres 📈23
| Generateur | 1,000 | 10,000 |
|---|---|---|
| Hugo 🚀 | 0.65s | 7.46s |
| Gatsby 🏃 | 7.4s | 74s (> 1 minute) |
| Jekyll 🐌 | 18.42s | 218s (> 3 minutes) |
Comment ça marche techniquement? 🤓
Un éditeur, par l’intémédiaire d’un CMS comme Forestry.io par exemple, édite une page du site.
Cette modification va alors déclencher une recompilation des fichiers HTML par Hugo.
Lors de la compilation, Hugo va lire les fichiers Markdown du repertoire de contenu et générer les fichiers HTML avec les données récupérées.
Exemple de structure d’un repertoire de contenu
└── content
├── a-propos.md
├── contact.md
├── equipe.md
├── posts
│ ├── une-nouvelle-initiative.md
│ └── presentation-d-un-intervenant.md
└── realisations
├── musee-de-la-ville.md
└── rehabilitation-entrepot.md
Exemple de fichier Markdown:
👇 On peut observer la version simplifiée suivante:
---
title: Une nouvelle initiative
date: 2018-08-07
image: intitiatve.jpg
categories:
- Entreprise
- Solutions
---
## La nouvelle initiative en question
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
1. Débuter
2. Continuer
3. Perseverer
## Conclusion
Pour en savoir plus [c'est par là](https://liens-utiles.org)
👉 On peut aussi consulter la version Markdown de la note qu’on vient de lire ici.