Tutoriel Jekyll : Créer un blog statique Jekyll

Jekyll est une gem ruby qui va vous permettre de générer des sites statiques à partir de plusieurs fichiers (markdown ou textile). Le principal intérêt d'un tel système est qu'il vous permettra de publier simplement votre site car il génère des fichiers HTML (pas de langage côté serveur). Il est aussi supporté par Github ce qui vous permettra par exemple de créer et d'héberger gratuitement un site.

Installation

La première étape est d'installer Jekyll. Pour cela je part du principe que vous avez déjà installer Ruby sur votre système.

• Si vous êtes sur Mac Ruby est déjà installé
• Si vous êtes sur Windows je vous conseille d'utiliser une Machine Virtuelle
• Si vous êtes sur Linux il est conseillé d'utiliser RVM pour installer ruby

Jekyll se présenter sous forme d'une gem à installer sur le système

$: gem install jekyll

Une fois la gem installé vous pourrez créer un nouveau projet Jekyll en faisant

$: jekyll new <Nom du projet>

Ce qui aura pour effet de générer les fichiers nécessaires. Si vous souhaitez construire le site à partir de ces fichier il suffira d'utiliser la commande jekyll build qui créera automatiquement votre site statique dans un dossier _site

En revanche si vous souhaitez travailler sur les sources de votre projet il faudra utilise la commande jekyll serve qui vous permettra de lancer un serveur Webrick pour voir votre projet sur le navigateur. Pour que les modifications des fichiers soient prise en compte vous pouvez utiliser l'option watch

$: jekyll serve --watch

Fonctionnement

Un projet jekyll se compose de plusieurs fichiers/dossiers importants.

config.yml

Ce fichier permet de stocker la configuration du site. Tous les attributs définit dans ce fichier seront accessible dans les fichiers html en faisant site.

_posts

Ce dossier va contenir les différents articles qui vont composer notre site. Ces articles peuvent être au format markdown ou textile (ou autre à l'aide de plugins) et devront suivre la nomenclature suivante : YYYY-MM-JJ-mon-super-article.md

*.html

Les fihiers html se décomposent en 2 parties.

Au début du fichier, entre --- on pourra définir les propriété de notre page tel que le layout à utiliser, le titre de votre page...

Ensuite, en dessous de cette déclaration on peut utiliser la syntaxe liquid qui permettra par exemple d'afficher des variables et de faire des boucles.

_layouts

Ce dossier va contenir des pages HTML utilisées lorsque l'on précisera un layout dans nos fichier HTML, elles peuvent elles-même faire appelle à d'autres layouts.

_includes

Ce dossier contiendra des blocs de code HTML que l'on souhaitera utiliser à plusieurs endroits à l'aide du bloc liquid include {% include _social.html %}

Jekyll offre pas mal de fonctionnalitées et le mieux pour les découvrir reste de l'utiliser pour se créer un petit site perso.

Héberger sur GitHub

Comme je vous l'ai dit, un des avantage de Jekyll est de pouvoir héberger son projet simplement gràce à GitHub Pages. Vous pouvez l'utiliser de 2 façon :

• Pour créer une page pour votre dépôt http://.github.io/. Dans ce cas là il vous faudra versionner votre projet jekyll sur une branche gh-pages
• Pour vous créer un site perso http://.github.io/ en créant un dépôt .github.io sur votre compte, et en publiant votre projet jekyll sur la branche master

Attention toutefois à quelques limitations, en effet github n'autorise pas l'utilisation de plugins pour ces pages (pour des raisons de sécurité). Donc si vous en utilisez il vous faudra publier directement les fichiers HTML.