Jekyll : Le Générateur de Sites Statiques Simple et Puissant – Guide 2025

Temps de lecture : 6-7 minutes

“Pourquoi se casser la tête avec un générateur de sites statiques quand on peut utiliser WordPress ?”
Si tu te poses cette question, cet article est pour toi. Je vais te montrer pourquoi Jekyll n’est pas un choix de hipsters, mais une solution intelligente pour des sites ultra-rapides, sécurisés et économiques.

Qu’est-ce que Jekyll ?

Jekyll est un générateur de sites statiques écrit en Ruby. Il transforme des fichiers en texte simple (Markdown) en un site HTML complet et prêt à être déployé. Le principe ? Tu écris du contenu, tu choisis une structure avec des templates, Jekyll compile le tout, et tu upload le résultat sur n’importe quel hébergement web.

Le moteur secret : Liquid

Jekyll utilise Liquid, le langage de template créé par Shopify. C’est simple, sécurisé, et ça permet d’injecter des variables, des boucles, des conditions sans écrire de code Ruby. Tu écris {{ page.title }} ou {% for post in site.posts %}, et Jekyll remplace ça par les vraies valeurs au moment de la génération.

Pourquoi c’est génial ? Parce que tu peux créer des layouts réutilisables, inclure des fragments de code, et organiser ton site en collections sans jamais toucher à la logique métier. Le résultat : un site statique (fichiers HTML/CSS/JS) qui se charge en un clin d’œil.

À qui c’est destiné ?

Jekyll n’est pas pour tout le monde. Mais si tu te reconnais ici, c’est probablement fait pour toi :

• Les blogueurs techniques qui n’ont pas besoin d’une usine à gaz comme WordPress
• Les documentations (comme celle que tu lis en ce moment) – Jekyll est idéal pour ça
• Les portfolios et sites vitrines où le contenu change peu
• Les startups qui veulent un site rapide et pas cher à héberger
• Les devs qui aiment le contrôle total sans se prendre la tête avec une base de données

À éviter si tu veux un site e-commerce complexe avec panier et gestion de stocks, ou si tu as peur de la ligne de commande.

Installation pas-à-pas

1. Ruby et Bundler

Jekyll nécessite Ruby (>= 2.7) et Bundler. Sur Ubuntu/Debian :

sudo apt-get install ruby-full build-essential zlib1g-dev

# Installer Bundler
gem install bundler

# Vérifier
ruby -v  # Doit afficher >= 2.7
bundle -v

Sur macOS avec Homebrew :

brew install ruby
gem install bundler

Attention : Si tu es sur Windows, oublie Ruby natif. Installe WSL2 ou utilise Docker. C’est une des galères de Jekyll : Ruby n’aime pas Windows.

2. Créer un site Jekyll

# Créer un nouveau site
jekyll new mon-site

# Aller dans le dossier
cd mon-site

# Installer les dépendances
bundle install

Tu devrais voir cette arborescence :

1
mon-site/
2
├── _config.yml        # Configuration globale
3
├── _posts/            # Articles au format YEAR-MM-DD-titre.md
4
├── _layouts/          # Templates HTML (default, post, page)
5
├── _includes/         # Fragments réutilisables (header, footer)
6
├── _site/             # Généré automatiquement (à ignorer)
7
├── index.html         # Page d'accueil
8
└── assets/            # Images, CSS, JS

Configuration _config.yml

Le fichier _config.yml est le cœur de ta config Jekyll. Exemple minimal :

1
title: "Mon Blog Tech"
2
description: "Blog sur le développement web"
3
url: "https://monsite.com"
4
baseurl: ""  # si ton site est à la racine, laisser vide
5
markdown: kramdown
6
highlighter: rouge
7
paginate: 5  # articles par page

Options utiles :

1
theme: minima  # thème par défaut, ou chemin vers ton thème custom
2
plugins:
3
  - jekyll-feed
4
  - jekyll-seo-tag
5
  - jekyll-sitemap

Écrire un article : le frontmatter

Chaque article commence par un frontmatter YAML entre --- :

1
---
2
title: "Comprendre les générateurs de sites statiques"
3
date: 2026-02-11T10:30:00.000Z
4
categories: [developpement]
5
tags: [jekyll, static-site, web]
6
image: "/images/jekyll-banner.jpg"
7
description: "Les générateurs de sites statiques comme Jekyll, Hugo ou Astro ont le vent en poupe. Voici pourquoi et comment s'y mettre."
8
---
9

10
Ton contenu en Markdown ici.

Format du fichier : Les articles doivent être dans _posts/ et nommés AAAA-MM-JJ-titre.md (ou .markdown). Jekyll lit la date dans le nom ET dans le frontmatter, mais c’est le nom qui prime.

Les layouts et includes

Layouts (_layouts/)

Un layout est un template HTML qui encadre ton contenu. Exemple post.html :

1
---
2
layout: default
3
---
4
<article class="post">
5
  <h1>{{ page.title }}</h1>
6
  <p class="meta">Publié le {{ page.date | date: "%d %B %Y" }}</p>
7
  {{ content }}
8
</article>

• {{ content }} : insère le contenu de la page/l’article
• {{ page.title }} : variable venant du frontmatter

Pour utiliser un layout, dans ton frontmatter : layout: post.

Includes (_includes/)

Ce sont des fragments HTML réutilisables :

1
<header>
2
  <nav>
3
    <a href="/">Accueil</a>
4
    <a href="/about">À propos</a>
5
  </nav>
6
</header>

Inclusion dans un layout :

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>{{ site.title }}</title>
5
</head>
6
<body>
7
  {% include header.html %}
8
  <main>{{ content }}</main>
9
  {% include footer.html %}
10
</body>
11
</html>

Les variables Liquid

Liquid expose plusieurs variables globales :

Exemples pratiques :

1
<!-- Lien vers la page d'accueil -->
2
<a href="{{ site.baseurl }}/">Accueil</a>
3

4
<!-- Liste des 5 derniers articles -->
5
<ul>
6
{% for post in site.posts limit:5 %}
7
  <li>
8
    <a href="{{ post.url }}">{{ post.title }}</a>
9
    <small>{{ post.date | date: "%b %d" }}</small>
10
  </li>
11
{% endfor %}
12
</ul>

Filtres Liquid

• date: "%d %B %Y" : formater une date
• strip_html : enlever les balises HTML
• truncate: 100 : couper à 100 caractères
• where:"category","dev" : filtrer une collection

Collections et données

Créer une collection

Dans _config.yml :

1
collections:
2
  tutorials:
3
    output: true
4
    permalink: /tutoriels/:path/

Cela crée une collection tutorials. Tu peux y mettre des fichiers dans _tutorials/ sans date obligatoire. Accès :

1
{% for tuto in site.tutorials %}
2
  <a href="{{ tuto.url }}">{{ tuto.title }}</a>
3
{% endfor %}

Données externes (YAML/JSON)

Place des fichiers .yml ou .json dans _data/. Exemple _data/authors.yml :

1
john:
2
  name: John Doe
3
  bio: "Dev Ruby"
4
  twitter: johndoe

Utilisation :

1
{% assign author = site.data.authors[page.author] %}
2
<p>Par {{ author.name }} - @{{ author.twitter }}</p>

Développer localement

# Lancer le serveur de dev
bundle exec jekyll serve

# Ou simplement
jekyll serve

# Options utiles
jekyll serve --livereload     # rechargement auto
jekyll serve --port 4000      # changer le port
jekyll serve --host 0.0.0.0   # accessible sur le réseau local

Le serveur tourne par défaut sur http://localhost:4000. Les changements dans les fichiers sont pris en compte instantanément (sauf _config.yml qui nécessite un reload).

Désactiver le cache en dev (dans _config.yml) :

1
incremental: false

Déployer sur GitHub Pages

Le combo Jekyll + GitHub Pages est mariage parfait. GitHub peut builder automatiquement ton site Jekyll (Ruby activé par défaut), ou alors tu pushes le site compilé.

Option 1 : GitHub Actions build (recommandé)

1. Pousse ton code source (avec _posts, _layouts, etc.)
2. GitHub détecte un repo Jekyll et build automatiquement
3. Le site est servi depuis la branche gh-pages (ou docs/)

Configuration dans .github/workflows/ :

1
name: GitHub Pages
2
on:
3
  push:
4
    branches: [main]
5
jobs:
6
  build:
7
    runs-on: ubuntu-latest
8
    steps:
9
      - uses: actions/checkout@v4
10
      - uses: ruby/setup-ruby@v1
11
        with:
12
          ruby-version: '3.1'
13
      - run: bundle install
14
      - run: bundle exec jekyll build
15
        env:
16
         JEKYLL_ENV: production
17
      - uses: peaceiris/actions-gh-pages@v3
18
        with:
19
          github_token: ${{ secrets.GITHUB_TOKEN }}
20
          publish_dir: ./_site

Option 2 : Build local + push _site

# Builder en production
JEKYLL_ENV=production bundle exec jekyll build

# Pousser le contenu de _site vers la branche gh-pages
git checkout gh-pages
cp -r _site/* .
git add .
git commit -m "Deploy"
git push origin gh-pages

Custom domain

Dans _config.yml :

1
url: "https://blog.thomasgermain.com"

Et dans le repo GitHub > Settings > Pages, ajoute ton domain personnalisé. GitHub créera automatiquement un enregistrement CNAME.

Activer GitHub Pages

Dans les paramètres du repo GitHub :

• Source : main branch (avec GitHub Actions) ou gh-pages branch
• Build : “Jekyll” (si tu pousses le code source)

Avantages et inconvénients

Avantages

✅ Ultra-rapide : Site statique = pas de base de données = temps de chargement < 1s
✅ Sécurisé : Pas de SQL injection, pas de XSS dans le backend (seulement coté client)
✅ Peu cher : Hébergement gratuit sur Netlify/Vercel/GitHub Pages
✅ Versionnable : Tout est dans Git, historique clair, rollback facile
✅ Simple à comprendre : Fichiers textes, pas de CMS complexe
✅ Flexible : Tu contrôles tout le HTML/CSS/JS

Inconvénients

❌ Pas de backend : Pas de formulaire contact sans service tiers (Formspree, Getform)
❌ Pas de dynamisme : Si tu veux une app web interactive, il faut JS vanilla ou API externe
❌ Re-build à chaque changement : Pas d’édition en temps réel comme un CMS
❌ Ruby peut être capricieux : Dépendances, gems, compatibilité…
❌ Courbe d’apprentissage : Si tu ne connais pas Liquid, ça prend 2-3 jours

Comparaison rapide

Mon take : Jekyll reste pertinent mais Hugo et Astro sont souvent plus simples et rapides. Jekyll? Si tu aimes Ruby, Liquid, ou que t’as besoin d’une compatibilité parfaite avec GitHub Pages (qui le supporte en natif).

Quand choisir Jekyll ?

Prends Jekyll si :

• ✅ Tu veux un blog ou une doc technique simple et rapide
• ✅ Tu connais déjà Ruby/Rails
• ✅ Tu aimes Liquid et sa simplicité
• ✅ Ton hébergement est GitHub Pages sans config complexe
• ✅ Tu veux un site 100% statique et sécurisé

Évite Jekyll si :

• ❌ Tu veux du contenu éditable par des non-techniciens (il faut un headless CMS)
• ❌ Ton site a besoin de formulaires dynamiques, d’utilisateurs, de commerce
• ❌ Tu détestes Ruby et ses gems foireux
• ❌ Tu veux le must en performance → regarde Astro ou Hugo plutôt

Liens utiles

• 📚 Documentation officielle Jekyll
• 🎨 Thèmes Jekyll
• 📦 Plugins populaires
• 💎 Référence Liquid
• 🏗️ Exemples de sites Jekyll

Conclusion

Jekyll n’est pas le nouveau truc hype. C’est un outil éprouvé, fiable, et mature qui fait très bien son job : transformer du texte en site statique. Si ton besoin est simple (blog, doc, portfolio), Jekyll est un choix solide et économe.

Mais en 2025, la concurrence féroce (Hugo, Astro, Eleventy) pousse Jekyll à se réinventer. La bonne nouvelle ? Si tu choisis Jekyll, tu ne seras jamais seul. La communauté est active, la doc complète, et GitHub Pages le supporte en natif.

Et toi, tu utilises déjà un SSG ? Dis-nous ton retour en commentaire !