Tutoriel Jekyll : tout ce qu’il faut savoir

En novembre 2008, Tom Preston-Werner, l’un des quatre fondateurs de la plateforme GitHub publiait le générateur de site 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ées 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.

Voici comment créer des sites Web Jekyll très simples très rapidement :

Mais des conceptions encore plus complexes sur le plan graphique peuvent aussi être mises en œuvre :

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 caractérise 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. Contrairement à un CMS traditionnel, Jekyll génère des balises prêtes à l’emploi immédiatement après une modification, et pas seulement lorsqu’un utilisateur consulte la page.

Jekyll excelle également en matière de stabilité et de 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ée 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. 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 de 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.

Vous avez besoin d’un compte GitHub en premier lieu. Pour ce faire, accédez au site Web GitHub join et entrez une adresse email valide, votre nom d’utilisateur et le mot de passe de votre futur compte.

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 en option 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.

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 ceci, commencez par créer un nouveau référentiel. Pour ce faire, cliquez sur le signe « + » dans la barre de lancement utilisateur et sélectionnez l’élément de menu « new repository ».

Jusqu’à présent, il s’agit d’un référentiel de projet GitHub ordinaire. Pour le convertir dans votre référentiel Web, différentes méthodes s’offrent à vous :

• Vous pouvez commencer entièrement à partir de zéro et construire votre site Web sans modèle avec Jekyll. Pour plus d’informations à ce sujet, consultez la documentation officielle.
• Utiliser un thème Jekyll facilite la mise en route.
• L’exemple de Jekyll de Deploy Now est également un bon début pour un site Web dédié avec le générateur de site statique.

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.

Si l’installation n’a rencontré aucun dérapage jusqu’à ici, vous pouvez commencer à concevoir votre site Web ou votre blog. À cette fin, il faut que vous créiez tous les fichiers dont vous avez besoin (tels que les feuilles de style en cascade 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.

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éférentiel que vous avez créé et vous serez automatiquement amené à la page de téléchargement.

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 ».

Dans votre référentiel, vous pouvez accéder à différentes branches. Il s’agit de branches individuelles du projet, qui permettent aux développeurs de travailler conjointement à l’élaboration du code ou de se concentrer séparément sur des domaines de développement spécifiques. IONOS Deploy Now affiche maintenant les branches individuelles du référentiel cloné. Dès que vous créez une nouvelle branche, celle-ci s’affiche automatiquement à l’aide de Deploy Now. Vous pouvez ainsi suivre à tout moment l’ensemble de votre projet Web et les progrès réalisés au sein des branches de développement individuelles.