Vue d'ensemble des générateurs de sites statiques populaires

Tous les générateurs de pages statiques ont une tâche unique et apparemment simple : produire un fichier HTML statique et tous ses éléments.

La diffusion d'un fichier HTML statique présente de nombreux avantages évidents, tels qu'une mise en cache plus facile, des temps de chargement plus rapides et un environnement globalement plus sécurisé. Chaque générateur de page statique produit la sortie HTML différemment.

Cependant, le but de cet article n'est pas de plonger et de discuter des subtilités de leur mécanisme, mais de comparer l'ensemble de fonctionnalités offert par chaque framework et de mettre en évidence les aspects et caractéristiques uniques de chaque framework.

Présentation des frameworks de pages statiques populaires

Dans cet article, nous examinerons de plus près les frameworks de pages statiques suivants : Jekyll , Middleman , Hugo et Hexo . Ce ne sont en aucun cas les seuls générateurs disponibles, mais ce sont les plus couramment utilisés, soutenus par de grandes communautés et de nombreuses ressources utiles.

Examinons de plus près chacun d'eux et comparons leurs caractéristiques de base :

• Jekyll
  • écrit en Ruby,
  • prend en charge le moteur de modèle Liquid prêt à l'emploi ;
• Intermédiaire
  • écrit en Ruby,
  • prend en charge les moteurs de modèles ERB et Haml prêts à l'emploi ;
• Hugo
  • écrit en Go,
  • prend en charge le moteur de modèle Go prêt à l'emploi ;
• Hexo
  • écrit en JavaScript,
  • prend en charge EJS et Pug hors de la boîte.

Remarque : Il convient de souligner que chacun de ces générateurs de pages statiques peut être personnalisé et étendu à l'aide de plugins et d'extensions, vous permettant de couvrir la plupart ou la totalité de vos besoins.

Configuration des générateurs de sites statiques

La documentation de chacun de ces frameworks est complète et tout simplement excellente et vous pouvez la récupérer ici :

Documentation Jekyll

Documentation intermédiaire

Documentation Hugo

Documentation hexadécimale

Si vous suivez simplement les guides d'installation, vous devriez avoir l'environnement de développement prêt en quelques minutes. Une fois installé, vous pouvez démarrer un nouveau projet en exécutant des commandes depuis le terminal.

Par exemple, voici comment démarrer un nouveau projet dans différents frameworks :

Jekyll

jekyll new my_website

Intermédiaire

middleman init my_website

Hugo

hugo new my_website

Hexo

hexo init my_website

Configuration

La configuration est généralement stockée dans un seul fichier. Chaque générateur de site Web statique a ses spécificités, mais de nombreux paramètres sont les mêmes pour les quatre.

Vous pouvez spécifier où sont stockés les fichiers source ou où sortir les sources construites. Il est toujours utile d'ignorer les données qui ne seront pas utilisées dans le processus de construction en définissant l'option exclude ou skip_render . Vous pouvez également utiliser le fichier de configuration pour stocker des paramètres globaux tels que le titre du projet ou l'auteur.

Migration vers un générateur statique

Si vous avez déjà un projet Wordpress prêt à démarrer, vous pouvez le migrer vers un générateur de pages statiques avec une relative facilité.

Pour Jekyll, vous pouvez utiliser le plugin Jekyll Exporter. Pour Middleman, vous pouvez utiliser un outil de ligne de commande appelé wp2middleman. Vous pouvez utiliser Wordpress vers Hugo Exporter pour la migration Hugo, et pour Hexo, vous pouvez lire notre guide sur la façon de migrer de Wordpress vers Hexo que j'ai écrit l'année dernière.

Le principe est presque identique et assez simple - exportez d'abord tout le contenu dans un format approprié, puis incluez-le dans le bon dossier.

Contenu

Les générateurs de pages statiques utilisent Markdown pour le contenu principal. Markdown est puissant et on peut l'apprendre rapidement. Écrire du contenu dans Markdown semble naturel en raison de sa syntaxe simple. Le document semble propre et organisé.

Vous devez placer les articles dans un dossier spécifié dans le fichier de configuration globale. Les noms d'article doivent suivre la convention spécifiée par le générateur.

Dans Jekyll, vous devez placer un article dans le répertoire _posts . Le nom de l'article doit avoir le format suivant : ANNÉE-MOIS-JOUR-titre.MARKUP. D'autres générateurs ont des règles similaires et fournissent une commande pour créer un nouvel article.

Voici les commandes pour créer un nouvel article dans Middleman, Hugo et Hexo :

Intermédiaire

middleman article my_article

Hugo

hugo new posts/my_article.md

Hexo

hexo new post my_article

Dans Markdown, vous êtes limité à un ensemble particulier de syntaxe. Heureusement pour nous, tous les générateurs peuvent également traiter le HTML brut. Par exemple, si vous souhaitez ajouter une ancre avec une classe spécifique, vous pouvez l'ajouter comme vous le feriez dans un fichier HTML normal :

This is a text with <a class="my-class" href="#">a link</a> .

Matière avant

La matière liminaire est un bloc de données au-dessus du fichier Markdown. Vous pouvez définir des variables personnalisées pour stocker les données dont vous avez besoin pour créer un meilleur contenu. Au lieu d'écrire du HTML dans Markdown, ce qui pourrait conduire à une structure de document encombrée et laide, vous pouvez définir une variable dans le front matter.

Par exemple, voici comment vous pourriez ajouter des balises à votre article.

 tags: - web - dev - featured

Modèles dans les générateurs de pages statiques

Les générateurs de pages statiques utilisent un langage de modèles pour traiter les modèles. Pour insérer des données dans un modèle, vous devez utiliser des balises. Par exemple, pour afficher le titre de la page dans Jekyll, vous pourriez écrire :

{{ page.title }}

Essayons d'afficher une liste de balises du front matter dans notre article dans Jekyll. Vous devez vérifier si une variable est disponible. Ensuite, vous devez parcourir les balises et les afficher dans une liste non ordonnée.

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

Intermédiaire:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

Hugo :

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

Hexo :

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

Remarque : Il est recommandé de vérifier si une variable existe pour éviter l'échec d'un processus de génération. Cela pourrait vous faire économiser des heures de débogage et de test.

Utilisation de variables

Un générateur de page statique fournit des variables globales disponibles pour la remise des modèles. Un type de variable différent contient des informations différentes. Par exemple, un site de variables globales dans Hexo contient des informations sur les publications, les pages, les catégories et les balises d'un site.

Connaître les variables disponibles et comment les utiliser pourrait faciliter la vie d'un développeur. Hugo utilise les bibliothèques de modèles de Go pour la création de modèles. Travailler avec des variables dans Hugo peut être un problème si vous n'êtes pas familier avec le contexte, ou "le point" comme ils l'appellent.

Middleman n'a pas de variables globales. Cependant, vous pouvez activer l'extension middleman-blog qui vous permettrait d'accéder à certaines variables, comme une liste d'articles. Si vous souhaitez ajouter des variables globales, vous pouvez le faire en extrayant des données dans des fichiers de données.

Fichiers de données

Lorsque vous souhaitez stocker des données qui ne sont pas disponibles dans les fichiers Markdown, vous devez utiliser des fichiers de données. Par exemple, si vous avez besoin d'enregistrer la liste de vos liens sociaux que vous souhaitez afficher dans le pied de page de votre site. Tous les générateurs de pages statiques prennent en charge les fichiers YAML et JSON. De plus, Jekyll prend en charge les fichiers CSV et Hugo prend en charge les fichiers TOML.

Stockons ces liens sociaux dans notre fichier de données. Étant donné que tous les générateurs prennent en charge le format YAML, enregistrons les données dans le fichier social.yml :

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll stocke les fichiers de données dans le répertoire _data par défaut. Middleman et Hugo utilisent le répertoire de données et Hexo utilise le répertoire source/_data directory .

Pour sortir les données, vous pouvez utiliser le code suivant :

Jekyll

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

Intermédiaire

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

Hugo

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

Hexo

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

Aides

Les modèles prennent souvent en charge le filtrage des données. Par exemple, si vous souhaitez mettre le titre en majuscule, vous pouvez le faire comme suit :

{{ page.title | upcase }}

Middleman a une syntaxe similaire :

<%= current_page.data.title.upcase %>

Hugo utilise la commande suivante :

{{ .Title | upper }}

Hexo a une syntaxe différente, mais le résultat est le même.

<%= page.title.toUpperCase() %>

Comment les générateurs de pages statiques gèrent les ressources

La gestion des actifs est gérée différemment selon les générateurs de pages statiques. Jekyll compile les fichiers d'actifs où qu'ils soient placés. L'intermédiaire ne gère que les actifs stockés dans le dossier source. L'emplacement par défaut des assets dans Hugo est le répertoire assets. Hexo suggère de placer les actifs dans le répertoire source global.

TOUPET

Jekyll prend en charge Sass hors de la boîte, mais vous devez suivre certaines règles. Middleman prend également en charge Sass prêt à l'emploi. Hugo compile Sass via Hugo Pipes pour Sass. Hexo le fait via un plugin.

ES6

Si vous souhaitez utiliser les fonctionnalités JavaScript modernes d'es6, vous devez installer un plugin. Il peut y avoir plus d'une version d'un plugin similaire, vous voudrez peut-être vérifier le code ou voir les problèmes ouverts ou le dernier commit pour trouver le meilleur.

Images

L'optimisation d'image n'est pas prise en charge par défaut non plus. De plus, comme les plugins es6, il existe plusieurs plugins pour optimiser les images. Faites vos devoirs et essayez de trouver le meilleur plugin pour le travail. Alternativement, vous pouvez utiliser une solution tierce. Dans mon blog construit avec Hexo, j'utilise le plan gratuit Cloudinary. J'ai développé une balise cloudinary et je fournis des images réactives et optimisées via des transformations Cloudinary.

Plugins, Extensions

Les générateurs de pages statiques disposent de puissantes bibliothèques qui vous permettent de personnaliser votre site Web. Chaque plugin a un objectif différent. Vous pouvez trouver une large gamme de plugins, de LiveReload pour un meilleur environnement de développement à la génération de sitemap ou de flux RSS.

Vous pourriez écrire un nouveau plugin ou extension. Avant de le faire, vérifiez si un plugin similaire existe. Voir la liste des plugins Jekyll, les extensions Middleman et les plugins Hexo. Hugo n'a pas de plugins ou d'extensions. Cependant, il prend en charge les shortcodes personnalisés.

Shortcodes dans Markdown

Les shortcodes sont des extraits de code que vous pouvez placer dans des documents Markdown. Ces extraits génèrent du code HTML. Hugo et Hexo prennent en charge les shortcodes. Il existe des shortcodes intégrés, comme la figure dans Hugo :

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Code court youtube hexadécimal :

{% youtube video_id %}

Si vous ne trouvez pas de shortcode approprié, vous pouvez en créer un nouveau. Par exemple, Hexo ne prend pas en charge les intégrations CanIUse, et j'ai développé une nouvelle balise qui prend en charge l'intégration CanIUse. N'oubliez pas de publier votre plugin sur npm ou sur le site officiel du générateur. La communauté vous en sera reconnaissante.

CMS

Les générateurs de pages statiques peuvent être une surcharge pour une personne non technique. Apprendre à utiliser les commandes ou Markdown n'est pas quelque chose de facile pour tout le monde. Dans ce cas, un utilisateur pourrait bénéficier du système de gestion de contenu pour les sites JAMstack. Dans cette liste, vous pourriez trouver un système qui correspond le mieux à vos besoins. Sachez que la configuration du CMS prend un certain temps, mais à long terme, vous et d'autres utilisateurs pourriez bénéficier d'une publication de contenu plus efficace.

Bonus : Modèles JAMstack

Si vous ne voulez pas passer trop de temps à configurer votre projet, vous pouvez bénéficier des modèles JAMstack. Certains de ces modèles sont déjà préconfigurés avec le CMS, ce qui pourrait vous faire gagner beaucoup de temps.

Vous pouvez également en apprendre beaucoup en examinant le code. Essayez d'installer un modèle, comparez-le aux autres et choisissez celui qui vous convient le mieux.

Emballer

Les générateurs de pages statiques sont un moyen rapide et fiable de créer un site Web. De nos jours, vous pouvez même créer des sites Web non triviaux et hautement personnalisés avec un générateur.

Par exemple, Smashing Magazine est passé à JAMstack l'année dernière, et ils ont réussi à accélérer considérablement leur site. Il existe d'autres exemples réussis de sites Web statiques et ils partagent tous le même principe : produire des ressources statiques et les diffuser sur des réseaux de diffusion de contenu pour un chargement plus rapide et une expérience utilisateur supérieure.

Vous pouvez faire beaucoup plus avec votre site Web statique : de l'utilisation de l'API Wordpress REST comme backend à l'utilisation des fonctions Lambda. Il existe d'excellentes solutions même pour les sites Web simples, comme l'utilisation de HTTPS prêt à l'emploi ou la gestion des soumissions de formulaires.

J'espère que cet aperçu des frameworks de pages statiques vous a aidé à réaliser leur potentiel et à envisager de les utiliser la prochaine fois que vous pensez à un nouveau projet.