Tutoriel Jekyll : tout ce qu’il faut savoir

En novembre 2008, Tom Preston-Werner, l’un des quatre fon­da­teurs de la pla­te­forme GitHub publiait le gé­né­ra­teur de site Web Jekyll sous licence de logiciel libre MIT. Écrit en Ruby, ce gé­né­ra­teur fonc­tionne sur la base d’un ré­fé­ren­tiel de templates qui contient une série de fichiers texte struc­tu­rés et statiques Markdowns de dif­fé­rents formats. Ils dé­ter­mi­nent non seulement la mise en page mais aussi le contenu de chaque projet Web. Ils peuvent donc être adaptés aux besoins in­di­vi­duels. Le gé­né­ra­teur ne fournit pas l’éditeur WYSIWYG, mais nécessite l’écriture de code classique. À cette fin, il est re­com­mandé d’utiliser l’éditeur de contenu Prose, qui simplifie l’édition de Markdown, et qui est aussi optimisé pour Jekyll.

Avant que les mo­di­fi­ca­tions apportées au code ne soient in­cor­po­rées dans la version live de l’ap­pli­ca­tion Web, elles peuvent être ins­pec­tées grâce au serveur de dé­ve­lop­pe­ment de Jekyll. Le moteur de rendu im­plé­menté s’assure que les fichiers se trans­for­ment en un site Web statique (qui peut ensuite être livré avec n’importe quel serveur Web commun). Ceci génère au­to­ma­ti­que­ment le code HTML lorsque les mo­di­fi­ca­tions sont apportées aux fichiers texte.

Voici comment créer des sites Web Jekyll très simples très ra­pi­de­ment :

Mais des con­cep­tions 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 al­ter­na­tive 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 sim­pli­cité, qui ca­rac­té­rise le travail avec le gé­né­ra­teur de sites Web et les projets déjà créés. Puisqu’une base de données n’est pas né­ces­saire, on évite l’ins­tal­la­tion et le processus de con­fi­gu­ra­tion. En outre, le fait que l’accès à la base de données ne soit plus né­ces­saire a un effet positif sur le temps de char­ge­ment du site. Le code mi­ni­ma­liste, réduit aux fonctions et éléments im­por­tants capables de dis­tin­guer tous les thèmes pour Jekyll, contribue à la bonne per­for­mance, au dé­ve­lop­pe­ment et à la main­te­nance facile des projets. Con­trai­re­ment à un CMS tra­di­tion­nel, Jekyll génère des balises prêtes à l’emploi im­mé­dia­te­ment après une mo­di­fi­ca­tion, et pas seulement lorsqu’un uti­li­sa­teur 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 com­po­sants dif­fé­rents. Dans la mesure où aucune mise à jour régulière n’est né­ces­saire, la structure de code stable s’assure que le site Web est hautement dis­po­nible à 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 dy­na­miques (comme PHP ou Ja­vaS­cript). Par con­sé­quent, il n’offre pra­ti­que­ment aucune surface d’attaque.

Bien que la base de code limitée ne re­pré­sente aucun obstacle pour les dé­ve­lop­peurs ex­pé­ri­men­tés, le gé­né­ra­teur en question pose des dif­fi­cul­tés pour les novices. La version standard de Jekyll n’a pas d’interface graphique, donc l’ins­tal­la­tion 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é­ve­lop­pe­ment de sites Web, qui disposent souvent de centaines ou même de milliers de modèles de con­cep­tion. Il en va de même pour l’as­sis­tance uti­li­sa­teur qui tombe en panne en raison de la petite com­mu­nauté et de la faible diffusion.

Le tableau suivant résume les avantages et les in­con­vé­nients prin­ci­paux 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’uti­li­sa­teur et le mot de passe de votre futur compte.

Ensuite, sé­lec­tion­nez l’abon­ne­ment désiré, c’est-à-dire soit la version gratuite (pour un nombre illimité de ré­per­toires publics) soit la version payante (pour un nombre illimité de ré­per­toires privés). Enfin, vous pouvez fournir en option des in­for­ma­tions sur vos com­pé­tences en pro­gram­ma­tion et vos intérêts. Vous recevrez un email de con­fir­ma­tion de GitHub. Il faut activer votre compte en cliquant sur le lien proposé dans cet email.

Main­te­nant, vous pouvez vous connecter en utilisant le compte que vous avez créé. Le tableau de bord uti­li­sa­teur vous donne une vue d’ensemble des dif­fé­rents ré­per­toires. Au début, il ne présente aucune in­for­ma­tion. Pour modifier ceci, commencez par créer un nouveau ré­fé­ren­tiel. Pour ce faire, cliquez sur le signe « + » dans la barre de lancement uti­li­sa­teur et sé­lec­tion­nez l’élément de menu « new re­po­si­tory ».

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

• Vous pouvez commencer en­tiè­re­ment à partir de zéro et cons­truire votre site Web sans modèle avec Jekyll. Pour plus d’in­for­ma­tions à ce sujet, consultez la do­cu­men­ta­tion of­fi­cielle.
• 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é­ra­teur de site statique.

En ce qui concerne la sélection du thème, un fichier de con­fi­gu­ra­tion (config.yml) et une page d’index (index.md) sont créés au­to­ma­ti­que­ment. Ce dernier re­pré­sente une forme de pré­vi­sua­li­sa­tion des thèmes pour Jekyll, qui est aussi déjà au format Markdown. Cette page d’accueil ainsi que le fichier de con­fi­gu­ra­tion peuvent être modifiés. Pour ce faire, il faut tout sim­ple­ment sé­lec­tion­ner le fichier approprié, et ensuite, cliquer sur l’icône crayon dans la barre de menus.

Si l’ins­tal­la­tion 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 Ja­vaS­cript) en cliquant sur « Create new file ». De cette façon, vous créez également des sous-pages sup­plé­men­taires pour votre projet Web. Via « Upload files », il est aussi possible de té­lé­char­ger des fichiers di­rec­te­ment. Vous pouvez le faire en spé­ci­fiant l’em­pla­ce­ment 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 (dis­po­nible 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é­ren­tiel que vous avez créé et vous serez au­to­ma­ti­que­ment amené à la page de té­lé­char­ge­ment.

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 sim­ple­ment avec votre login GitHub et sé­lec­tion­nez « Clone a re­po­si­tory » dans le menu de démarrage. Vous avez main­te­nant la pos­si­bi­lité de spécifier le ré­fé­ren­tiel à cloner. Dé­fi­nis­sez l’em­pla­ce­ment de stockage sur « Local path ».

Dans votre ré­fé­ren­tiel, vous pouvez accéder à dif­fé­rentes branches. Il s’agit de branches in­di­vi­duelles du projet, qui per­met­tent aux dé­ve­lop­peurs de tra­vail­ler con­join­te­ment à l’éla­bo­ra­tion du code ou de se con­cen­trer sé­pa­ré­ment sur des domaines de dé­ve­lop­pe­ment spé­ci­fiques. IONOS Deploy Now affiche main­te­nant les branches in­di­vi­duelles du ré­fé­ren­tiel cloné. Dès que vous créez une nouvelle branche, celle-ci s’affiche au­to­ma­ti­que­ment à 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é­ve­lop­pe­ment in­di­vi­duelles.