Static site generator : explications, fonctions & avantages

Pour créer des sites Web statiques, les développeurs recourent de plus en plus aux Jamstacks avec des générateurs de site statique (en anglais static sites generators ou SSG), ce qui simplifie considérablement le processus de programmation et permet un déploiement rapide du site. Toutes les fonctions dynamiques sont externalisées sur une architecture distribuée. Le JavaScript côté client, qui communique avec les API des microservices, assure ici la dynamique nécessaire.

Qu’est-ce qu’un static site generator (SSG) ?

Les static website generators sont des structures de code prêtes à l’emploi sur lesquelles des pages Web statiques peuvent être greffées. Contrairement aux systèmes de gestion de contenu (CMS) qui récupèrent du contenu à partir de bases de données, les générateurs de sites statiques utilisent un script pour créer les fichiers HTML d’une page à partir de fichiers d’entrée stockés dans un système de fichiers. Ce processus se déroule par ailleurs dès la création, c’est-à-dire lorsque des modifications sont apportées au code et au contenu, plutôt que lorsque l’utilisateur utilise son navigateur pour accéder à la page.

Comment fonctionne un static site generator ?

L’installation et l’utilisation d’un générateur de site statique se font via la ligne de commande. Le contenu du site Web à proprement parler est écrit dans des langages de balisage comme Markdown. Les documents Markdown se laissent aisément modifier dans l’outil de navigation du système de gestion de versions GitHub. Il est également possible d’utiliser des éditeurs de texte quelconques ou des éditeurs Markdown spéciaux. La présence de métadonnées au début des fichiers (souvent désignées comme « Front Matter ») permet au générateur de s’assurer que le site Web est affiché dans le navigateur des visiteurs.

Close

Créer un site Web statique : quels sont les avantages ?

Dans certains cas, comme les blogs ou les portails d’entreprise, l’accent est mis sur la simple transmission d’informations. Bien que les systèmes de gestion de contenu et les outils de création de sites Web puissent également être utilisés pour de tels projets, les générateurs de sites statiques présentent des avantages décisifs par rapport aux solutions classiques :

• Vitesse : les projets créés avec un static website generator se distinguent par une excellente vitesse du point de vue de l’utilisateur, qui est aussi utile au SEO. Cela est dû au fait que le traitement des fichiers a lieu dès la phase de développement ou de construction des pages et pas seulement au moment de la consultation de la page (mot clé : requête de base de données).
• Contrôle de versions du contenu : alors que le contenu des projets Web dynamiques est stocké dans des bases de données distinctes de la base de code, le contenu d’un site Web statique est généralement situé dans des fichiers texte simples. Les éléments de contenu sont donc structurellement identiques aux autres composants du code, ce qui permet de mettre en place sans difficulté la gestion des versions. Par exemple, vous pouvez gérer non seulement la structure de code d’un blog dans un référentiel GitHub, mais aussi les différentes contributions d’un blog.
• Sécurité : un autre avantage des sites Web créés à l’aide de générateurs de sites statiques est qu’ils offrent une faible surface d’attaque, contrairement aux systèmes de gestion de contenu tels que WordPress, qui s’accompagnent par défaut de failles de sécurité et qui doivent être mis à jour régulièrement. Le risque potentiel est limité à l’accès individuel par le client lors de l’accès à la page. Comme il ne s’agit généralement que de pages HTML structurées, la probabilité d’un accès non désiré est réduite au minimum.
• Maintenance simple du serveur : un générateur de site statique présente également des dépendances en tant que progiciel, qu’il convient de satisfaire. Le nombre de composants requis est relativement faible, mais ceux-ci ne sont pertinents que lors du processus de développement. Alors que d’autres solutions nécessitent divers modules, bases de données, bibliothèques, structures et packages pour l’exploitation en direct (et donc aussi des mises à jour régulières), les pages statiques sont liées uniquement à un serveur Web fonctionnel dès leur publication.

Quelle est la différence entre un générateur de site statique et un CMS classique ?

Les CMS ont révolutionné l’art et la manière de construire des sites Web. Grâce à ces systèmes pratiques, le gros effort manuel consenti pour la programmation de sites Web statiques classiques a rapidement été relégué au passé. L’innovation décisive et l’évolution majeure par comparaison avec l’ancienne approche sont le stockage du contenu dans des bases de données et la possibilité associée d’assembler et de présenter les pages de manière adéquate uniquement lorsque les utilisateurs en font la demande.

Les générateurs de site statique comblent l’écart entre le site Web statique classique et les projets de système de gestion du contenu. Comme avec l’approche classique de programmation, les pages et leur contenu sont générés de manière anticipée avant d’être appelés par les utilisateurs. Tout comme les systèmes de gestion de contenu, les générateurs de site statique permettent aux développeurs d’exploiter des modèles et de générer automatiquement des pages.

La différence majeure entre un générateur de site statique et un CMS réside donc dans le moment où les sites sont créés : dans le cas du premier, pendant même le processus de développement, dans le cas du second à la demande de l’utilisateur. En outre, la dépendance à l’égard des bases de données ou d’une autre source de données externe ainsi que le traitement des données côté serveur lors de l’accès au site Web sont autant d’aspects qui disparaissent avec le générateur. Il est également possible d’intégrer des sources de données externes à une API si nécessaire.

Pourquoi utiliser un static site generator ?

L’utilisation de générateurs de site statique pour construire votre propre projet Web peut s’avérer payant pour de nombreuses raisons. La motivation probablement la plus décisive est le gain en termes de performance que les sites Web créés affichent. Les excellents temps de chargement lors de l’accès, qui résultent du contenu généré, favorisent une expérience utilisateur positive. Comme tous les fichiers du site Web sont stockés de manière centralisée à un point, les projets basés sur un générateur de site statique offrent également des conditions optimales de flexibilité et de disponibilité. Les tâches administratives sont de plus réduites au minimum.

En revanche, si vous penser avoir besoin de :

• réviser régulièrement le contenu,
• ajouter des fonctionnalités par la suite,
• traiter les entrées utilisateur,
• entreprendre des adaptations visuelles à tout moment en mobilisant peu de compétences,

des solutions telles que les outils de création et les systèmes de gestion de contenu sont préférables.

Les faiblesses des générateurs de site statique

Bien que les avantages de pages statiques (comme la vitesse ou la sécurité élevée) ne se démentent pas, de nombreux inconvénients prouvent que les générateurs de site statique sont inadaptés aux projets de plus grande envergure. Les générateurs exigent de vastes connaissances sur Markdown et HTML, tandis que de nombreux automatismes qui sont considérés comme acquis dans les systèmes de gestion de contenu ainsi que dans les outils de création de sites Web font défaut. Les faiblesses suivantes peuvent également apparaitre lors de l’utilisation de générateurs de sites Web statiques :

• Pas de contenu en temps réel : un static site generator n’offre dans sa configuration standard aucune possibilité de créer des contenus dynamiques (comme les recommandations, les mises à jour de prix, la recherche de texte intégral, etc.). Les éléments automatiquement adaptés à l’utilisateur qui sont analysés en temps réel ne peuvent être implémentés qu’à l’aide de scripts côté client (en particulier JavaScript).
• Utilisation fastidieuse de l’entrée utilisateur : un autre problème lié aux scripts de serveur manquants apparaît lorsque le projet Web doit également permettre les entrées d’utilisateur dans certaines situations (par exemple lors du remplissage d’un formulaire de contact). Une fois de plus, JavaScript ou la prise en charge des services tiers sont requis. La plateforme DISQUS peut également être utilisée, par exemple, pour ajouter une fonction de commentaires (y compris pour la modération des contenus et la gestion du spam).
• Pas d’interface utilisateur standard : comme de nombreux CMS headless ne disposant pas de l’extension correspondante, les générateurs de sites statiques n’ont pas d’interface intégrée, qui permettrait d’ajouter du contenu ou de modifier et supprimer un contenu existant. Cela se fait alors via le terminal. Les éditeurs WYSIWYG aident à écrire le code Markdown nécessaire et à inspecter le résultat à l’avance à l’aide de la fonction de prévisualisation, mais n’éliminent pas le besoin des téléchargements manuels des fichiers préparés sur le serveur.

Pour résumer, les projets basés sur des sites statiques présentent des faiblesses, en particulier lorsqu’il est question de mises à jour, de changements et d’interactions avec les utilisateurs.

Quels sont les générateurs de site Web statiques connus ?

Le nombre de générateurs permettant de créer des sites Web statiques a augmenté de façon significative ces dernières années. GitHub contient les répertoires de projets de nombreuses solutions open source, qui peuvent être utilisées gratuitement pour créer votre propre site Web et adaptées selon les besoins.

jamstack.org offre un aperçu des représentants les plus populaires : la page répertorie les différentes options par ordre alphabétique ou triées par étoiles, forks ou problèmes GitHub (suggestions/tâches d’optimisation). Il est possible également de filtrer les structures de site Web selon le langage de programmation (entre autres Ruby, JavaScript, Go…).

Le tableau suivant répertorie certains des générateurs les plus importants en fonction des informations de Jamstack :

Créer des sites Web clients avec Jamstack : rapide, efficace et sûr

Dans ce livre blanc, vous découvrirez notamment les problèmes des CMS conventionnels, pourquoi les sites statiques deviennent une véritable alternative grâce à Jamstack, et comment vous pouvez ainsi garantir des flux de travail plus légers et de meilleurs résultats pour vos clients.

Déployer un générateur de site statique via GitHub : marche à suivre

Vous pouvez facilement stocker et gérer le code des générateurs de sites statiques, y compris le contenu, les ressources et les scripts responsables de la génération de sortie, dans un référentiel GitHub. De cette façon, vous pouvez associer votre projet au contrôle de versions et simplifier la collaboration autour du code.

En fin de compte, seul le déploiement des fichiers sur un serveur Web reste à faire, avec le processus de construction pour les fichiers HTML et CSS à répéter à chaque mise à jour du référentiel. Vous pouvez également simplifier considérablement cette tâche grâce à l’hébergement de services pour les générateurs de sites statiques tels que Deploy Now. La solution de IONOS déclenche automatiquement une mise à jour du contenu statique sur votre espace Web en arrière-plan lorsque vous apportez des modifications au répertoire de votre générateur de site statique. Pour ce faire, Deploy Now utilise le flux de travail GitHub Actions qui vous permet de surveiller les journaux de compilation directement dans l’interface utilisateur GitHub.

Deploy Now : la nouvelle manière de créer des sites Web statiques

Deploy Now est un service d’hébergement pratique qui prend en charge tous les générateurs de sites statiques courants et qui convient parfaitement pour l’hébergement Jamstack. Deploy Now offre également des facilités de préproduction, un certificat SSL/TLS gratuit et une protection DDoS pour votre projet.

C’est à vous de décider d’apporter votre propre domaine et de l’intégrer ou d’enregistrer un nouveau domaine avec IONOS. Pour plus d’informations sur les configurations techniques, les tutoriels et les projets de démarrage, consultez la documentation officielle Deploy Now (en anglais).