Explorer le contenu par défaut de Jekyll

introduction

Jekyll est un générateur de sites statiques qui offre certains des avantages d’un système de gestion de contenu (CMS) tout en évitant les problèmes de performances et de sécurité engendrés par ces sites. Il est «compatible avec les blogs» avec des fonctionnalités spéciales pour gérer le contenu organisé par date. Jekyll convient parfaitement aux personnes qui ont besoin de travailler hors ligne, qui préfèrent utiliser un éditeur léger au lieu de formulaires Web pour gérer le contenu et qui souhaitent utiliser le contrôle de version pour suivre les modifications apportées à leur site Web.

Dans la https://www.digitalocean.com/community/tutorials/how-to-set-up-a-Jekyll-development-site-on-ubuntu-16-04 (première partie) de cette série, nous avons installé Jekyll. et ses dépendances sur un serveur Ubuntu 16.04, ont créé un site de développement dans notre répertoire personnel et assuré que le trafic sur le site serait autorisé par le pare-feu.

Dans ce didacticiel, nous utiliserons le contenu généré automatiquement du guide précédent pour explorer la manière dont Jekyll transforme les fichiers source en contenu statique, facilitant ainsi la création et la maintenance du contenu.

Conditions préalables

Pour suivre ce didacticiel, vous devrez compléter le guide précédent, * https: //www.digitalocean.com/community/tutorials/how-to-set-up-a-jekyll-development-site-on-ubuntu-16. -04 [Comment configurer un site de développement Jekyll sur Ubuntu 16.04]. * Nous nous appuyons sur les travaux de ce didacticiel et, sans les compléter, les exemples ne correspondront pas.

Lorsque vous avez terminé la partie 1, vous êtes prêt à commencer.

La page d’accueil

Commençons notre exploration sur la page d’accueil, composée de quatre fichiers sources différents. Nous allons parcourir chacun de ces fichiers individuellement pour voir comment ils fonctionnent ensemble pour produire la page d’accueil statique.

Si vous avez quitté le serveur Web de développement après avoir terminé le premier tutoriel, redémarrez-le maintenant:

cd ~/www
jekyll serve --host=

Ensuite, visitez votre site dans un navigateur Web. La capture d’écran de la page d’accueil ci-dessous a été modifiée pour mettre en évidence la configuration et les sources d’informations.

image: http: //assets.digitalocean.com/articles/jekyll-1604/homepage-labeled.png [Capture d’écran de la page d’accueil de Jekyll avec un contenu étiqueté par le fichier source]

Paramètres de configuration: _config.yml

Une grande partie de la puissance de Jekyll provient de la possibilité de configurer des informations qui seront répétées à de nombreux endroits sur le site Web statique dans un seul fichier source, + _config.yml +

La valeur par défaut + _config.yml + créée en exécutant + jekyll new + contient cinq paramètres visibles sur la page d’accueil:

  • title: * Votre titre génial + * email: * [email protected] + * description: * Rédigez une description géniale de votre nouveau site ici… + * twitter_username: * jekyll + * github_username: * jekyllrb

image: http: //assets.digitalocean.com/articles/jekyll-1604/config.png [Capture d’écran avec le contenu fourni par le fichier _confg.yml mis en surbrillance]

Ces informations sont automatiquement incluses dans toutes les autres pages et publications que nous créons. Lorsque nous devons mettre à jour l’un de ces paramètres, nous pouvons modifier ce fichier et celui-ci sera mis à jour partout. Pour regarder cela en action, nous allons changer ces valeurs.

Ouvrez le fichier dans un nouveau terminal:

nano ~/www/_config.yml

Nous allons modifier les paramètres avec les valeurs ci-dessous:

title:
email:
description: >

github_username:
twitter_username:

Nous laisserons les + url et` + baseurl` seuls pendant notre développement, et apporterons les ajustements nécessaires au moment du déploiement de notre site.

Pour voir les modifications apportées dans le fichier de configuration, nous devons arrêter le serveur Web avec + CTRL-C +, puis le redémarrer:

jekyll serve --host=

Lorsque vous avez terminé, enregistrez et quittez votre éditeur. Rechargez ensuite la page dans votre navigateur Web. Selon les paramètres de cache local de votre navigateur Web, vous devrez peut-être appuyer sur Maj + Recharger pour voir les modifications, qui devraient apparaître dans les deux régions mises en évidence ci-dessous:

image: http: //assets.digitalocean.com/articles/jekyll-1604/config-changes.png [Capture d’écran avec les modifications apportées dans le fichier _confg.yml en surbrillance]

De nombreuses autres personnalisations peuvent être apportées dans le fichier + _config.yml +, mais pour l’instant, nous allons passer au fichier source suivant et constater que les modifications apportées sont visibles sur le reste du site.

Pages: about.md

Suivez le lien + à propos + dans le coin supérieur droit. Les modifications apportées au fichier de configuration sont visibles ici, au-dessus et en dessous du contenu principal de la page À propos de.

image: http: //assets.digitalocean.com/articles/jekyll-1604/about.png [Capture d’écran avec le contenu about.md mis en surbrillance]

Ce contenu central, ainsi que le texte du lien dans l’en-tête, est stocké dans le fichier + about.md + qui contient quatre types de contenu:

*1. Jekyll Front Matter * + Le bloc situé en haut du fichier + environ.md + commençant et se terminant par trois tirets est appelé Front Matter de Jekyll. Ce doit être la première chose dans le fichier, et quand il est présent, il signale à Jekyll que le fichier doit être analysé. Il inclut généralement un YAML valide entre les lignes pour tirer parti des variables prédéfinies, mais il peut également être vide. Un bloc Front Matter vierge est parfois utile pour un fichier CSS ou un autre endroit où vous n’avez pas besoin de définir de valeur, mais vous souhaitez accéder à des variables.

La page "À propos de" définit trois valeurs dans sa matière principale:

  ---
  layout: page
  title: About
  permalink: /about/
  ---
  • _Layout: _ * + Les dispositions éliminent les contenus répétitifs tels que les en-têtes, les pieds de page et les menus pour faciliter la maintenance des sites. Jekyll est livré avec trois dispositions: + default,` + page` et + post. Chacun a des caractéristiques spéciales. Dans ce cas, un lien de menu vers la valeur du titre, «À propos de», apparaît dans la navigation de l’en-tête car la présentation est définie sur «page».

  • _Title: _ * + En plus d’être utilisé comme texte de lien dans la navigation d’en-tête, le titre est également utilisé comme titre de page visible, mis en forme avec les balises Heading 1, et comme + <title> + de la page, qui est le texte qui apparaît dans la barre du navigateur et lorsque la page est marquée par un signet.

  • _Permalink: _ * + Jekyll génère automatiquement des répertoires et des fichiers HTML à partir de ces fichiers source qui déterminent l’URL d’une page. Le lien permanent vous permet de remplacer le comportement par défaut. Ici, l’URL de la page est + http: //: 4000 / about / + plutôt que + http: //: 4000 / about.html +.

*2. Texte visible * + Le contenu de la page commence après le premier sujet. Le texte ici apparaît sur la page, par exemple «Ceci est la base de Jekyll 3. thème."

*3. Markdown * + Markdown fait partie du contenu de la page principale et contrôle le format du contenu. Il sera analysé en HTML pour le site statique. Markdown préfère souvent le rédacteur de contenu au HTML, car il est conçu pour être plus facile à lire et à écrire.

*4. Directives de modèle Liquid * + Jekyll utilise Liquid comme moteur de modèle pour inclure des éléments dynamiques. Les directives Liquid apparaissent entre des accolades telles que + {% include icon-github.html username =" jekyll "%} +.

Modifions cette page pour voir comment le site est affecté.

Changer le titre

Nous allons faire un petit changement et appeler la page «À propos de moi» au lieu de «À propos de»:

nano ~/www/about.md

~ / www / about.md

---
. . .
title: "About "
. . .
---

Lorsque vous avez terminé, enregistrez et quittez le fichier.

Le changement apparaîtra à trois endroits et le lien de menu sera mis à jour sur toutes les pages du site: + image: http: //assets.digitalocean.com/articles/jekyll-1604/about-me.png [Capture d’écran avec le sujet .md avec les changements de titre mis en évidence]

Ajouter une nouvelle page

Nous ajouterons ensuite une page «Contact» sur le site et utiliserons un peu de démarquage pour inclure une image.

Nous allons commencer par créer un répertoire + assets + pour contenir notre image:

mkdir ~/www/assets

Ensuite, nous transférerons l’image sur votre machine en utilisant + wget. L’indicateur + -O + le dirigera vers le répertoire que nous avons créé. Le drapeau exige que nous spécifions également le nom du fichier, nous allons donc:

wget -O ~/www/assets/postcard.jpg http://assets.digitalocean.com/articles/jekyll-1604/postcard.jpg

Une fois l’image localisée en place, nous créerons la nouvelle page:

nano ~/www/contact.md

~ / www / contact.md

---
layout: page
title: "Send me a postcard!"
---

DigitalOcean\\
Attn: Sammy Shark\\
101 Avenue of the Americas\\
New York, NY 10013

![A postcard](/assets/postcard.jpg)

Examinons de plus près le démarquage. Tout d’abord, la double barre oblique «+ \\ » à la fin de chaque ligne force le retour sans ajouter d’espace supplémentaire. Deuxièmement, l'image est affichée avec cette réduction `! [] () +`. Le point d’exclamation indique que le lien qui suit est une image. Les crochets contiennent le texte de remplacement à utiliser si les images ne sont pas en cours de chargement ou si le visiteur utilise un lecteur d’écran. Les parenthèses contiennent le lien vers le fichier image. Pour en savoir plus sur le style de démarquage par défaut de Jekyll, consultez le site Web kramdown.

Enregistrez et quittez le fichier, puis rechargez la page. Le nouveau lien apparaîtra, classé alphabétiquement en fonction du nom du fichier.

Avec les nouveaux fichiers en place, le haut de notre structure de fichiers ressemble à ceci:

├── about.md


├── _config.yml

La page Web actuelle ressemble à ceci:

image: http: //assets.digitalocean.com/articles/jekyll-1604/contact.png [Capture d’écran de la nouvelle page de contact]

Cliquez sur le titre du site pour revenir à la page d’accueil, où vous devriez trouver le nouveau lien inclus dans la navigation de l’en-tête.

Articles: _posts / -welcome-to-jekyll.markdown

Suivez le lien «Welcome to Jekyll» pour jeter un coup d’œil à l’exemple de publication de blog fourni.

image: http: //assets.digitalocean.com/articles/jekyll-1604/post1.png [Capture d’écran du message Welcome to Jekyll avec la zone de contenu principale en surbrillance]

Le répertoire + posts + contient des fichiers spécialement nommés, au format + AAAA-MM-JJ-Mots-en-Titre +. Si votre message n’est pas nommé dans ce format, il ne sera pas analysé. Si le nom du fichier a une date définie dans le futur, la page ne sera pas analysée pour le site statique. Nommer le fichier avec une date future _does