Générateurs de sites statiques comparés, avec temps de build mesurés
Comparatif des générateurs de sites statiques
Générateurs de sites statiques : Astro, Hugo ou Eleventy, temps de build | We.Inc
Astro, Hugo, Eleventy, l'export statique de Next.js et Jekyll comparés, avec des temps de build mesurés sur les mêmes 1,000 articles Markdown, un tableau des fonctionnalités et le même template d'article dans chacun.
Un générateur de site statique transforme du Markdown et des templates en fichiers HTML simples au moment du build, que n'importe quel hébergeur ou CDN peut servir rapidement. Hugo est le plus rapide ; dans notre test, il a transformé 1,000 articles en pages en moins d'une demi-seconde. Eleventy est le plus flexible, et Astro convient le mieux quand certaines parties ont besoin de composants interactifs.
Choisir en une ligne
Si vous
Utilisez
Voulez les builds les plus rapides pour des milliers de pages
Hugo
Voulez du JavaScript simple et peu de conventions imposées
Eleventy
Avez besoin de quelques composants interactifs
Astro
Avez déjà une base de code React ou Next.js
Export statique Next.js
Nous avons donné à Astro, Eleventy et Hugo les mêmes 1,000 articles Markdown et chronométré trois builds propres de chacun, pour que les chiffres soient comparables. Sous les résultats, la même page d'article dans chaque outil montre à quoi ressemble le travail avec lui.
Rédigez le contenu sous forme de fichiers Markdown avec un front matter.
Écrivez un template qui place chaque article dans la mise en page de votre site.
Lancez le build ; chaque fichier devient une page HTML.
Envoyez le dossier de sortie sur n'importe quel hébergeur statique ou CDN.
Le temps de build compte surtout pour les grands sites et les déploiements de prévisualisation ; en dessous de quelques centaines de pages, tous sont rapides.
Ne mettez pas les images dans des dossiers Markdown copiés tels quels ; laissez le pipeline d'images de l'outil les redimensionner.
Ajoutez un sitemap et des URL canoniques dès le départ ; la plupart des générateurs ont un plugin pour les deux.
Pour des rédacteurs non techniques, associez le générateur à un CMS headless ou basé sur Git.
Questions fréquentes
Qu'est-ce que la Jamstack ?
Une façon de construire des sites sous forme de HTML, CSS et JavaScript prégénérés servis depuis un CDN, avec des fonctions dynamiques ajoutées via des API. Les générateurs de sites statiques produisent la partie prégénérée.
Hugo est-il plus rapide qu'Astro ?
Pour des pages Markdown simples, oui, et de loin dans notre test : environ 0.3 seconde contre environ 1 seconde pour 1,000 articles une fois les caches chauds. Astro en fait plus par page, comme le contenu typé et vérifié et le rendu de composants.
Un site statique peut-il avoir des formulaires et une recherche ?
Oui. Les formulaires peuvent envoyer leurs données à un service de formulaires ou à une fonction serverless, et la recherche peut s'exécuter dans le navigateur à partir d'un index prégénéré. Aucun des deux n'a besoin d'un serveur traditionnel.
Un site statique est-il bon pour le SEO ?
Très. Chaque page est du HTML complet dès le premier chargement, rapide à servir et facile à lire pour les robots d'exploration. Il vous faut quand même de bons titres, de bonnes descriptions, des liens internes et un sitemap.
Quand ne pas utiliser de générateur
Si les personnes qui mettent à jour le site ne sont pas à l'aise avec Markdown et Git, un créateur de site hébergé ou un CMS avec éditeur visuel vous évitera beaucoup d'accompagnement. Les générateurs brillent quand des développeurs gèrent le site ou quand un CMS leur fournit le contenu.
Temps de build mesurés
Les mêmes 1,000 articles dans chaque outil, avec suppression de la sortie avant chaque exécution. Les exécutions suivantes sont plus rapides car les caches des outils et du système d'exploitation sont chauds.
Mesuré : 1,000 articles Markdown vers HTML (secondes)
Générateur
Première exécution
Exécutions suivantes
Hugo 0.167
Eleventy 3.1
Astro 7.3
0.97 à 1.01
Comment ils se comparent
Côte à côte
Astro
Hugo
Eleventy
Export Next.js
Jekyll
Langage
JavaScript / TypeScript
Go (binaire unique)
JavaScript
JavaScript / TypeScript
Ruby
Templates
.astro, plus React, Vue, Svelte
Templates Go
Nunjucks, Liquid, WebC, JS et plus
React
Liquid
JavaScript envoyé par défaut
Aucun
Aucun
Aucun
Runtime React
Aucun
Parties interactives
Îlots avec directives client
Ajoutez vos propres scripts
Ajoutez vos propres scripts ou WebC
N'importe quel composant React
Ajoutez vos propres scripts
Licence
MIT
Apache-2.0
MIT
MIT
MIT
Idéal pour
Sites de contenu qui ont besoin de quelques parties interactives
Très grands sites, builds rapides
Sites flexibles et minimalistes
Équipes React qui veulent une sortie statique
Blogs sur GitHub Pages
La même page d'article dans chacun
Astro : une page d'article de blog à partir d'une collection de contenu
La collection vérifie le front matter de chaque article par rapport à un schéma, et getStaticPaths crée une page par article au moment du build.
Eleventy : une mise en page pour chaque article d'un dossier
Un fichier posts.json dans le dossier applique la mise en page à chaque fichier Markdown qu'il contient, grâce à la cascade de données d'Eleventy.
Hugo : un template de page unique
Hugo choisit ce template pour chaque page de content/. .Content est le Markdown rendu.
Next.js : export statique
Régler output sur export écrit des fichiers HTML simples dans le dossier out au moment du build. Les fonctions qui nécessitent un serveur, comme les server actions et le rendu à la demande, ne sont pas disponibles dans ce mode.
Vous rédigez d'abord le contenu ? Gardez sous la main l'