Cet article va te donner une bonne vue d'ensemble des sites statiques et de leurs cas d'utilisation typiques. Et qui sait, cela te donnera peut-être aussi des idées pour créer ton prochain site !
Pour comprendre ce qu'est un site statique, commençons par un rapide rappel sur les sites dynamiques....
Les sites dynamiques
Aujourd'hui, les 2 façons les plus courantes de créer des applications ou sites web sont d'utiliser :
- un framework serveur tel que Symfony, ASP.Net Core MVC, Django, Express.js, Ruby on Rails...etc., pour créer des applications multipage (MPA). Le schéma ci-dessous représente le processus de traitement d'une requête dans ce type d'application.
- ou un framework client tel que Angular, React, Vue, Svelte...etc. exploitant une API web créée au moyen d'un framework serveur, pour créer des applications monopage (SPA)
On peut combiner plus ou moins ces 2 approches pour obtenir le meilleur des 2 mondes, au prix d'une certaine complexité supplémentaire. C'est par exemple ce que propose Nuxt.js, qui s'appuie sur Vue.js côté client et Node.js côté serveur.
Dans tous les cas, le rendu des pages est dynamique, soit sur le serveur (Server Side Rendering), soit sur le client (Client Side Rendering). C'est-à-dire que chaque page affichée sur le client est construite (au moins en partie) à la volée, en réponse à une requête de l'utilisateur.
Les sites statiques
Pour créer des sites web, il existe une 3e voie à laquelle on pense peut-être moins souvent, mais qui revient en force ces dernières années : le SSG (Static Site Generation). Cette approche consiste à générer les pages du site à l'avance, au moment du développement, et non pas dynamiquement au moment où les clients les demandent.
Dans l'approche SSG, on génère les pages HTML avant de les copier telles quelles sur le serveur. Le serveur n'a alors plus qu'à les distribuer en réponse aux demandes des clients. Il n'a pour cela besoin d'aucun framework ni d'aucune base de données.
La partie haute du schéma suivant représente la génération des pages d'un site statique à partir d'un ensemble de sources (templates, données et images), à l'aide d'un générateur de sites statiques.
Une fois le site déployé sur le serveur, lorsque les utilisateurs parcourent le site, ils récupèrent des pages HTML déjà prêtes (et éventuellement mises en cache). La navigation est donc très rapide.
Cas d'utilisation des sites statiques
Disons-le tout de suite, les sites statiques sont par nature plus limités que les sites dynamiques :
Limitations des sites statiques
- Ils ne permettent pas de traiter directement sur le serveur des données envoyées par les clients. Ils ne prennent donc pas en charge de façon autonome l'authentification, les comptes clients, les commentaires de blogs... etc.
- Ils ne sont pas adaptés à des sites dont le contenu change très souvent, car chaque changement nécessite une régénération du site et un redéploiement sur le serveur.
Remarque : pour contourner la première limitation, les pages peuvent appeler en JavaScript des API externes ou services serverless pour stocker et traiter les données des utilisateurs (principe de la Jamstack - Jam pour JavaScript, APIs et Markup).
Mais dans de nombreux cas, la mise en œuvre de sites dynamiques n'est pas vraiment justifiée et les sites statiques sont une solution plus simple !
Voici les types de sites qu'on peut créer sous forme de sites statiques :
- Blogs
- Magazines
- Sites de documentation, wikis, base de connaissance
- Sites éducatifs et cours en ligne
- Sites événementiels (conférences, mariages, etc.)
- Sites vitrine (sites d'entreprises, pages de présentation de produits)
- Portfolios et CV en ligne
- ...
Comme tu peux le voir, l'éventail est assez large !
Avantages par rapport aux sites dynamiques
Les sites statiques peuvent amener des avantages substantiels par rapport aux sites dynamiques :
- Leur développement est beaucoup plus simple qu'avec les gros frameworks JavaScript classiques.
- Ils permettent un chargement des pages extrêmement rapide.
- Par nature, ils sont très sécurisés puisqu'ils n'exploitent pas de base et ne stockent aucune donnée client.
- Ils facilitent le SEO, car les pages s'affichent immédiatement.
- Ils sont très simples à déployer, car ils ne nécessitent aucun framework ni aucune base sur le serveur. Cela ouvre aussi la porte à un vaste choix d'hébergements, notamment les CDN.
- Ils ne nécessitent aucune maintenance (sauvegarde, restauration, optimisation de la base...)
- On peut automatiser leur génération et leur déploiement.
Pour finir, il faut bien garder ceci en tête :
Note
L'expression "site statique" concerne bien le mode de génération et de distribution des pages, et non leur comportement. En particulier, les pages d'un site statique peuvent inclure du JavaScript pour implémenter un visuel dynamique ou appeler des services externes :-).
Par exemple, une page statique peut inclure un script permettant à l'utilisateur de filtrer le contenu d'un tableau sans quitter la page.
Comment créer un site statique ?
Les sites statiques existent depuis l'origine du web. Les tout premiers sites n'étaient même que des sites statiques. Mais à l'époque, il fallait créer manuellement toutes les pages HTML...
Les générateurs de sites
Aujourd'hui, des outils modernes appelés générateurs de sites statiques permettent d'automatiser la génération d'un site statique à partir d'un ensemble de sources (templates, données et images), comme vu dans le schéma plus haut.
Parmi les générateurs de sites statiques les plus connus, on peut citer Hugo, Gatsby, Jekyll, Eleventy... Tu trouveras une liste complète classée par popularité sur cette excellente page. Beaucoup de générateurs sont en JavaScript, mais pas tous.
Attention
Certains frameworks comme Next, Nuxt ou Astro permettent de créer aussi bien des sites dynamiques que des sites statiques, mais ce ne sont pas les outils les plus simples pour créer de sites statiques !
Pour ma part, j'ai choisi Eleventy pour sa légèreté, sa rapidité et sa polyvalence. Ce générateur est une vraie pépite !
Voyons maintenant plus en détail les fichiers nécessaires pour générer un site statique.
Les templates
Les fichiers de templates sont des modèles de pages HTML. Ils s'appuient sur des moteurs de template tels que Markdown, Nunjucks, Liquid, Pug, JSX, Go... pour générer les pages HTML finales du site, en y intégrant des données variables que je vais détailler juste après.
Dans un site statique, on crée généralement le contenu simple (articles, cours, descriptions de produits...) sous forme de templates Markdown, car c'est un excellent format d'écriture, simple, concis et facile à lire.
Pour composer des pages à partir de plusieurs éléments et faire la mise en page, on a en revanche besoin d'un langage de template plus évolué. On crée pour cela des fichiers au format HTML, contenant éventuellement aussi du CSS et du JavaScript, et on y ajoute des instructions de template telles que des conditions, des boucles et l'importation d'autres templates.
Pour créer une structure de page complexe, on peut en effet agréger des templates partiels et utiliser l'héritage de template, comme illustré dan le schéma suivant :
Pour mon blog, j'utilise par exemple un template de base qui décrit l'en-tête et le pied de page, et des templates dérivés pour les différents types de pages (accueil, blog, article...). Toutes ces pages héritent ainsi de l'en-tête et du pied de page.
J'ai également créé un template partiel qui représente le fil d'Ariane et que je référence dans les templates de pages qui en ont besoin.
Je ne vais pas entrer ici dans le détail de la syntaxe de template, car ce serait trop long. Cela fera l'objet d'un autre article.
Les données
Les templates utilisent différents types de données variables pour construire les pages HTML :
- les métadonnées des pages : url, titre, description, date de création, langue, catégorie, tags...etc.
- des collections : typiquement la collection des articles d'un blog
- des données calculées (ex. : fil d'Ariane)
- des libellés traduits en différentes langues pour un site multilingue
- ...etc.
Des générateurs de site statiques tels qu'Eleventy implémentent le concept de "cascade de données", qui permet aux templates d'accéder facilement à ces données.
Par exemple, un template représentant des articles de blog peut accéder aux métadonnées de l'article qu'il décrit. Lors de la génération des pages HTML à partir des templates et des données, chaque page d'article intègre ainsi ses métadonnées spécifiques.
On peut définir les données à différents endroits :
- Dans les frontmatter YAML des fichiers de template Markdown
- Dans des fichiers de données JS ou JSON
- Dans des objets définis par le code à l'intérieur des fichiers de configuration du générateur
Et les composants dans tout ça ?
Un composant est un objet complexe qui rassemble dans un même fichier du code HTML, CSS et JavaScript (ou C# dans le cas de Blazor), et peut inclure de la logique métier, des événements et des états locaux, ainsi que d'autres composants. Les composants sont très bien adaptés à la création d'interfaces dynamiques et interactives, où l’état de l’application change côté client...ce qui n'est pas le cas dans les applications statiques.
Donc, bien qu'il soit tout à fait possible de structurer un site statique en composants (notamment avec Nuxt.js et Svelte Kit), cette granularité et cette complexité sont souvent superflues et peuvent alourdir inutilement le projet. Elle implique également des outils de build plus complexes et une gestion plus fine de l’assemblage des pages.
Mais il est également possible d'intégrer quelques composants interactifs dans un site globalement statique. C'est ce que propose par exemple Eleventy avec son plugin de composants WebC.
En synthèse
J'aime beaucoup l'idée d'utiliser les outils les plus appropriés pour chaque usage.
Les gros frameworks web comme Angular, React / Next, Vue / Nuxt, Blazor, et les CMS comme WordPress sont parfaitement adaptés à des applications à forte interactivité ou au contenu très dynamique, comme des sites de e-commerce, des applis de réseaux sociaux, de chat, de banque...etc.
Les générateurs de sites statiques (SSG) sont quant à eux particulièrement adaptés à la création de sites dont le contenu change peu, et qui n'ont pas besoin de stocker des données client sur le serveur. Cela inclut les blogs, magazines, portfolios, sites de docs, sites de cours, sites vitrines...etc.
Pour ces types de sites, le SSG apporte de gros avantages par rapport aux sites dynamiques en termes d'édition, de performances, de sécurité, et de facilité de maintenance et de déploiement.
Pour ma part, même si l'éditeur de WordPress (Gutenberg) est très puissant, je trouve tellement plus confortable d'écrire mes articles de blog en Markdown dans Obsidian sur mon PC ! Dans cet article je détaille les autres raisons qui m'ont poussées à passer de WordPress à Eleventy.
Pour finir, l'approche Jamstack permet de dépasser les limites des sites statiques avec des appels d'APIs externes en JavaScript, pour ajouter du contenu dynamique ou des fonctionnalités interactives.
As-tu déjà créé un site statique, et si oui avec quels outils ? Sinon, envisages-tu d'en créer un ?