Jekyll : le générateur pratique de sites Web statiques

Pour beaucoup, WordPress est le premier choix lors de la création d'un nouveau blog ou d’une page d'accueil d’une société. Au fil des ans, ce système de gestion de contenu (ou CMS pour content management system) est devenu un outil fiable qui convient aux débutants aussi bien qu’aux pros. Comme il a évolué en un système complet à grande échelle, le CMS en question dépassait rapidement les besoins des développeurs Web. C'est précisément la raison pour laquelle des alternatives légères comme Jekyll s’occupent de ce problème. Dans la mesure où ce dernier se limite aux composants les plus nécessaires, ce générateur permet d’implémenter des sites Web sans aucun accès aux bases de données ou aux autres logiciels supplémentaires.

Qu'est-ce que Jekyll ?

En novembre 2008, Tom Preston-Werner, l'un des quatre fondateurs de la plateforme GitHub publiait le générateur de sites Web Jekyll sous licence de logiciel libre MIT. Écrit en Ruby, ce générateur fonctionne sur la base d’un référentiel de templates qui contient une série de fichiers texte structurés et statiques (markdowns) de différents formats. Ils déterminent non seulement la mise en page mais aussi le contenu de chaque projet Web. Ils peuvent donc être adaptés aux besoins individuels. Le générateur ne fournit pas l’éditeur WYSIWYG, mais nécessite l'écriture de code classique. À cette fin, il est recommandé d’utiliser l’éditeur de contenu Prose, qui simplifie l'édition de Markdown, et qui est aussi optimisé pour Jekyll.

Avant que les modifications apportées au code ne soient incorporés dans la version live de l'application Web, elles peuvent être inspectées grâce au serveur de développement de Jekyll. Le moteur de rendu implémenté s’assure que les fichiers se transforment en un site Web statique (qui peut ensuite être livré avec n'importe quel serveur Web commun). Ceci génère automatiquement le code HTML lorsque les modifications sont apportées aux fichiers texte.

Afin de protéger votre vie privée, la vidéo ne se chargera qu'après votre clic.

Pour utiliser le générateur de sites Web, vous pouvez le télécharger et l’héberger localement sur votre propre ordinateur. D’autre part, GitHub Pages est une alternative utile qui prend en charge non seulement l’hébergement mais aussi le rendu HTML. Ce service gratuit, basé sur le moteur Jekyll, permet également de déposer vos propres pages de projet, blogs ou pages Web sur les serveurs GitHub.

Jekyll, ses avantages et inconvénients

Créer des pages Web statiques et des blogs avec Jekyll est une alternative aux systèmes de gestion de contenu mais aussi aux outils de création de pages Web. Le principal avantage de cette solution est sa simplicité, qui souligne le travail avec le générateur de sites Web et les projets déjà créés. Puisqu’une base de données n’est pas nécessaire, on évite l'installation et le processus de configuration. En outre, le fait que l’accès à la base de données ne soit plus nécessaire a un effet positif sur le temps de chargement du site. Le code minimaliste, réduit aux fonctions et éléments importants capables de distinguer tous les thèmes pour Jekyll, contribue à la bonne performance, au développement et à la maintenance facile des projets.

Jekyll garantit aussi stabilité et sécurité : puisque le serveur Web n’a qu’à fournir des fichiers texte, le risque d'erreur avec Jekyll est beaucoup plus faible que dans le cas de sites Web faits de plusieurs composants différents. Dans la mesure où aucune mise à jour régulière n'est nécessaire, la structure de code stable s’assure que le site Web est hautement disponible à long terme. La sécurité résulte du fait que Jekyll opère sans aucun CMS, base de données ou scripts avec des éléments dynamiques (comme PHP ou JavaScript). Par conséquent, il n’offre pratiquement aucune surface d'attaque.

Bien que la base de code limité ne représente aucun obstacle pour les développeurs expérimentés, le générateur en question pose des difficultés pour les novices. La version standard de Jekyll n’a pas d’interface graphique, donc l’installation doit être effectuée via l’interface en ligne de commande. Par conséquent, ceux qui n’ont pas les connaissances nécessaires dépendent d'une interface utilisateur tiers. En ce qui concerne la sélection de thèmes, Jekyll est inférieur à beaucoup de CMS et aux autres outils de développement de sites Web, qui disposent souvent de centaines ou même des milliers de modèles de conception. Il en va de même pour l’assistance utilisateur qui tombe en panne en raison de la petite communauté et de la faible diffusion.

Le tableau suivant résume les avantages et les inconvénients principaux de Jekyll.

Avantages Inconvénients
✔ Temps de charge court ✘ En général, il ne dispose pas d’une interface utilisateur graphique
✔ Il n’est pas nécessaire de créer et gérer le CMS ou les bases de données ✘ Procédure de compilation longue
✔ Il n’offre aucune surface d’attaque ✘ Peu de thèmes et de plugins
✔ Il n’est pas nécessaire d’effectuer des mises à jour régulières ✘ Petite communauté
✔ La procédure de la programmation jouit d’une grande liberté (le libre choix d’interface utilisateur et l’éditeur) ✘ Pas d’éditeur graphique
✔ Pas de dépendance de certains formats ou d’outils supplémentaires ✘ Script côté serveur indisponible (par exemple pour les formulaires)
✔ Hébergement gratuit en régie propre ou sur les serveurs GitHub possible  
✔ Propre serveur de développement  
✔ Contrôle de version disponible via GitHub  

Jekyll et GitHub : la symbiose parfaite

 

Dans les cercles de développeurs, GitHub peut s’enorgueillir d’une belle réputation. Cette plateforme simplifie considérablement la gestion des projets et la publication des codes de programmes, surtout lorsque beaucoup de différents développeurs prennent part à un projet. Plus de 24 millions d’utilisateurs accèdent à l'application Web basée sur le logiciel de GitHub développé par une équipe dirigée par Linus Torvalds, qui publia ce programme de contrôle de version en 2005 comme une alternative à BitKeeper. Aujourd’hui, GitHub utilise cette application open source pour gérer les codes sur ses serveurs qui sont ensuite stockés dans des répertoires distincts.

D’abord, les ajustements des projets sont enregistrés comme forks (scissions), afin que l'auteur puisse recevoir une notification appropriée, et décider s'il doit l’inclure dans le code d'origine.

Afin de protéger votre vie privée, la vidéo ne se chargera qu'après votre clic.

Afin de stocker votre présence Web sur les serveurs GitHub, le fournisseur de plateformes pour développeurs GitHub Pages vous permet à créer (en option) votre propre répertoire. La spécificité réside dans le fait que la base du code pour ces pages de projets est fournie par Jekyll. Par conséquent, les blogs ou les pages d'accueil simples sont faciles à créer et hébergés gratuitement. En bref, GitHub Pages fonctionne comme un simple CMS tel que Jekyll qui permet non seulement la sélection d'un thème mais aussi l'utilisation d’éditeur de plateforme pour la création de contenu. En outre, le référentiel GitHub doit être cloné pour pouvoir être stocké localement. Ce processus fonctionne soit via un terminal soit via le client de bureau respectif (disponible pour Windows et MacOS).

Afin de protéger votre vie privée, la vidéo ne se chargera qu'après votre clic.

Qu’est-ce qui distingue Jekyll d'autres générateurs de blogs et d’autres CMS ?

La plus grande différence entre Jekyll et tous les autres systèmes de gestion de contenu standards a déjà été soulevée : il peut être utilisé pour créer des pages qui fonctionnent sans aucune base de données. Par ailleurs, il n’est pas possible d'incorporer des éléments dynamiques, et c’est la raison pour laquelle seules des pages statiques peuvent être créées avec Jekyll.

Cependant, il existe également des CMS sans bases de données qui sont conçus uniquement pour les projets côté client. Ceux-ci sont néanmoins plus complexes que Jekyll. Cela donne aux utilisateurs plus de confort avec des fonctionnalités telles que les backends, les administrations des utilisateurs et de nombreuses options d'extension. Dans le même temps, ceci les rend plus sensibles aux bogues et ouvre également plus d'espace pour de potentielles failles de sécurité.

Afin de protéger votre vie privée, la vidéo ne se chargera qu'après votre clic.

Lorsque l’on compare Jekyll aux autres générateurs de sites Web statiques comme Hugo ou Middleman, il devient clair que Jekyll marque ses points avec sa connexion directe à GitHub ainsi qu’avec les avantages qui en résultent, comme l’excellente gestion des versions ou un service d’hébergement gratuit.

Tutoriel Jekyll : la création de sites Web avec Github Pages

GitHub permet à chaque utilisateur ou société de créer un site Web pour chaque compte qui peut se composer d'un nombre illimité de sites. La capacité de stockage de projets est limitée à un gigaoctet. Étant donné qu’il n’y a pas d’éléments dynamiques, ceci est absolument suffisant. Pour le fonctionnement d'un blog ou d'une page simple d'entreprise, la limite mensuelle de bande passante de 100 giga-octets est aussi considéré comme suffisante. Si vous avez encore besoin de plus de ressources, vous pouvez contacter le support technique afin de trouver une solution individuelle, par exemple l’utilisation d’un réseau de diffusion de contenu (RDC).

Si vous êtes intéressé par les capacités de Jekyll et GitHub Pages, le tutoriel suivant explique, étape par étape, la façon dont vous pouvez utiliser le générateur dans le cadre de plateformes développeurs.

Première étape : créer un compte GitHub

Pour utiliser GitHub Pages, il faut tout simplement créer un compte. Allez sur le site Web GitHub et entrez votre adresse email valide, votre nom d'utilisateur et un mot de passe.

Ensuite, sélectionnez l’abonnement désiré, c’est-à-dire soit la version gratuite (pour un nombre illimité de répertoires publics) soit la version payante (pour un nombre illimité de répertoires privés). Enfin, vous pouvez fournir optionnellement des informations sur vos compétences en programmation et vos intérêts. Vous recevrez un email de confirmation de GitHub. Il faut activer votre compte en cliquant sur le lien proposé dans cet email.

Deuxième étape : créer un répertoire pour votre site Web/blog

Maintenant, vous pouvez vous connecter en utilisant le compte que vous avez créé. Le tableau de bord utilisateur vous donne une vue d'ensemble des différents répertoires. Au début, il ne présente aucune information. Pour modifier cette configuration et créer les conditions préalables à l'utilisation des GitHub Pages, créez un nouveau répertoire.

Pour ce faire, cliquez sur le signe « + » dans la barre de lancement utilisateur et sélectionnez l'élément de menu « new repository ». Lorsque vous nommez ce répertoire, il est important que vous adhériez au modèle « nomutilisateur.github.io ». Sinon, la conversion ultérieure vers un répertoire ne fonctionnera pas.

Troisième étape : choisir le thème pour Jekyll

Après avoir créé le répertoire, vous pouvez à tout moment y accéder à partir du menu de démarrage en cliquant sur « Repositories ». Jusqu'à présent, il s’agit d’un référentiel de projet GitHub ordinaire. Afin de le transformer en votre répertoire Web, il faut naviguer dans la section de GitHub Pages qui permet de sélectionner un thème pour Jekyll. Premièrement, ouvrez le référentiel, et ensuite, les paramètres (« settings »).

Défilez vers le bas pour trouver « GitHub Pages ». Cliquez sur « Choose a theme » pour ouvrir le gestionnaire de templates de Jekyll, où vous pouvez choisir l'un des douze modèles standards. Cliquez sur « Select theme » pour confirmer votre sélection.

Quatrième étape : publier la première page avec un message de bienvenue

En ce qui concerne la sélection du thème, un fichier de configuration (config.yml) et une page d'index (index.md) sont créés automatiquement. Ce dernier représente une forme de prévisualisation des thèmes pour Jekyll, qui est aussi déjà au format Markdown. Cette page d'accueil ainsi que le fichier de configuration peuvent être modifiés. Pour ce faire, il faut tout simplement sélectionner le fichier approprié, et ensuite, cliquer sur l'icône crayon dans la barre de menus.

Supprimez le code et ajoutez un message de bienvenue sur votre site Web :

## Bienvenue sur mon site Web!

Ensuite, si vous confirmez le message de bienvenue via « commit changes », vous pouvez dès maintenant accéder à votre première page via le repo sélectionné dans la deuxième étape (qui est également l'URL de votre présence Web).

Note

pour des fins de test, vous pouvez laisser le code Markdown dans sa forme actuelle. Ainsi, votre page d'accueil sera identique au thème appelé DemoPage.

Cinquième étape : ajouter votre propre contenu

Si l'installation n’a rencontré aucun dérapage jusqu’à ici, vous pouvez commencer à concevoir votre site Web. À cette fin, il faut que vous créiez tous les fichiers dont vous avez besoin (tels que les CSS-Sheets ou les codes JavaScript) en cliquant sur « Create new file ». De cette façon, vous créez également des sous-pages supplémentaires pour votre projet Web. Via « Upload files », il est aussi possible de télécharger des fichiers directement. Vous pouvez le faire en spécifiant l'emplacement ou même en insérant les fichiers souhaités via glisser/déposer.

Sixième étape : télécharger le client de bureau

Il est aussi possible de diriger un site Jekyll via l'interface Web de GitHub. Cependant, avec le client de bureau (disponible pour Windows aussi bien que pour MacOS), il y a une solution hors ligne. Si vous ne l'avez pas encore installé, cliquez sur « Set up in Desktop » dans le répertoire que vous avez déjà créé et vous serez automatiquement amené à la page de téléchargement.

Septième étape : clonage du répertoire

Une fois que vous avez téléchargé et installé le client, vous pouvez l'utiliser pour faire une copie locale de votre présence Web. Pour ce faire, connectez-vous simplement avec votre login GitHub et sélectionnez « Clone a repository » dans le menu de démarrage. Vous avez maintenant la possibilité de spécifier le référentiel à cloner. Définissez l'emplacement de stockage sur « Local path ».

Jekyll : offres supplémentaires

Le tutoriel montre que la création et l'hébergement d'un site Web via GitHub Pages peuvent être mis en œuvre assez rapidement. Toutefois, en cas de problèmes avec votre projet Jekyll sur GitHub, vous pouvez contacter le support technique à tout moment. En outre, le site en question offre plusieurs manuels, ainsi qu'une vaste collection des questions fréquemment posées qui traitent de l'utilisation de contrôle de version, le langage de Markdown ou l’édition de code. Il existe aussi une impressionnante collection de vidéos sur la chaîne YouTube de GitHub qui complète la gamme des outils d’assistance.

Afin de protéger votre vie privée, la vidéo ne se chargera qu'après votre clic.

Si vous souhaitez utiliser Jekyll sans GitHub, nous recommandons la série des tutoriels faits par Arachné Tutorials divisée en trois parties. Cela vous montre non seulement toutes les informations importantes sur la structure de l'infrastructure Web basée sur les fichiers,mais les tutoriels en question indiquent aussi comment configurer le générateur de site Web statique et publier votre propre page.

Afin de protéger votre vie privée, la vidéo ne se chargera qu'après votre clic.