Cecil : mon générateur de site statique

Cecil est un projet personnel, se présentant sous la forme d'une application en ligne de commande facilitant la création d’un site web, statique.

Le concept (et la première version) a émergé en 2013 et depuis je n’ai cessé de faire évoluer l’application, de l'enrichir, tout en essayant de respecter le principe suivant :

L’application doit être simple à appréhender et le contenu doit être au cœur de son usage.

Create and deploy a static blog in 1 minute with @Cecil_Static (https://t.co/FzVEkJ7VaL) and @Netlify, from a mobile phone! 😁 pic.twitter.com/AMx3hPpaCd

— Arnaud Ligny 👨‍💻 💡 🚀 (@ArnaudLigny) 2 mai 2019

Un générateur de site statique ?

Cecil n’est pas un CMS (Système de gestion de contenu) mais « uniquement » un outil facilitant la création d’un site web à partir de :

1. contenus (textes et images)
2. templates HTML/CSS

Ainsi Cecil va injecter les contenus — souvent rédigés sous la forme d’articles, de billets de blog, ou encore de simples pages de texte — dans un template qui lui va garantir la mise en forme pour une mise à disposition « web ».

En pratique c’est ce que fait n’importe quel outil de publication — dynamique — de contenu (tel que WordPress ou Drupal) à la différence que ce dernier (re)génère la page à chaque consultation par l'internaute et que très souvent les contenus sont enregistrés dans une base de données.

Dans le cas d’un générateur comme Cecil le site est créé (ou « généré ») en une seule fois, à chaque modification (du contenu ou d’un template) : pages HTML, feuilles de styles, images, etc.

Une fois le site web (re)généré, il suffit de le publier sur n’importe quelle plateforme d’hébergement pour le rendre disponible.

C’est pour cela que l’on utilise le terme de « site statique » : le site web généré « s’auto-suffit », c’est à dire qu'il n’a pas besoin d’être interprété (dynamiquement) par le serveur pour être consulté depuis un navigateur web.

Pourquoi créer un nouvel outil ?

En effet, quand j’ai commencé à imaginer cette application la mouvance statique était bien engagée et il existait déjà de nombreux générateurs de site statique, tels que : Jekyll, Pelican, Sculpin, Nikola, Hexo, Spress, ou encore Hugo qui était très prometteur !

La réponse tient en 3 points :

1. J’avais besoin d’un outil très simple fonctionnellement et techniquement
2. Je souhaitais utiliser un moteur de template complet et agréable à utiliser au quotidien
3. Enfin, naissait l’envie — après celle de mon fils — de me lancer dans énième side project 😄

Remarque : Concernant le développement, je n’avais ni le temps ni l’envie d’investir dans un nouveau langage de programmation en dehors de mon temps de travail. Aussi j’ai préféré enrichir mes connaissances en PHP.
Plusieurs années après je regrette pas ce choix !

Comment ça marche ?

Le principe de Cecil est très simple : il s’agit d’une archive PHP (Phar), exécutable en ligne de commande, manipulant des fichiers selon une arborescence donnée.

Ainsi, pour générer (builder) un site il suffit de lancer la commande php cecil.phar build dans un terminal, à l’intérieur d’un dossier structuré de la manière suivante :

<mywebsite>
├─ content
|  ├─ blog
|  |  ├─ post-1.md
|  |  └─ post-2.md
|  └─ about.md
├─ layouts
|  └─ _default
|     ├─ list.html.twig
|     └─ page.html.twig
└─ static
   └─ style.css

On y trouve les contenus (dans le répertoire content) qui doivent être hiérarchisés selon l’arboresence cible du site web.
Chacune des pages, qu'il s’agisse d’une page simple (par exemple “à propos”) ou encore un billet de blog, peut être redigée au format texte ou, pour une rendu plus travaillé, au format Markdown.

Les templates (layouts) quant à eux doivent être des fichiers Twig.

Les assets (tels que les fichiers CSS, les images, etc.) doivent être placés dans le répertoire static et sont copiés tel quel dans le site généré.

Enfin, le site est généré dans le répertoire _site :

<mywebsite>
├─ content
├─ layouts
├─ static
└─ _site
   ├─ blog
   |  ├─ post-1
   |  |  └─ index.html
   |  └─ post-2
   |     └─ index.html
   ├─ about
   |  └─ index.html
   ├─ index.html
   └─ style.css

Pour aller plus loin

Après cette rapide introduction, plutôt que de paraphraser le site officiel, je vous invite à commencer par le « Quick Start » ! 🙂

D’autres billets viendront détailler les fonctionnalités de Cecil, telle que la pagination automatique, la gestion de la taxonomie (les tags), les multiples formats de sortie (ex : RSS), la prévisualisation, etc.

Notes :
Pour reproduire le build et le déploiement automatisé montré dans le tweet d’introduction je vous invite à consulter la documentation : Build and deploy with Netlify ;
Le logo à été créé par la fantastique Cécile Ricordeau, Directrice de Création freelance.