Générateurs de sites statiques, la nouvelle tendance

Le but d'un GSS est d'ajouter le dynamisme d'un CMS à la vitesse de chargement d'un site statique.

Composer une page à la demande comme le fait un système de gestion de contenu à des avantages, comme l'adaptation de la page à l'utilisateur, mais aussi un inconvient, car accéder à une base de donnée pour obtenir les divers éléments du contenu ralentit beaucoup l'accès. Par ailleurs, comme la page présentée aux visiteurs est la plupart du temps la même, il n'est pas rationnel de la construire à chaque visite. Les sytèmes de cache répondent à cela mais ne fonctionnent pas toujours très bien. Un autre inconvénient majeur est la sécurité: les pirates ciblent les CMS populaires, et quand ils trouvent une faille, cela leur permet d'accéder à des millions de sites à la fois et d'y installer des malwares, ce qui est déjà arrivé aux utilisateurs de Wordpress et Drupal.

La solution statique

La réponse à ces problèmes consiste à installer le contenu localement ou sur un serveur sous forme de fichiers de texte (au format markdown ou autre) et produire des pages statiques HTML, qui sont sûres et se chargent vite. C'est le but du générateur de site statique. Cela n'empêche pas d'avoir un contenu dynamique, celui-ci est réalisé par des plugins JavaScript, ni d'utiliser des thèmes comme sous Wordpress, il suffit de choisir parmi plusieurs templates.

Dans le cas de Jekyll par exemple, chaque billet produit avec l'éditeur de texte est placé dans un fichier textuel dans le répertoire _posts. Le template contient des champs pour chaque partie du contenu. Le générateur intègre ensuite le contenu dans le template et place la page HTML générée dans le répertoire _site qui est accessible aux visiteurs par Internet.

Le template est le modèle qui sert à construire une page. Exemple simple:

<head>
   <title>{{ title }}</title> 
</head>
<body>
<div id="content">
{{ content }}
</div>
</body>

Le template contient deux variables, "title" et "content" qui sont remplacées par le titre et le contenu du fichier texte édité. Le webmaster n'a pas besoin de réaliser de template, il est inclut dans chaque thème du générateur. Sinon on peut utiliser un langage de template comme Liquid, Stylus, etc.

Les fonctions d'un générateur de site statique

Tous les générateurs ont une liste de fonctionnalités en commun:

Meta data

Le format de texte markdown, textile ou autre prévoit des champs pour les données de type constant tels que titre, nom d'auteur, date, catégorie, nom de chemin, etc. Ces champs seront formattés en CSS et présenté selon l'agencement prévu par le template.

Liens symboliques

C'est quelque chose qui fonctionne plus ou moins bien selon les GSS. Cela consiste par exemple à remplacer dans le template un fichier à inclure, doté d'une version comme script-1.2.3.js par un nom unique: script.js.

Actifs statiques (static assets)

Ce sont des éléments qui ne sont pas parsés par le générateur tels que images, fichiers JS ou CSS. Ces fichiers sont placés dans un répertoire dédié, et le générateur les recopie dans un répertoire mis en ligne.

D'autres fonctions ne sont supportées que par certains GSS :

Commentaires

Cela se fait avec un plugin et une base de données, mais on peut aussi les ajouter aux pages ou encore utiliser un service externe comme Disqus.

Template de page

La capacité de choisir un thème non pas pour l'ensemble du site, mais pour chaque page. Les templates peuvent consister en simple page HTML ou être réalisés avec un langage de template comme Jade, Haml, Mustache, eRuby...

Git

Git est un système de mise à jour de projet collaboratif conçu pour Linux. Il est utilisable aussi pour un site web classique et permet d'avoir une image distante qui est une copie exacte du contenu local. Eventuellement il permet le travail à plusieurs mais ce n'est qu'une option. Tous les générateurs ne proposent pas Git, cela convient bien si l'on a déjà utilisé GitHub.

Base de donnée en option

Avec un GSS, les billets sont stockés dans des fichiers de texte et non plus dans des bases de données. Cela n'empêche pas d'utiliser des données provenant d'une base stockée sur le serveur, tels que la liste des utilisateurs enregistrés, les commentaires.

Articles relatifs

Sous Wordpress on affiche la liste des articles en rapport avec la page affichée grâce à un plugin. Il en est de même avec les générateurs, la liste des plugins inclut pour la plupart un "related posts".

Sitemap et RSS

Le générateur peut aussi mettre à jour automatiquement un fichier sitemap et un fichier RSS quand une nouvelle page est ajoutée ou quand une page est modifiée. Sous Wordpress, la sitemap est produite par un plugin.

Champ de recherche

Pour ajouter un champ de recherche, il faut inclure un script ou un plugin aux pages. Le résultat sera accéléré si le générateur produit un fichier index des mots non usuels. On peut aussi ajouter un champ de recherche fournit par un site externe (comme Google) qui indexe les pages.

Les principaux GSS

Tous utilisent le format markdown et textile pour l'édition de texte entre d'autres. Tous sont gratuits, open sources et sous licence libre. Il n'est pas nécessaire de savoir programmer pour les utiliser, le langage est utile seulement si on veut contribuer au code.

Nom/Site Langage Template
Description
Jekyll
jekyllrb.com/
Ruby Liquid
Inclut un serveur de développement pour tester les pages générées.
Utilisable pour héberger un site sur GitHub sauf les plugins.
Il faut une description YAML de métadonnées dans chaque page et le code correspondant dans le template.
Liquid est le système de template obligé et il n'est pas simple à utiliser.
Pelican
getpelican.com/
Python Jinja2
Possibilité d'importer les billets de Wordpress ou Dotclear.
Edition en Markdown ou reStructuredText.
Support de langues multiples.
Intégration possible avec Twitter.
Wintersmith
wintersmith.io/
CoffeeScript Jade
Utilise Node.js et gulp.js pour enchaîner les traitements par les plugins et construire le site fait de pages statiques.
Prévisualisation possible localement.
Sa flexibilité permet de reprendre directement le contenu d'un site statique ou d'un autre générateur.
Hexo
github.com/hexojs/hexo
JavaScript + Git EJS, Swig, Stylus
Framework de blog utilisant Node.js pour la génération de pages.
Mise en ligne sur GitHub, Heroku, hébergement perso avec Git, en une seule commande.
Importe les pages de Wordpress, Joomla, Jekyll.
Supporte la plupart des plugins de Jekyll.
Hugo
gohugo.io/
Go Go templates, Amber, Ace
Convertit le contenu d'un répertoire en pages HTML.
Serveur local pour prévisualisation.
La génération est très rapide et il est destiné à tous types de sites.
Assemble
assemble.io/
JavaScript Handlebars
Fonctionne avec Grunt.js (exécuteur de tâches) et Yeoman (écosystème pour générateurs de pages).
La particularité est de produire des éléments qui puissent s'assembler pour former des pages mises en ligne.
On réalise une page dans un template HTML, ou un fichier JSON ou YAML ou un Gruntfile.
Harp
harpjs.com/
CoffeeScript EJS, Jade, Stylus
Plateforme complète avec un serveur Web statique.
Produire des pages HTML/CSS/JS est une option.
On peut éditer les pages localement ou en ligne.
Particulièrement simple d'emploi.

Cette liste n'est pas limitative, je me suis cependant efforcé d'inclure un générateur pour chaque langage de programmation. On pourrait aussi inclure Lektor (Python).

Finalement, faut-il utiliser un GSS ou un CMS? Toutes les fonctions d'un CMS peuvent être données à un site statique dès lorsqu'il peut communiquer avec le serveur, et modifier dynamiquement la page, ce qui ne pose pas de problème avec Ajax ou WebSocket (le second étant plus récemment implémenté). Il est plus simple d'utiliser Wordpress qu'un générateur, donc les blogueurs non informaticiens préféreront sans doute utiliser ce CMS.
Mais si la sécurité ou la réactivité sont des points essentiels pour le site, le générateur est clairement la meilleure solution.