Créez un blog avec Jekyll

Jekyll est un outil de création de site internet. Il permet de générer des pages HTML à partir de votre contenu rédigé dans de simples fichiers textes.

Finis les sites en CMS avec du PHP/MySQL : Pourquoi créer des pages dynamiques en interrogeant une base de données quand il suffit de créer directement la page finale ?

C’est ce que permet Jekyll, tout en offrant un accès plus rapide et sécurisé à votre site.

Pré-requis

Vous aurez besoin de Linux, Unix, ou Mac OS X. Pour les utilisateurs de Windows… utilisez une machine virtuelle ?

Installation

Jekyll utilise le langage Ruby et nécessite une librairie Javascript telle que NodeJS en guise de serveur web. Mais ne craignez rien, il n’est pas nécessaire de savoir les utiliser. Tapez simplement les commandes suivantes dans une console pour procéder à l’installation :

sudo apt-get install ruby-dev
sudo gem install jekyll
sudo apt-get install nodejs

Exécution

Créez un dossier dans lequel vous allez travailler :

jekyll new dossier
cd dossier

Envoyez la purée :

jekyll serve

Ouvrez votre navigateur internet et allez à l’adresse http://localhost:4000. Un site par défaut apparait.
Pour arrêter le serveur, tapez les touches CTRL+C dans la console.

Création d’un article

Rédigez vos articles au format markdown. Il s’agit d’un simple fichier texte avec une syntaxe particulière pour la mise en forme.
Voici un exemple :

---
layout: post
title:  "Mon titre"
permalink: /:year/:title.html
date: 2014-12-11 18:54:00
---

# Titre de paragraphe

Ceci est mon premier article.

Dans l’exemple ci-dessus :

• layout : indique le template utilisé, ici : “post” pour _layouts/post.html;
• title : le titre de votre article;
• permalink : le lien hypertexte de l’article sera “…/2014/mon-titre.html'
• date : la date de publication de l’article;
• la liste n’est pas exhaustive, vous pouvez ajouter des tags, un résumé, l’auteur…

Nommez impérativement vos fichiers markdown de la façon suivante : ANNEE-MOIS-JOUR-titre.mkd.
Par exemple : 2014-12-24-mon-article.mkd.
Placez ces fichiers dans le dossier _posts.

Et c’est là que la magie opère. A chaque création, modification, ou suppression d’un fichier, toutes les pages du site sont générées automatiquement dans le dossier _site.

Ajoutez un peu de Liquid

Ouvrez la page index.html du dossier principal. On peut voir que le listing des articles est généré de la façon suivante :

{% raw %}
  <ul class="post-list">
    {% for post in site.posts %}
      ...
      <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
      ...
    {% endfor %}
  </ul>
{% endraw %}

Vous disposez de plusieurs variables qui permettent de récupérer des informations sur :

• le site : liste des articles, des pages, url…
• les pages : url, date, titre, contenu…

Bref, de quoi créer dynamiquement vos pages statiques :)
Voir la documentation sur la syntaxe de Liquid pour en savoir plus.

Commentaires

Un site intéractif c’est mieux. Vous pouvez utiliser les services de DISQUS, ou Facebook qui proposent un système de commentaires. Il suffira de copier-coller quelques lignes de code HTML/Javascript dans votre template, par exemple dans _layouts/post.html.

Publiez votre site

Vous utilisez les services d’un hébergeur

Transférez simplement par FTP le contenu du dossier _site.

Vous utilisez Jekyll directement sur le serveur web

Il est possible de générer les pages dans le dossier web au lieu de _site. Pour cela, modifiez la variable destination dans le fichier de configuration _config.yml.

Hébergez votre site gratuitement sur GitHub

GitHub propose un hébergement gratuit sur https://pages.github.com/ avec des pages “powered by Jekyll”. Il est également possible d’effectuer une redirection de votre nom de domaine.

Il existe d’autres solutions de publication, plus ou moins complexes, mais dans tous les cas cela se résume à une synchronisation de dossiers.

Références

Pour aller plus loin je recommande la lecture de la documentation sur le site officiel de Jekyll (en anglais).