Le blog et sa JAMStack

En guise d’ouverture de ce blog, nous allons détailler sa mise en place avec un concept fort du moment : la JAMStack.
Explications sur son lancement avec : Dr. Jekyll & M. … Netlify.

JAMStack, c’est quoi ?

C’est l’acronyme de JavaScript API Markup.
Contrairement à un CMS plus traditionnel, qui rend des pages dynamiquement depuis une base de données, l’idée est de construire un site web dont les pages sont pré-compilées et donc prêtes à être rendues directement par un serveur.
Les intérêts sont multiples:

Notre choix : Jekyll

Il existe un véritable éco-système autour de la JAMStack. On les appelles les Générateurs de site statique. Tous viennent avec leurs concepts mais surtout leurs technologies de prédilection : Jekyll, Hugo, Gatsby, Next.js, pour ne citer qu’eux.

logo jekyll

Pour notre besoin relativement simple (maintenir notre site et ce blog), notre choix s’est porté sur Jekyll. Ce dernier propose d’écrire ses pages avec un support natif du Markdown (format dont on a l’habitude d’utiliser dans nos projets).
L’outil vient également avec la gestion de tous les concepts qu’un blog peut contenir : posts, auteurs, categories, tags, etc. Son utilisation est relativement simple, de par son moteur de templating et ses nombreuses extensions disponibles (par exemple notre flux RSS est disponible via un simple ajout du plugin jekyll-feed).
On définit quelques templates, notre CSS, du contenu au format Markdown ou HTML et le tour est joué. A la phase de build, Jekyll va transformer notre contenu en un joli site statique prêt à déposer.

Hébergement : Netlify

Comme évoqué plus haut, une bonne pratique vis à vis d’un site statique est de l’héberger sur un CDN. S’il y a bien un acteur qui fait émerger ces JAMStack, c’est forcément Netlify.

logo netlify

C’est un spécialiste du déploiement et de l’hébergement du contenu statique. En quelques clics, on branche son dépôt Git (oui, Git fait office de base de données de notre contenu !), éventuellement on configure les DNS, et voilà ! Netlify s’occupe de déployer le site à chaque changement sur la branche master, d’activer automatiquement le certificat SSL/TLS via Let’s Encrypt. En bonus, Netlify s’occupe de créer une adresse de prévisualisation basée sur les Pull Request. Pratique quand on veut voir l’aperçu sans avoir à compiler le projet !

Y’a plus qu’à…

… fournir du contenu.
Mais aussi et surtout de l’améliorer continuellement. Exploration des extensions qui peuvent nous être utiles, mise en place d’un CMS pour profiter d’une interface moderne de publication de contenu, les possibilités sont nombreuses. En conclusion, une manière efficace, simple et performante pour monter votre site.

Pour en savoir plus

Quelques liens à disposition :