Mathieu GAILLARD

Créer un site avec Jekyll : Poster un article

Une fois un site Jekyll mis en place, il peut être intéressant de poster des articles. Dans la suite, je vais expliquer comment le faire.

Créer un article

Pour ajouter un article il suffit de créer un fichier dans le dossier _posts. Le nom de ce fichier est très important. Il doit respecter le format suivant :

ANNEE-MOIS-JOUR-titre.FORMAT
ANNEE

L’année de publication de l’article en quatre chiffres.

MOIS

Le mois de publication de l’article en deux chiffres.

JOUR

Le jour de publication de l’article en deux chiffres.

FORMAT

Le format dans lequel est rédigé l’article.

Par exemple, voici le titre du fichier contenant cet article:

2016-02-20-creer-site-avec-jekyll-poster-article.md

Maintenant que le fichier contenant l’article est créé, il reste à en écrire le contenu. Celui-ci est composé de deux parties. Un en-tête avec des informations concernant l’article, puis le contenu textuel de l’article.

Voici un exemple d’en-tête :

---
layout: post
title:  "Créer un site avec Jekyll : Poster un article"
date:   2016-02-20 15:44:00 +0100
---
layout

Correspond au template utilisé pour afficher l’article. Le template post est situé dans le dossier _layouts, dans le fichier post.html.

title

Le titre de l’article entre guillemets, car c’est une chaine de caractères.

date

La date de publication de l’article. Celle-ci doit être la même que dans le titre du fichier. Quelques détails optionnels peuvent être ajoutés. L’heure au format HH:MM:SS +/-TTTT avec TTTT le décalage depuis l’heure UTC. En France, en hiver, le décalage avec temps UTC est de +01:00, on note donc +0100. La date est utilisée principalement pour trier les articles selon la date de publication.

Le contenu de l’article est rédigé selon le format déterminé par l’extension du fichier contenant l’article. Par exemple : .html pour le format HTML, .markdown ou .md pour le format Markdown, .textile pour le format Textile.

Mise en forme avec Markdown

Le Markdown est un langage de formatage léger. Il permet de mettre en forme facilement un texte brut en HTML. Il a été pensé pour être lisible, c’est pourquoi il n’utilise pas de balises comme le HTML. Voici les éléments que j’utilise le plus :

Pour un titre de niveau 1, on souligne le texte du titre avec au moins deux =.

Titre de niveau 1
=================

Pour un titre de niveau 2, on souligne le texte du titre avec au moins deux -.

Titre de niveau 2
-----------------

Pour mettre en gras du texte, on l’entoure avec deux *.

**Texte en gras**

Pour mettre en italique du texte, on l’entoure avec une *.

*Texte en italique*

Pour un nouveau paragraphe, on saute une ligne.

Premier paragraphe.

Deuxième paragraphe.

Pour une liste, on met une * et un espace devant chaque élément.

* Premier
* Deuxième
* Troisième

Pour un lien, on met le texte du lien entre crochets, puis les informations de celui-ci entre parenthèses : d’abord l’URL, puis le titre entre guillemets.

[Jekyll](http://jekyllrb.com "Aller sur le site de l'outil Jekyll.")

Pour une image, on met d’abord un ! suivi de texte alternatif entre crochets, puis les informations entre parenthèses : d’abord l’URL, puis le titre entre guillemets.

![Le logo de Jekyll](http://jekyllrb.com/img/logo-2x.png "Logo de Jekyll")

La liste que j’ai faite n’est pas exhaustive. Je n’ai décrit que les principaux éléments que j’utilise. Pour plus de détails je vous conseille la page Wikipédia de Markdown.

Lister les articles

Pour que les articles soient accessibles, ils doivent être listés sur une page du blog. Il possible de le faire grâce au langage Liquid géré par Jekyll. Voici un exemple :

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

Dans chaque page ou article est déclarée la variable site.posts qui contient le liste des posts dans l’ordre de leur publication. Il est aussi possible d’afficher une petite description d’un article avec {{ post.excerpt }}. Par défaut, cette variable contient le premier paragraphe de l’article, balises <p> incluses. Pour supprimer les balises <p> il suffit d’ajouter ces filtres :

{{ post.excerpt | remove: '<p>' | remove: '</p>' }}

Ce qui donne finalement :

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      {{ post.excerpt | remove: '<p>' | remove: '</p>' }}
    </li>
  {% endfor %}
</ul>

Il est possible de personnaliser la partie du texte à afficher comme introduction d’un article, en précisant un délimiteur. Pour plus de détails, voir la documentation de Jekyll : Writing posts : Post excerpts.

Pour plus d’informations sur les possibilités offertes par le moteur de template de Jekyll, voir la documentation de Jekyll : Templates.

Pour en savoir plus