Share
Jekyll est un système de génération de sites statiques qui vous permet de convertir des fichiers en texte brut en un blog sophistiqué, sans avoir à vous soucier des bases de données, des problèmes de sécurité, des mises à jour et des complications pouvant découler de nombreux systèmes de gestion de contenu et de blogs..
Comme pour la plupart des systèmes de gestion de sites, il est possible d'utiliser des thèmes sur les sites Jekyll. Cependant, pour le moment, Jekyll n’utilise pas les thèmes comme vous le feriez pour.
En ce moment, les thèmes de Jekyll sont ne pas Les paquets autonomes doivent être appliqués via un programme d'installation. Lorsque vous téléchargez un thème Jekyll, vous téléchargez également tous les fichiers nécessaire pour gérer un site Jekyll complet.
Cela changera dans une future version de Jekyll, mais pour le moment, vous devez savoir comment gérer le fait que les thèmes de Jekyll sont accompagnés d'un site entier qui leur est associé..
Dans ce didacticiel, nous allons dès le début configurer un thème Jekyll, en commençant par quelques conseils élémentaires relatifs à l’installation, en expliquant comment se familiariser avec les fonctionnalités d’un nouveau thème et en suivant des conseils pour la création d’un nouveau site ou une nouvelle installation. la thématisation d'un existant.
Commençons!
La catégorie Jekyll sur le marché Envato propose une gamme de thèmes allant de 19 $ à 24 $. Plus tard, nous utiliserons «Writer» et «Astro» (les deux meilleures ventes actuelles) pour démontrer l'installation.
Thèmes Jekyll sur le marché EnvatoJekyll est conçu pour être géré hors ligne sur votre propre ordinateur, intégré à un site HTML statique, puis déployé. Lors de l'ajout de contenu, le processus de base consiste à créer un fichier de démarques, à ajouter des éléments d'avant en haut, à compléter le reste du fichier avec du contenu, puis à reconstruire votre site..
Une fois que votre site est construit, vous pouvez le déployer de la manière que vous choisissez, que ce soit via FTP ou des commandes git. Cependant, nous ne nous concentrerons pas sur le déploiement dans ce didacticiel. Si vous souhaitez en savoir plus sur le sujet, consultez la documentation de Jekyll..
Nous allons plutôt nous concentrer sur la partie du processus de configuration de votre site Jekyll qui se déroule hors ligne sur votre ordinateur, et qui commence par l’installation..
Travailler avec Jekyll implique un peu d'utilisation de la ligne de commande, mais si vous n'avez jamais travaillé avec la ligne de commande auparavant, ne vous laissez pas décourager. Je vous recommande de parcourir certaines entrées de notre série de didacticiels La ligne de commande pour la conception Web pour vous familiariser avec.
Si votre ordinateur exécute Windows, Malheureusement, Jekyll n'est pas officiellement pris en charge. Cela ne signifie pas que vous ne pouvez pas le faire fonctionner, mais vous devrez peut-être sauter quelques obstacles. Si vous souhaitez utiliser Jekyll sous Windows, consultez les détails de la documentation de Jekyll..
Sinon, si vous utilisez Mac OS X, Linux ou Unix, vous devez vous assurer que ces conditions préalables sont installées:
Pour vérifier si Ruby est installé, exécutez la commande ruby -v. Pour vérifier si Ruby Gems est lancé gem -v. Dans les deux cas, ces commandes recherchent un numéro de version. Aussi longtemps que vous voyez un numéro renvoyé dans votre terminal, vous pouvez continuer..
Nous travaillerons avec Jekyll 3.1.x afin que vous n'ayez pas besoin de NodeJS ou Python, comme indiqué sur la page de documentation d'installation de Jekyll..
Maintenant, pour installer Jekyll sur votre ordinateur, exécutez la commande suivante: gem installer jekyll
Si un message indiquant que vous n’avez pas les droits d’écriture apparaît, faites précéder la commande par sudo et entrez votre mot de passe lorsque vous y êtes invité.
Vous verrez ensuite quelques lignes s'imprimer dans le terminal indiquant le processus d'installation en cours d'exécution. Quand il dit “1 bijou installé” vous avez terminé.
Créons rapidement un site Jekyll afin que vous puissiez voir à quoi il ressemble dans son état par défaut, sans thème, et vous familiariser avec sa structure de fichiers et de dossiers. Créez un dossier pour héberger le site, puis ouvrez un terminal pointant sur le dossier et exécutez: jekyll nouveau .
RemarqueSi vous souhaitez créer un nouveau site Jekyll dans un sous-dossier, utilisez plutôt la commande suivante: jekyll nouveau nom_fichier
Une fois la configuration du site terminée, un message apparaît sur votre terminal: «Le nouveau site jekyll installé à
Maintenant, lancez la commande jekyll servir pour que votre site soit opérationnel hors ligne.
Quand vous voyez le message “Le serveur tourne… appuyez sur ctrl-c pour arrêter” Dans votre terminal, vous pouvez accéder à l'adresse http: // localhost: 4000 dans un navigateur et consulter le site par défaut de Jekyll..
Maintenant que vous avez vu à quoi ressemble la structure de fichiers et de dossiers d'un site Jekyll par défaut, ainsi que son état sans thème, vous aurez une meilleure compréhension de ce que vous voyez à l'intérieur d'un téléchargement de thème Jekyll typique..
Comme vous le savez de ce dont nous avons parlé dans ce tutoriel jusqu'à présent, les thèmes de Jekyll sont actuellement fournis avec tous les fichiers nécessaire pour exécuter un site entier. Et comme vous avez vu dans la dernière section, une fois que vous avez tous ces fichiers, vous pouvez exécuter jekyll servir activer l'affichage de ce site dans un navigateur.
Cela signifie que lorsque vous téléchargez un nouveau thème Jekyll, vous pouvez simplement l'extraire, l'exécuter. jekyll servir et présentez immédiatement le thème sur un site Jekyll entièrement fonctionnel. De nombreux thèmes viendront même avec du contenu de démonstration déjà inclus.
Regardons quelques exemples en utilisant les thèmes “Writer” et “Astro”, (ou celui que vous préférez).
Une fois extraits, parcourez la structure du thème jusqu'à trouver le dossier racine contenant tous les fichiers d'un site Jekyll. Vous devriez pouvoir reconnaître ce dossier à partir de votre installation Jekyll par défaut précédemment. Rechercher des choses comme le _config.yml fichier, le _includes répertoire et ainsi de suite.
Puis ouvrez un terminal dans le dossier et lancez jekyll servir.
Si tout est réussi, vous verrez le message "Adresse du serveur: " avec une URL affichée vers la fin du terminal. Copiez et collez cette URL dans un navigateur et vous devriez voir une démonstration de votre nouveau thème..
Dans certains cas, un message d'erreur peut s'afficher lorsque vous essayez de lancer jekyll servir. Si cela se produit, vérifiez si le message se plaint d’une dépendance manquante, c’est-à-dire qu’il manque quelque chose dont le thème a besoin pour fonctionner correctement dans votre configuration..
Dans cet exemple, vous pouvez voir dans le texte d'erreur rouge que la gem «jekyll-paginate» est manquante:
Une recherche rapide sur Google ouvre le dépôt Github de la gem en question, en fournissant la commande nécessaire à son installation..
Après avoir exécuté ladite commande et installé la dépendance manquante jekyll servir est capable de fonctionner comme prévu avec le thème.
Si vous allez à l'URL fournie et ne voyez pas le site, comme ceci par exemple:
… Vérifier la valeur de baseurl dans le _config.yml fichier. Ce fichier, dont nous parlerons plus loin, contrôle la configuration générale de l’ensemble du site..
le baseurl la variable est ajoutée au domaine principal, qui est http: // localhost: 4000 lorsque nous travaillons en mode hors connexion..
Dans l'exemple ci-dessus, nous souhaitons que notre site s'affiche à l'adresse http: // localhost: 4000. dans le _config.yml déposer notre baseurl variable est définie sur:
baseurl: "http: // localhost"
Cela peut sembler juste au début, mais comme cette valeur est ajoutée au domaine principal, le site essaie en fait de charger à l'adresse http: // localhost: 4000http: // localhost..
Donc, nous devons changer la valeur en une chaîne vide comme ceci:
baseurl: ""
Votre site sera alors chargé comme prévu.
Si vous souhaitez charger votre site à partir d'un sous-répertoire, modifiez le baseurl valeur au nom du sous-répertoire, en veillant à commencer et à terminer par une barre oblique:
baseurl: "/ themedemo /"
L'une des principales raisons pour lesquelles il est judicieux de commencer par servir le thème directement à partir de sa structure existante est (en plus de vérifier qu'il fonctionne comme prévu), il vous permet de vous familiariser avec les fonctionnalités et les flux de travail du thème..
Parce que Jekyll offre beaucoup de flexibilité, ses thèmes peuvent offrir des fonctionnalités très différentes les unes des autres. Après avoir servi une démonstration d'un nouveau thème, prenez le temps de parcourir le site pour voir quel type de structure il contient. Recherchez par exemple si le thème a des pages de catégorie, des images en vedette, des pages d’auteur, etc. Prenez note de ces fonctionnalités pour pouvoir parcourir la documentation du thème et apprendre à les utiliser..
Vous devez également parcourir la structure de fichiers et de dossiers du thème. Les principaux domaines que vous souhaitez étudier sont les suivants:
Vous aurez également besoin de savoir quelles options de configuration à l’échelle du site vous devrez peut-être définir dans les paramètres du site. _config.yml fichier pour utiliser les fonctionnalités du thème, telles que les URL de réseaux sociaux, les informations sur l'auteur, les liens de navigation, etc..
Maintenant que vous avez eu l’occasion de parcourir le thème et de vous familiariser, il est temps de l’utiliser sur votre propre site. Laissez la version de démonstration que vous avez déjà créée inchangée afin de pouvoir comparer votre site fraîchement construit à.
Créez un nouveau dossier sur votre ordinateur et ré-extrayez tous les fichiers du thème..
Cette fois, entrez dans le _des postes dossier et supprimer tous les fichiers là-bas pour que les messages de démonstration soient supprimés.
Après cela, supprimez tout .Maryland (démarque) des fichiers du dossier racine afin que toutes les pages de démonstration soient aussi supprimées.
Si vous le souhaitez, vous pouvez également rechercher et supprimer les images utilisées dans le contenu de la démonstration, telles que les miniatures de publication en vedette, si vous envisagez de les remplacer par les vôtres. La présence d'images de contenu de démonstration peut varier d'un thème à l'autre..
Si votre thème contient des images de démonstration que vous souhaitez supprimer mais que vous ne savez pas exactement où elles se trouvent, consultez la documentation du thème, comme il se doit. Sinon, vous devrez peut-être parcourir le code dans les modèles du thème et le comprendre à partir de là..
Ensuite, vous devriez ouvrir le _config.yml fichier à partir du dossier racine et configurez toutes les variables de site requises par le thème. Certains paramètres seront généralement communs à tous _config.yml des fichiers, tels que Titre, email, la description et quelques autres. Cependant, certains paramètres seront spécifiques au thème donné.
Ce que vous devez faire dans le fichier de configuration du site dépend du thème spécifique. Il est donc judicieux de consulter la documentation du thème à ce stade pour obtenir des conseils sur le fonctionnement de chaque paramètre..
Par exemple, dans le thème Writer, il est possible de configurer un menu de navigation personnalisé à l’aide de la liste_de_nav variable pour définir une liste d’éléments de menu. Chacun a une étiquette, un permalien et une classe qui fera apparaître une icône Font Awesome à côté de lui.
En revanche, le thème Astro n’utilise pas le script Writer. nav_item variable, mais possède ses propres variables personnalisées pour vous permettre d'ajouter des liens vers vos différents comptes de médias sociaux, ainsi que d'activer les commentaires Disqus, etc..
Travailler à travers les variables dans votre propre thème _config.yml déposer jusqu'à ce que vous les ayez tous réglés à votre convenance.
Notez que si vous apportez des modifications de ce type après la première utilisation de votre nouveau site en utilisant jekyll servir, vous devrez arrêter le processus avec CTRL + C et redémarrez-le pour voir les modifications ultérieures prendre effet.
Certains thèmes vous donneront la possibilité de choisir parmi plusieurs mises en page pour votre page d’accueil et de définir des commandes pour leur affichage. Si tel est le cas, vous constaterez probablement que les paramètres peuvent être modifiés à l’avant du index.html fichier du dossier racine.
Si plusieurs présentations sont disponibles, vous constaterez probablement que vous pouvez en choisir une autre en modifiant la valeur du paramètre. disposition vous devrez vous référer à la documentation du thème pour voir quelles valeurs peuvent être utilisées.
Pendant que vous modifiez le fichier, vérifiez si d'autres valeurs doivent être modifiées pour modifier le contenu qui sera affiché sur la page d'accueil. Par exemple, dans le thème Writer, il est possible de définir un titre et une description personnalisés pour apparaître uniquement sur la page d'accueil, ainsi qu'une image sélectionnée..
Si vous souhaitez ajouter des pages telles que “À propos de” ou “Contact”, le moment est venu. Ajouter un .Maryland (démarque) document dans le dossier racine du site pour chaque page à configurer.
Remarque: certains thèmes sont configurés pour que toutes les pages soient placées dans un sous-dossier (généralement nommé "pages") au lieu du dossier racine. Consultez la documentation du thème pour voir si c'est le cas..
Par exemple, ici, j'ai ajouté une page "À propos du site" (à propos.md), une page de profil d'auteur "À propos de moi" (auteur-kezz.md) et une page "Contact" (contact.md)..
Au fur et à mesure que vous ajoutez des fichiers de page, vous voudrez savoir s’il existe des modèles de disposition et / ou des paramètres d’avant-plan spécifiques que vous devriez utiliser avec eux. Pour le savoir, vous pouvez vous référer aux documents du thème ou simplement copier et coller des fichiers de démarques à partir de l'installation de démonstration que vous avez faite du thème et les retravailler..
Par exemple, ici, j'ai copié une page d'auteur existante de la démo de Writer et l'ai convertie en mienne en la renommant puis en éditant son texte et son contenu..
Maintenant que vous avez l'essentiel de la structure de votre site, il est temps d'ajouter des publications. Je recommande de copier un message de la _des postes dossier dans votre site de démonstration et en le collant dans l'installation sur laquelle vous travaillez. Ensuite, vous pouvez le renommer avec la date et le lien permanent que vous souhaitez pour votre nouvel article. En réutilisant un post de démonstration, tous les éléments préliminaires requis seront en place et il vous suffira de le mettre à jour..
Certains thèmes offrent un support pour les pages de catégories et de balises. Cependant, ce n'est pas toujours le cas et la mise en œuvre peut donc différer d'un thème à l'autre. Consultez la documentation de votre thème sur ce que vous devrez peut-être faire pour utiliser les catégories et les balises sur votre site..
Par exemple, dans le thème Writer, pour chaque catégorie à utiliser, il est nécessaire de configurer manuellement un dossier et un fichier de modèle dans un sous-dossier de site nommé «catégorie»..
Il peut également y avoir un nombre quelconque de fonctionnalités supplémentaires disponibles dans le thème spécifique que vous utilisez. Assurez-vous de bien lire la liste des fonctionnalités et la documentation de votre thème pour vous assurer que vous avez parcouru tout ce qu'il contient..
Si vous avez déjà un site Jekyll et que vous souhaitez simplement appliquer un nouveau thème, vous souhaiterez passer par le même processus que celui décrit précédemment. La différence viendra après la suppression du contenu de la démonstration, lorsque vous pourrez simplement copier le contenu de votre site existant au lieu d'ajouter de nouvelles pages et de nouvelles publications..
Si vous avez un site Jekyll existant avec des pages déjà présentes, copiez et collez les fichiers de démarquage associés de votre ancien site dans votre nouveau. Parcourez chaque page et mettez à jour l'avant-propos pour utiliser les présentations et les variables requises du nouveau thème..
Ensuite, copiez tous vos fichiers post de votre ancien _des postes dossier dans votre nouveau. Cela va être un peu fastidieux, mais vous devrez probablement parcourir chaque fichier de publication un par un, mettre à jour son contenu avec les paramètres requis par le nouveau thème et supprimer ceux qui étaient nécessaires par l'ancien. mais ne sont plus utilisés.
Si vous avez un dossier contenant des images et d'autres supports utilisés dans des pages et des publications sur votre ancien site, copiez le dossier entier dans votre nouvelle structure de site. Vos publications et vos pages doivent toujours faire référence aux mêmes emplacements d'image, leur permettant de continuer à apparaître dans votre contenu.
Voilà donc l'essentiel de la configuration d'un thème Jekyll! Les points les plus fins du processus varieront d’un thème à l’autre, mais vous pouvez toujours suivre ces étapes essentielles dans chaque cas. Récapitulons rapidement ce que sont ces étapes.
Accentsconagua
jekyll servir J'espère que ce tutoriel vous a aidé à mettre en place un nouveau site Jekyll avec un thème personnalisé ou à remplacer le thème de votre site existant par un nouveau..
Pour un guide complet sur l’utilisation de Jekyll, consultez ce cours de Guy Routledge:
Merci d'avoir lu et à bientôt!
