Static site generator : ex­pli­ca­tions, fonctions & avantages

Pour créer des sites Web statiques, les dé­ve­lop­peurs recourent de plus en plus aux Jamstacks avec des gé­né­ra­teurs de site statique (en anglais static sites ge­ne­ra­tors ou SSG), ce qui simplifie con­si­dé­ra­ble­ment le processus de pro­gram­ma­tion et permet un dé­ploie­ment rapide du site. Toutes les fonctions dy­na­miques sont ex­ter­na­li­sées sur une ar­chi­tec­ture dis­tri­buée. Le Ja­vaS­cript côté client, qui com­mu­nique avec les API des mi­cro­ser­vices, assure ici la dynamique né­ces­saire.

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

Les static website ge­ne­ra­tors sont des struc­tures de code prêtes à l’emploi sur les­quelles des pages Web statiques peuvent être greffées. Con­trai­re­ment aux systèmes de gestion de contenu (CMS) qui ré­cu­pè­rent du contenu à partir de bases de données, les gé­né­ra­teurs 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 mo­di­fi­ca­tions sont apportées au code et au contenu, plutôt que lorsque l’uti­li­sa­teur utilise son na­vi­ga­teur pour accéder à la page.

Comment fonc­tionne un static site generator ?

L’ins­tal­la­tion et l’uti­li­sa­tion d’un gé­né­ra­teur de site statique se font via la ligne de commande. Le contenu du site Web à pro­pre­ment parler est écrit dans des langages de balisage comme Markdown. Les documents Markdown se laissent aisément modifier dans l’outil de na­vi­ga­tion du système de gestion de versions GitHub. Il est également possible d’utiliser des éditeurs de texte quel­conques ou des éditeurs Markdown spéciaux. La présence de mé­ta­don­nées au début des fichiers (souvent désignées comme « Front Matter ») permet au gé­né­ra­teur de s’assurer que le site Web est affiché dans le na­vi­ga­teur des visiteurs.

Close

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

Dans certains cas, comme les blogs ou les portails d’en­tre­prise, l’accent est mis sur la simple trans­mis­sion d’in­for­ma­tions. 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é­ra­teurs de sites statiques pré­sen­tent des avantages décisifs par rapport aux solutions clas­siques :

• Vitesse : les projets créés avec un static website generator se dis­tin­guent par une ex­cel­lente vitesse du point de vue de l’uti­li­sa­teur, qui est aussi utile au SEO. Cela est dû au fait que le trai­te­ment des fichiers a lieu dès la phase de dé­ve­lop­pe­ment ou de cons­truc­tion des pages et pas seulement au moment de la con­sul­ta­tion 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 dy­na­miques est stocké dans des bases de données dis­tinctes de la base de code, le contenu d’un site Web statique est gé­né­ra­le­ment situé dans des fichiers texte simples. Les éléments de contenu sont donc struc­tu­rel­le­ment iden­tiques aux autres com­po­sants du code, ce qui permet de mettre en place sans dif­fi­culté la gestion des versions. Par exemple, vous pouvez gérer non seulement la structure de code d’un blog dans un ré­fé­ren­tiel GitHub, mais aussi les dif­fé­rentes con­tri­bu­tions d’un blog.
• Sécurité : un autre avantage des sites Web créés à l’aide de gé­né­ra­teurs de sites statiques est qu’ils offrent une faible surface d’attaque, con­trai­re­ment aux systèmes de gestion de contenu tels que WordPress, qui s’ac­com­pag­nent par défaut de failles de sécurité et qui doivent être mis à jour ré­gu­liè­re­ment. Le risque potentiel est limité à l’accès in­di­vi­duel par le client lors de l’accès à la page. Comme il ne s’agit gé­né­ra­le­ment que de pages HTML struc­tu­rées, la pro­ba­bi­lité d’un accès non désiré est réduite au minimum.
• Main­te­nance simple du serveur : un gé­né­ra­teur de site statique présente également des dé­pen­dances en tant que progiciel, qu’il convient de sa­tis­faire. Le nombre de com­po­sants requis est re­la­ti­ve­ment faible, mais ceux-ci ne sont per­ti­nents que lors du processus de dé­ve­lop­pe­ment. Alors que d’autres solutions né­ces­si­tent divers modules, bases de données, bi­blio­thèques, struc­tures et packages pour l’ex­ploi­ta­tion en direct (et donc aussi des mises à jour ré­gu­lières), les pages statiques sont liées uni­que­ment à un serveur Web fonc­tion­nel dès leur pu­bli­ca­tion.

Quelle est la dif­fé­rence entre un gé­né­ra­teur de site statique et un CMS classique ?

Les CMS ont ré­vo­lu­tionné l’art et la manière de cons­truire des sites Web. Grâce à ces systèmes pratiques, le gros effort manuel consenti pour la pro­gram­ma­tion de sites Web statiques clas­siques a ra­pi­de­ment été relégué au passé. L’in­no­va­tion décisive et l’évolution majeure par com­pa­rai­son avec l’ancienne approche sont le stockage du contenu dans des bases de données et la pos­si­bi­lité associée d’assembler et de présenter les pages de manière adéquate uni­que­ment lorsque les uti­li­sa­teurs en font la demande.

Les gé­né­ra­teurs 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 pro­gram­ma­tion, les pages et leur contenu sont générés de manière anticipée avant d’être appelés par les uti­li­sa­teurs. Tout comme les systèmes de gestion de contenu, les gé­né­ra­teurs de site statique per­met­tent aux dé­ve­lop­peurs d’exploiter des modèles et de générer au­to­ma­ti­que­ment des pages.

La dif­fé­rence majeure entre un gé­né­ra­teur 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é­ve­lop­pe­ment, dans le cas du second à la demande de l’uti­li­sa­teur. En outre, la dé­pen­dance à l’égard des bases de données ou d’une autre source de données externe ainsi que le trai­te­ment des données côté serveur lors de l’accès au site Web sont autant d’aspects qui dis­pa­rais­sent avec le gé­né­ra­teur. Il est également possible d’intégrer des sources de données externes à une API si né­ces­saire.

Pourquoi utiliser un static site generator ?

L’uti­li­sa­tion de gé­né­ra­teurs de site statique pour cons­truire votre propre projet Web peut s’avérer payant pour de nom­breuses raisons. La mo­ti­va­tion pro­ba­ble­ment la plus décisive est le gain en termes de per­for­mance que les sites Web créés affichent. Les ex­cel­lents temps de char­ge­ment lors de l’accès, qui résultent du contenu généré, fa­vo­ri­sent une ex­pé­rience uti­li­sa­teur positive. Comme tous les fichiers du site Web sont stockés de manière cen­tra­li­sée à un point, les projets basés sur un gé­né­ra­teur de site statique offrent également des con­di­tions optimales de flexi­bi­lité et de dis­po­ni­bi­lité. Les tâches ad­mi­nis­tra­tives sont de plus réduites au minimum.

En revanche, si vous penser avoir besoin de :

• réviser ré­gu­liè­re­ment le contenu,
• ajouter des fonc­tion­na­li­tés par la suite,
• traiter les entrées uti­li­sa­teur,
• en­tre­prendre des adap­ta­tions visuelles à tout moment en mo­bi­li­sant peu de com­pé­tences,

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

Les fai­blesses des gé­né­ra­teurs 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 in­con­vé­nients prouvent que les gé­né­ra­teurs de site statique sont inadaptés aux projets de plus grande envergure. Les gé­né­ra­teurs exigent de vastes con­nais­sances sur Markdown et HTML, tandis que de nombreux au­to­ma­tismes qui sont con­si­dé­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 fai­blesses suivantes peuvent également ap­pa­raitre lors de l’uti­li­sa­tion de gé­né­ra­teurs de sites Web statiques :

• Pas de contenu en temps réel : un static site generator n’offre dans sa con­fi­gu­ra­tion standard aucune pos­si­bi­lité de créer des contenus dy­na­miques (comme les re­com­man­da­tions, les mises à jour de prix, la recherche de texte intégral, etc.). Les éléments au­to­ma­ti­que­ment adaptés à l’uti­li­sa­teur qui sont analysés en temps réel ne peuvent être im­plé­men­tés qu’à l’aide de scripts côté client (en par­ti­cu­lier Ja­vaS­cript).
• Uti­li­sa­tion fas­ti­dieuse de l’entrée uti­li­sa­teur : un autre problème lié aux scripts de serveur manquants apparaît lorsque le projet Web doit également permettre les entrées d’uti­li­sa­teur dans certaines si­tua­tions (par exemple lors du rem­plis­sage d’un for­mu­laire de contact). Une fois de plus, Ja­vaS­cript ou la prise en charge des services tiers sont requis. La pla­te­forme DISQUS peut également être utilisée, par exemple, pour ajouter une fonction de com­men­taires (y compris pour la mo­dé­ra­tion des contenus et la gestion du spam).
• Pas d’interface uti­li­sa­teur standard : comme de nombreux CMS headless ne disposant pas de l’extension cor­res­pon­dante, les gé­né­ra­teurs de sites statiques n’ont pas d’interface intégrée, qui per­met­trait 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é­ces­saire et à inspecter le résultat à l’avance à l’aide de la fonction de pré­vi­sua­li­sa­tion, mais n’éliminent pas le besoin des té­lé­char­ge­ments manuels des fichiers préparés sur le serveur.

Pour résumer, les projets basés sur des sites statiques pré­sen­tent des fai­blesses, en par­ti­cu­lier lorsqu’il est question de mises à jour, de chan­ge­ments et d’in­te­rac­tions avec les uti­li­sa­teurs.

Quels sont les gé­né­ra­teurs de site Web statiques connus ?

Le nombre de gé­né­ra­teurs per­met­tant de créer des sites Web statiques a augmenté de façon sig­ni­fi­ca­tive ces dernières années. GitHub contient les ré­per­toires de projets de nom­breuses solutions open source, qui peuvent être utilisées gra­tui­te­ment pour créer votre propre site Web et adaptées selon les besoins.

jamstack.org offre un aperçu des re­pré­sen­tants les plus po­pu­laires : la page ré­per­to­rie les dif­fé­rentes options par ordre al­pha­bé­tique ou triées par étoiles, forks ou problèmes GitHub (sug­ges­tions/tâches d’op­ti­mi­sa­tion). Il est possible également de filtrer les struc­tures de site Web selon le langage de pro­gram­ma­tion (entre autres Ruby, Ja­vaS­cript, Go…).

Le tableau suivant ré­per­to­rie certains des gé­né­ra­teurs les plus im­por­tants en fonction des in­for­ma­tions de Jamstack :

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

Dans ce livre blanc, vous dé­cou­vri­rez notamment les problèmes des CMS con­ven­tion­nels, pourquoi les sites statiques de­vien­nent une véritable al­ter­na­tive 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é­ra­teur de site statique via GitHub : marche à suivre

Vous pouvez fa­ci­le­ment stocker et gérer le code des gé­né­ra­teurs de sites statiques, y compris le contenu, les res­sources et les scripts res­pon­sables de la gé­né­ra­tion de sortie, dans un ré­fé­ren­tiel GitHub. De cette façon, vous pouvez associer votre projet au contrôle de versions et sim­pli­fier la col­la­bo­ra­tion autour du code.

En fin de compte, seul le dé­ploie­ment des fichiers sur un serveur Web reste à faire, avec le processus de cons­truc­tion pour les fichiers HTML et CSS à répéter à chaque mise à jour du ré­fé­ren­tiel. Vous pouvez également sim­pli­fier con­si­dé­ra­ble­ment cette tâche grâce à l’hé­ber­ge­ment de services pour les gé­né­ra­teurs de sites statiques tels que Deploy Now. La solution de IONOS déclenche au­to­ma­ti­que­ment une mise à jour du contenu statique sur votre espace Web en arrière-plan lorsque vous apportez des mo­di­fi­ca­tions au ré­per­toire de votre gé­né­ra­teur de site statique. Pour ce faire, Deploy Now utilise le flux de travail GitHub Actions qui vous permet de sur­veil­ler les journaux de com­pi­la­tion di­rec­te­ment dans l’interface uti­li­sa­teur GitHub.

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

Deploy Now est un service d’hé­ber­ge­ment pratique qui prend en charge tous les gé­né­ra­teurs de sites statiques courants et qui convient par­fai­te­ment pour l’hé­ber­ge­ment Jamstack. Deploy Now offre également des facilités de pré­pro­duc­tion, un cer­ti­fi­cat SSL/TLS gratuit et une pro­tec­tion DDoS pour votre projet.

C’est à vous de décider d’apporter votre propre domaine et de l’intégrer ou d’en­re­gis­trer un nouveau domaine avec IONOS. Pour plus d’in­for­ma­tions sur les con­fi­gu­ra­tions tech­niques, les tutoriels et les projets de démarrage, consultez la do­cu­men­ta­tion of­fi­cielle Deploy Now (en anglais).