Jekyll, la meilleure façon de développer un site statique

Si vous avez besoin de développer un site statique, un blog par exemple, ou une page web qui présente votre entreprise, Jekyll pourrait vous faire gagner un temps précieux.

Quelle est la difference entre un site web statique et un site dynamique ?

Un site statique est un site qui ne va pas évoluer tout seul, c'est une vitrine ou un blog dont le contenu n'évolue au fil du temps que par l'action de la personne qui le gère. Au contraire, un site dynamique sera vivant. Par exemple sur les réseaux sociaux, le contenu évolue tous les jours grâce aux utilisateurs. Les sites dynamiques sont généralement des sites où il y a de l'interaction, par exemple via des formulaires.

Pourquoi utiliser un générateur de site statique ?

Si vous avez l'habitude de développer des sites web, votre réflex sera peut-être de vous tourner vers un outil comme Wordpress afin de créer votre site statique. Tout d'abord, Wordpress est un CMS assez lourd, et sa mise en place nécessite la création d'une base de données. C'est quand même contraignant de devoir créer une base de données alors que l'on en a pas forcément besoin. Deuxièmement, en tant que développeur j'aime bien versionner tous les projets sur lesquels je travaille à l'aide d'un outil comme Git. Or, lorsque l'on utilise un CMS comme Wordpress, énormément d'informations importantes sont enregistrés dans la base de données, comme de la configuration ou encore les articles de blog. Comme vous le savez, versionner une base de données avec Git, ce n'est pas vraiment possible / une bonne idée. Ne pas pouvoir versionner son code rend les déploiements beaucoup plus complexes, en supposant que vous ne travaillez jamais directement sur la production. Alors, il existe quoi comme alternative ?

Avec un générateur de site statique, il n'y a pas de base de données. Vous générez l'intégralité de votre site à partir de vos fichiers sources. En général la mise en page est séparée du contenu, vous pourrez donc définir des templates, ou utiliser des templates par défaut, et rédiger votre contenu dans des fichiers. Le moteur de site statique génère automatiquement toutes les pages de votre site au format HTML en se basant sur vos sources.

Il y a de nombreux avantages à utiliser un générateur de site statique :

• Facile à mettre en place, pas de base de données, pas de CMS à installer, juste des fichiers à créer.
• Votre site est très rapide car il n'y a ni calcul, ni requête à la base de données lorsque l'on accède à une page.
• Comme évoqué tout à l'heure, vous pouvez tout versionner et donc mettre en place facilement une procédure de déploiement automatique.
• Pas de faille de sécurité dans un site statique, a priori si votre site se compose uniquement de page HTML, vous ne prenez aucun risque pour ce qui est de la sécurité.

Jekyll comment ça fonctionne ?

Jekyll est un générateur de site statique en ruby, très simple d'utilisation et facile à apréhender. C'est l'outil que j'utilise pour développer ce blog et pour le blog de KPulse.

En quelques commandes vous pouvez installer Jekyll et créer un nouveau projet. Assurez-vous d'abord d'avoir Ruby et Bundler sur votre machine.

  
~$ gem install bundler jekyll
~$ jekyll new my-awesome-site
~$ cd my-awesome-site
  

Une fois cette étape passé, les fichiers de base de votre site sont créés. Dans _config.yml vous trouverez la configuration de votre site statique. Ce fichier vous permettra d'ajouter des plugins, de définir des "variables" que vous pourrez réutiliser dans vos pages, et même de définir des collections.

Dans Jekyll, les collections sont un moyen très efficace de stocker des ensembles d'informations. C'est en quelque sorte ce qui remplacera votre base de donnéee. Vous pouvez par exemple créer une collection "category" pour enregistrer les catégories de votre blog, ou une collection "author" pour lister les auteurs de vos articles etc.

La collection "posts" est créée automatiquement. C'est la collection qui vous permet de gérer les articles de votre blog. Pour écrire un article il vous suffit maintenant de créer un fichier dans le répertoire _posts (nom de la collection). Le nom du fichier doit respecter le format YYYY-MM-DD-name.md ou YYYY est l'année de publication, MM le mois et DD le jour. Exemple : 2019-04-20-mon-article.md. L'entête du fichier vous permet de définir le template utilisé pour afficher votre poste, la date de l'article, les catégories, le path et n'importe quelle information que vous voudriez associer à votre article. Le reste du fichier contiendra votre contenu au format Markdown ou HTML.

  
---
layout: post
title:  "Titre de mon article"
description: "Description de l'article"
permalink: /url-du-poste
categories:
- Business
---
  

Pour récupérer la liste des postes depuis un de vos templates (pour afficher les articles sur l'accueil de votre blog ou encore pour afficher les articles récents), vous pouvez utiliser la syntaxe suivante :

  
    <ul> 
      {% for post in site.posts limit:3 %}
        <li> 
          <h2>{{ post.title }}</h2> 
          <span class="text-muted">{{ post.date }}</span> 
        </li> 
      {% endfor %}
    </ul>
  

Si vous souhaitez définir vos propres templates, il suffit de créer des fichiers HTML dans le répertoire _layouts. La valeur de la variable layout que l'on définit dans l'entête d'un fichier HTML où MD permet de choisir le template avec lequelle la page sera généré. Dans un template, utilisez la syntaxe {{ content }} pour afficher le contenu de la page.

Quelques plugins utiles

• jekyll-sitemap génère automatiquement le sitemap de votre site. Aucune configuration n'est nécessaire, ce plugin est 100% automatique. Très pratique pour indexer son site dans les moteurs de recherche.
• jekyll-paginate-v2 s'occupe de la pagination des articles de votre blog.

Comment héberger gratuitement un site statique avec Github ?

Avec Github Pages vous avez la possibilité d'héberger gratuitement votre site statique. Il vous suffit de créer un repository sur votre compte Github et de le configurer pour obtenir une url au format USERNAME.github.io.

Pour en savoir plus sur la marche à suivre pour héberger son site sur Github.