Jekyll : Ou comment générer des sites web statiques avec du markdown

Jekyll c’est quoi?

Avant tout, Jekyll n’est pas un CMS, c’est un générateur de site statique en ruby, le produit de Jekyll est simplement un ensemble de fichiers HTML, CSS, JS, images.

Jekyll est réalisé en:

  • Ruby pour le moteur
  • Liquid pour les templates
  • yAML Pour les fichiers de config

C’est le moteur qui fait tourner Github Pages.

Jekyll c’est:

Simple
Pas de base de donnée, juste les contenus, peut être entièrement hébergé sur github, même avec un nom de domaine perso. -> pas cher :)

Statique
Markdown (or Textile), Liquid, HTML & CSS, Sass

Blog-friendly
Permalinks, categories, pages, posts, et (depuis la 2.0), un équivalent des custom posts de wordpress

En gros… c’est très cool.

Comment ça marche

  • Jekyll regarde le contenu de _posts, _includes, et les fichiers et dossiers
  • Compile le Sass
  • Applique un template
  • Converti le Markdown et Textile vers de l’HTML
  • Exécute les convertisseurs Liquid
  • Génère des pages HTML statiques

Prérequis nécessaires

Techniques :

  • Une machine avec Ruby pour jekyll
  • Si bower : node.js
  • Un terminal (cmd.exe)
  • Connaissances en command-line
  • Un éditeur ( SublimeText, Brackets, notepad )

Autres :

  • Savoir lire
  • Aimer la command-line et le markdown (être un bogoss quoi)
  • Des connaissances en Ruby sont un plus, mais pas nécessaires.
  • Un café

Comment ça marche?

En gros :

[code_highlight]
$: gem install jekyll
$: jekyll new my-awesome-site
$:cd my-awesome-site
$:jekyll serve
=> Se rendre sur http://localhost:4000
[/code_highlight]

$:jekyll new my-awesome-site

Voici le squelette de fichiers crées par jekyll lors de sa créations :

Jekyll first launch

  • _config.yml : le fichier de configuration général
  • _includes : petits bouts de code à “includer” -> même chose qu’en php
  • _layouts = templates
  • _posts : l’endroit ou sont les fichiers markdown des contenus
  • about.md : une page
  • feed.xml : RSS
  • index.html : la page d’index….

Première build

Pour builder le site une première fois, rendons nous dans le terminal,
puis

[code_highlight]
$: cd my-awesome-site
$: jekyll build
$: jekyll serve
[/code_highlight]

Vous pouvez maintenant vous rendre dans votre navigateur web préféré, et vous rendre sur l’adresse :
http://localhost:4000
Pour découvrir votre site nouvellement crée.

Jekyll first launch
Jekyll first launch
Jekyll first launch

Dans le prochain article, nous verrons en détail les différents fichiers de base, l’édition de templates, l’architecture et encore beaucoup d’autres choses !
Stay tuned !

Linkographie