Les générateurs de sites statiques créent des sites HTML, avec des mises en page de page prévisibles et un contenu avec une présentation régulière comme les blogs. Il existe de nombreux frameworks qui peuvent tirer parti d’un langage de programmation et vous permettent de réutiliser du code et de traiter des ressources pour ces pages HTML, mais cet article comparera deux des plus populaires : Hugo et Jekyll. (Pour une comparaison d’un site statique et d’un site dynamique, voir Jekyll vs WordPress)
Pourquoi utiliser des pages HTML statiques ?
Les générateurs de sites statiques sont attrayants car ils produisent des sites sécurisés nécessitant peu de maintenance et plus rapides à servir que les pages web générées dynamiquement. Avec les pages web dynamiques, un framework web installé sur un serveur génère la page qu’un utilisateur voit. Un utilisateur fait une demande, le serveur interroge une base de données, extrait les informations que les utilisateurs veulent voir, combine ces données dans une page HTML, puis envoie cette page à un utilisateur.
Avec des pages HTML statiques, les pages sont pré-rendues, donc le serveur ne fait aucun travail de construction de la page. Il se contente uniquement d’envoyer la page appropriée à l’utilisateur. Cela signifie que les pages HTML statiques sont plus rapides et que les exigences informatiques pour le serveur sont bien plus faibles ; cela est important dans les environnements cloud où vous êtes facturé en fonction de la puissance de calcul.
Les pages statiques éliminent la génération de page, de sorte que l’utilisateur reçoit sa page beaucoup plus rapidement. Les risques de sécurité sont également moindres car il y a moins de pièces mobiles pour les attaquants à infiltrer et à exploiter. Les pages HTML statiques sont facilement mises en cache, elles conviennent donc parfaitement pour être servies à partir de réseaux de diffusion de contenu (CDN), rendant les temps de réponse encore plus rapides.
Étant donné que les pages statiques ne nécessitent pas aux serveurs d’effectuer des calculs ou d’interroger la base de données, vous pouvez les déployer en utilisant des options d’hébergement très simples et peu coûteuses comme un bac Amazon S3 ou GitHub Pages.
Générateurs de sites statiques
Vous pourriez simplement écrire une page HTML et la mettre sur un serveur, en revenant aux premiers jours du web, mais les générateurs de sites statiques rendent beaucoup plus facile la création de nouvelles pages qui utilisent des modèles existants ou modifient toutes vos pages existantes en une fois.
L’un des premiers générateurs de sites statiques à relancer cette tendance dans le développement web était Jekyll. Hugo a rejoint l’aventure cinq ans plus tard.
Qu’est-ce que Hugo ?
Hugo est un générateur de sites statiques super rapide et hautement sécurisé qui se positionne comme un outil de construction de sites Web amusant et moderne. Il est écrit en Go et les sites peuvent être hébergés n’importe où. L’une des fonctionnalités les plus remarquables est que les sites statiques de Hugo n’ont pas besoin d’une base de données sur des runtimes comme Ruby, PHP ou Python. Selon leur site web, le générateur de sites statiques Hugo “est l’outil le plus rapide de sa catégorie”, avec des vitesses de construction de site moyennes de moins d’une seconde. Pour plus d’informations sur “Qu’est-ce que Hugo”.
Qu’est-ce que Jekyll ?
Jekyll est un générateur de site statique open source écrit en Ruby par le co-fondateur de Github, Tom Preston-Werner. Il traduit des documents textuels simples en sites statiques qui peuvent être utilisés pour des sites web d’information ou des blogs. Il a un support intégré pour les pages Github et est l’un des générateurs de site statique les plus populaires disponibles.
Plus d’informations sur “Qu’est-ce que Jekyll”
Hugo contre Jekyll
Avec l’un ou l’autre des générateurs, vous pouvez mettre en place un blog basé sur un modèle en moins de trente minutes. Si vous partez de zéro, Hugo est légèrement plus facile à installer. Avec Jekyll, vous devez installer quelques prérequis comme Ruby. Go est fourni sous forme de binaire précompilé, inclus avec l’installation de Hugo.
Pour les deux cadres de travail Jekyll et Hugo, vous écririez normalement un fichier de contenu comme un article de blog en HTML ou en Markdown. Ce contenu est combiné avec des modèles HTML, qui encadrent et stylisent le contenu, produisant un fichier HTML pour affichage sur le web.
Les deux cadres permettent aux développeurs d’ajouter des variables au contenu, en utilisant le langage de balisage YAML, et de consommer des fichiers de données dans des formats communs comme JSON et CSV. Les deux cadres comportent également un certain nombre de fonctionnalités utiles pour un blog, telles que des tags et la capacité à router les fichiers de contenu vers des pages HTML finies. Ils sont également open source, vous pouvez donc demander des modifications et contribuer des améliorations.
La première et la plus fondamentale différence entre les cadres Jekyll et Hugo est le langage dans lequel ils sont écrits. Jekyll est écrit en Ruby, un langage de script populaire qui a été l’un des premiers langages à être fournis avec un cadre web opinionné, le rendant extrêmement populaire pour la construction rapide de sites web. Hugo est écrit en Go, qui a été développé chez Google avec une vue sur l’exécution simultanée, en optimisant pour le déploiement dans des environnements cloud où la puissance de calcul est répartie sur de nombreuses machines.
Chaque cadre a également des préférences différentes quant aux langages avec lesquels il fonctionne bien. Jekyll offre une prise en charge de CoffeeScript et SASS/SCSS. Hugo prend en charge TOML et JSON markdown dans les fichiers de contenu, mais la prise en charge de SASS et SCSS pourrait nécessiter une configuration supplémentaire.
La situation du modèle
Un des principaux avantages de framework Jekyll est sa facilité d’utilisation, sa documentation bien développée et le large soutien des grandes organisations comme GitHub. Jekyll a été lancé il y a douze ans et a contribué à susciter un nouvel intérêt pour les sites en HTML statique. Hugo est sorti plus tard et est moins populaire, donc il dispose d’un écosystème moins développé en termes de plugins et de modèles.
Les sujets de GitHub offrent un impressionnant choix de 1 200 thèmes pour Jekyll, tandis qu’il n’y a que 370 options proposées sur les pages des thèmes de Hugo (bien que vous puissiez également créer vos propres thèmes). Évidemment, il est beaucoup plus probable que vous trouviez un thème avec l’apparence souhaitée avec Jekyll. Jekyll est soutenu par GitHub, donc si vous souhaitez un déploiement simple et sans frais, Jekyll fonctionne parfaitement avec GitHub Pages, vous permettant d’avoir un blog Jekyll simple en ligne très rapidement en suivant la documentation excellente de GitHub.
Une autre différence entre les frameworks Hugo et Jekyll est que la création d’un tout nouveau site avec Jekyll en exécutant la commande jekyll new my-awesome-site installe un thème de base, tandis que la création d’un nouveau site avec la commande hugo new site my-awesome-site ne génère que la structure de dossiers et un fichier d’archétype. Avec Jekyll, vous aurez quelque chose avec quoi travailler immédiatement, tandis qu’avec Hugo, vous vous retrouverez face à un écran vide en attente que vous ajoutiez un thème ou des modèles personnalisés.
Cela peut être idéal pour une configuration totalement personnalisée, mais Jekyll offre un chemin beaucoup plus rapide pour voir du contenu avec lequel travailler.
De la vitesse, encore de la vitesse
L’un des principaux avantages de l’utilisation du générateur de site statique Hugo est sa rapidité. En exploitant l’accent mis sur la concurrence du langage Go, les blogs avec des milliers d’articles ou des tonnes d’images généreront du HTML plus rapidement. Cela est important si vous exécutez du code là où vous payez pour la puissance informatique.
Cela est également important pendant le développement, car les modifications apportées aux modèles ou au contenu sont réexécutées plus rapidement avec Hugo. Cette différence de vitesse est perceptible même avec un faible nombre de pages, mais elle devient significative si vous créez cent pages de contenu.
Hugo Bonus (en anglais seulement)
Hugo offre un support pour l’internationalisation, offrant plusieurs façons de catégoriser le contenu dans différentes langues. Hugo propose également un traitement d’images, des menus intégrés, une cartographie du site et un rechargement en direct.
Vous pouvez obtenir le même résultat avec Jekyll, mais cela prendra plus de travail pour le configurer. Dans Jekyll, cette fonctionnalité provient de plugins, mais si vous construisez des pages complexes, il est pratique de l’avoir intégré.
Hébergement
Les deux langages offrent des options pour un hébergement facile, mais Jekyll est le plus simple. Jekyll et les Pages GitHub ont une relation proche et de longue date et le déploiement d’un projet Jekyll sur les Pages GitHub est simple et rapide, ce qui peut être une excellente option pour essayer un blog avec Jekyll.
Hugo propose également de nombreuses options d’hébergement. Pour les deux générateurs, vous avez deux options fondamentales:
- Vous pouvez exécuter le générateur de site localement, puis télécharger les résultats sur un serveur. Vous pouvez le faire manuellement ou demander à un service quelconque de récupérer votre HTML mis à jour.
- Vous pouvez installer le générateur de site statique sur un ordinateur dans le cloud, dire à cet ordinateur d’exécuter la commande de génération de contenu, puis servir les fichiers créés par ce processus. C’est ainsi que fonctionnent des services tels qu’Amazon Amplify, CloudCannon et Netlify. Ces fournisseurs ont tous des guides spécifiques pour le déploiement de sites, mais le processus de déploiement est assez indolore lors de l’utilisation de générateurs de site statique.
Ce qu’il faut choisir
Jekyll et Hugo sont tous deux bien adaptés aux blogs et autres sites orientés frontaux. Ils génèrent des pages HTML statiques en combinant du contenu écrit dans un langage Markdown avec des modèles HTML.
Le générateur de site statique Jekyll offre la configuration la plus rapide, davantage d’options pour les modèles, et une expérience plus facile lors du démarrage, mais il peut commencer à être lent une fois que vous traitez une centaine de pages. La configuration initiale de Hugo est plus compliquée, mais il peut gérer des sites plus volumineux avec plus de rapidité, par exemple un blog Hugo.
Lorsque vous décidez, pensez aux langages avec lesquels vous êtes familier, aux types de markdown que vous souhaitez utiliser, et comment vous allez déployer le site. Si vous voulez commencer à bloguer immédiatement, Jekyll est un excellent choix, mais si vous prévoyez d’écrire beaucoup de contenu, la vitesse et les fonctionnalités de Hugo rendront votre expérience de développement plus fluide.
Leave a Reply