Share
Dans le post précédent, j'avais parlé de GitHub Pages et de la façon de le configurer sur votre référentiel GitHub. Nous avons utilisé le générateur de site pour commencer et j’ai mentionné que GitHub Pages supporte également Jekyll..
Dans cet article, je parlerai de Jekyll et vous montrerai comment le configurer avec votre projet. J'ai créé un exemple de projet que vous décrochez et suivez en même temps.
Qu'est-ce que Jekyll? Voici leur description sur leur site:
Jekyll est un générateur de site statique simple, prenant en compte les blogs.
Il est entièrement axé sur le contenu et prend également en charge Markdown. Il utilise Liquid pour ses présentations afin que vous puissiez réutiliser des éléments tels que votre tête, votre en-tête et votre pied de page. Il générera des pages statiques en fonction de votre contenu et des mises en page que vous spécifiez..
Il est également sensible aux blogs, donc il pourrait être un remplaçant potentiel pour WordPress ou un autre CMS..
La chose la plus importante à noter est peut-être que, dans Jekyll, les liens permanents, les catégories, les pages, les publications et les présentations personnalisées sont tous des citoyens de premier ordre..
Vous pouvez également générer et afficher votre site localement, ainsi que.
Jekyll étant basé sur Ruby, le moyen le plus simple à installer consiste à utiliser RubyGems. Si vous êtes sur Mac ou Linux, vous pouvez installer Jekyll via la ligne de commande en exécutant gem installer jekyll. Si vous rencontrez des problèmes lors de cette installation, je vous suggère de consulter le guide d'installation..
Si vous êtes sous Windows, vous devrez suivre une page de documentation spécifique à Windows..
La première chose à configurer est le fichier de configuration. Vous voudrez ajouter un _config.yml fichier à la racine de votre projet. Vous pouvez ajouter un certain nombre d’options de configuration. Je vais en utiliser un sous-ensemble pour cet exemple. Allez-y et ajoutez ce qui suit à votre _config.yml fichier:
# Dépendances markdown: rdiscount pygments: true # Permaliens permalink: pretty # Destination du serveur: _gh_pages hôte: 0.0.0.0 port: 9001 baseurl: / encoding: UTF-8
Maintenant que nous avons ajouté notre fichier de configuration, poursuivons la configuration de la structure du projet..
Vous devez suivre une structure spécifique lorsque vous créez un site basé sur Jekyll. Il est important de suivre la structure pour que votre site soit généré correctement. Voici à quoi ça ressemble,
C'est ici que vous allez avoir vos différentes mises en page pour vos pages. Vous pouvez penser à ceux-ci comme des modèles de page WordPress. Vous voudrez peut-être que votre mise en page par défaut ait une barre latérale et une autre mise en page sans barre latérale. Vous ferez référence à ces mises en page dans votre contenu en fonction du nom du fichier..
Allez-y et créez un _layouts dossier à la racine de votre projet. Ensuite, supposons que vous souhaitiez créer la mise en page par défaut. Vous voudrez créer un default.html à l'intérieur de _layouts dossier. Vous pourrez alors référencer la mise en page par défaut dans vos différentes pages.
Vous voudrez probablement ajouter quelque chose à chacun de vos fichiers de mise en page, au titre et au contenu de la page. Si vous souhaitez que le titre de votre page apparaisse, vous voudrez l'ajouter à votre mise en page en utilisant la syntaxe suivante:
titre de la page
Vous voudrez également spécifier où vous voulez que le contenu de chaque page soit rempli dans cette mise en page. Pour ce faire, vous devrez utiliser la syntaxe suivante:
contenu
Ceux-ci sont utilisés dans le fichier default.html de l'exemple de projet..
Vous voudrez probablement inclure d'autres éléments qui seront réutilisés dans chaque page, tels que l'en-tête, le pied de page, la navigation, etc. Vous voudrez les ajouter à votre _includes dossier.
Les inclus seront des choses que vous voudrez réutiliser sur différentes pages, comme je l’ai mentionné ci-dessus. Vous voudrez les ajouter dans le _includes dossier. Allez-y et créez un _includes dossier à la racine de votre projet.
Supposons que vous souhaitiez inclure la tête du document. Vous devez d’abord ajouter un head.html déposer dans le _includes dossier. Vous ajouteriez alors tout ce dont vous avez besoin pour la tête du document, comme le doctype, les métadonnées, les scripts, etc..
Ensuite, vous voudrez faire référence à cela head.html déposer dans votre default.html fichier de mise en page. Pour ce faire, utilisez la syntaxe suivante:
% include head.html%
Vous pouvez voir que cela est utilisé dans le fichier default.html dans l'exemple de projet..
Vous feriez la même chose pour tout ce que vous voudriez réutiliser entre des pages comme votre en-tête et votre pied de page. Vous pouvez également créer des sous-dossiers dans le répertoire. _includes dossier et les référencer aussi bien. J'aime faire cela pour organiser les sections de différence de chaque page si elles ont beaucoup de contenu.
Maintenant que nous avons une mise en page par défaut, faisons notre première page. Allez-y et créez un index.html fichier dans le dossier racine de votre projet. Ne vous inquiétez pas, cela ne remplacera pas celui de votre thème index.php fichier si vous l'utilisez pour documenter votre thème WordPress.
En haut de chaque fichier, vous devrez spécifier quelques éléments concernant la page. C’est ce à quoi jekyll fera référence lors de la construction de chaque page. Vous pouvez définir un certain nombre de choses, mais je vais me concentrer sur certaines d’entre elles:
Voici un exemple à ajouter en haut de votre index.html fichier:
--- layout: titre par défaut: Tuts + GitHub Pages slug: tuts-github-pages ---
Maintenant que nous avons configuré notre page, il ne nous reste plus qu'à ajouter notre contenu. Ajoutez simplement tout le code HTML que vous souhaitez afficher dans votre page.
La construction et le service de vos pages se font via la ligne de commande. Allez-y et ouvrez votre outil de choix en ligne de commande, tapez jekyll servir et appuyez sur Entrée. Vous devriez voir le résultat suivant:
Si vous voyez le bon résultat, vos pages sont construites et prêtes à être visualisées. Vous pouvez maintenant afficher vos pages en vous rendant sur http: // localhost: 9001, ou sur le port spécifié _config.yml fichier, dans votre navigateur de choix.
J'ai couvert les bases pour commencer à utiliser Jekyll avec votre projet. J'ai expliqué comment configurer le fichier de configuration et la structure du projet. J'ai également parlé de la façon dont vous pouvez créer et servir vos pages. Si vous voulez tout voir mis ensemble, alors vous pouvez jeter un oeil à cet exemple de projet.
Dans le prochain article, je parlerai de la façon de servir vos pages sur GitHub Pages et de les distribuer dans votre thème ou plugin WordPress..
Accentsconagua