{"id":49207,"date":"2021-11-10T14:17:03","date_gmt":"2021-11-10T13:17:03","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=49207&preview=true&preview_id=49207"},"modified":"2023-10-13T12:14:40","modified_gmt":"2023-10-13T11:14:40","slug":"hugo-site-statique","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/hugo-site-statique\/","title":{"rendered":"Comment cr\u00e9er un site statique ultra-rapide avec Hugo"},"content":{"rendered":"

Hugo est un g\u00e9n\u00e9rateur de sites statiques (GSS) \u00e9crit en Go<\/a> (alias Golang), un langage de programmation compil\u00e9 tr\u00e8s performant souvent utilis\u00e9 pour d\u00e9velopper des applications et des services backend.<\/p>\n

Aujourd’hui, Hugo est capable de g\u00e9n\u00e9rer la plupart des sites web en quelques secondes (<1 ms par page). Cela explique pourquoi Hugo se pr\u00e9sente comme \u00ab le framework le plus rapide du monde pour la cr\u00e9ation de sites web \u00bb.<\/p>\n

Dans cet article, nous allons examiner l’histoire d’Hugo, ce qui le rend si rapide et comment vous pouvez commencer \u00e0 cr\u00e9er votre propre site statique Hugo.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce que Hugo ? Et pourquoi est-il populaire ?<\/h2>\n
\"La<\/a>
La page d’accueil du site web d’Hugo.<\/figcaption><\/figure>\n

Steve Francia a initialement d\u00e9velopp\u00e9 le g\u00e9n\u00e9rateur de sites statiques Hugo<\/a> en 2013, et Bj\u00f8rn Erik Pedersen a pris la rel\u00e8ve en tant que d\u00e9veloppeur principal du projet en 2015. Hugo est un projet open-source, ce qui signifie que son code peut \u00eatre consult\u00e9 et am\u00e9lior\u00e9 par tout le monde.<\/p>\n

En tant que g\u00e9n\u00e9rateur de sites statiques, Hugo prend des fichiers de contenu Markdown, les fait passer par des mod\u00e8les de th\u00e8mes et cr\u00e9e des fichiers HTML<\/a> que vous pouvez facilement d\u00e9ployer en ligne – et il fait tout cela extr\u00eamement rapidement.<\/p>\n

En 2021, il existe des dizaines, voire des centaines, de g\u00e9n\u00e9rateurs statiques. Chaque g\u00e9n\u00e9rateur de site statique a son attrait<\/a>. Jekyll<\/a> est populaire parmi les d\u00e9veloppeurs Ruby, et bien qu’il ne soit pas aussi rapide que d’autres options, c’est l’un des premiers g\u00e9n\u00e9rateurs de sites statiques \u00e0 avoir \u00e9t\u00e9 largement adopt\u00e9. Gatsby<\/a> est un autre GSS populaire qui convient bien au d\u00e9veloppement de sites \u00e0 d\u00e9ploiement statique dont les fonctionnalit\u00e9s sont dynamiques.<\/p>\n

Alors, avec tant de GSS sur le march\u00e9, qu’est-ce qui fait qu’Hugo se d\u00e9marque ?<\/p>\n\n

Hugo est rapide<\/h3>\n

En termes de performances brutes, Hugo est le meilleur g\u00e9n\u00e9rateur de sites statiques au monde. Compar\u00e9 \u00e0 Jekyll, Forestry a montr\u00e9 qu’Hugo est 35 fois plus rapide<\/a>. De m\u00eame, Hugo peut rendre un site de 10.000 pages en 10 secondes, une t\u00e2che qui prendrait plus d’une demi-heure \u00e0 Gatsby. Non seulement Hugo est le SSG le plus rapide en termes de temps de construction, mais il est aussi rapide \u00e0 installer.<\/p>\n

Hugo est livr\u00e9 sous la forme d’un ex\u00e9cutable autonome, contrairement \u00e0 Jekyll, Gatsby et d’autres GSS qui n\u00e9cessitent l’installation de d\u00e9pendances avec un gestionnaire de paquets. Cela signifie que vous pouvez t\u00e9l\u00e9charger et utiliser Hugo imm\u00e9diatement sans avoir \u00e0 vous soucier des d\u00e9pendances logicielles.<\/p>\n

La cr\u00e9ation de mod\u00e8les est facile avec Hugo<\/h3>\n

Dans le jargon des SSG, le \u00ab templating\u00bb fait r\u00e9f\u00e9rence au processus d’ajout de textes indicatifs pour l’insertion de contenu dynamique dans une page HTML. Pour acc\u00e9der au titre d’une page, vous pouvez utiliser la variable {{ .Title }}<\/code>. Ainsi, dans un mod\u00e8le HTML Hugo, il est courant de voir la variable {{ .Title }}<\/code> envelopp\u00e9e dans des balises H1 comme ceci :<\/p>\n

<h1>{{ .Title }}<\/h1><\/code><\/pre>\n
Au moment de la construction, Hugo r\u00e9cup\u00e8re automatiquement le titre dans un fichier de contenu et l’ins\u00e8re entre les deux balises <h1><\/code>. Hugo dispose d’une vari\u00e9t\u00e9 de variables de mod\u00e9lisation int\u00e9gr\u00e9es, et vous pouvez m\u00eame \u00e9crire des fonctions personnalis\u00e9es pour traiter les donn\u00e9es au moment de la construction. Pour la cr\u00e9ation de mod\u00e8les, Hugo utilise les biblioth\u00e8ques int\u00e9gr\u00e9es html\/template<\/code> et text\/template<\/code> de Go. Cela permet de r\u00e9duire l’engorgement des applications car Hugo n’a pas besoin d’installer des biblioth\u00e8ques tierces pour la cr\u00e9ation de mod\u00e8les.<\/p>\n
Comment installer Hugo<\/h2>\n
Hugo est livr\u00e9 sous la forme d’un ex\u00e9cutable compil\u00e9, ce qui signifie que vous n’aurez pas \u00e0 t\u00e9l\u00e9charger et \u00e0 g\u00e9rer de nombreuses d\u00e9pendances juste pour commencer. Il est disponible pour macOS, Windows et Linux.<\/p>\n