Dans cet article, vous d\u00e9couvrirez l’un des SSG les plus populaires, Jekyll, vous apprendrez comment il fonctionne et comment vous pouvez cr\u00e9er un site web statique avec lui.<\/p>\n
Voici une d\u00e9monstration en direct du site de blog<\/a> que vous allez cr\u00e9er avec Jekyll.<\/p>\n Vous pouvez acc\u00e9der au d\u00e9p\u00f4t GitHub du projet<\/a> si vous souhaitez y jeter un coup d’\u0153il plus approfondi.<\/p>\n Jekyll est un SSG open source gratuit qui s’appuie sur le langage de programmation Ruby<\/a>. Vous n’avez pas besoin de comprendre le fonctionnement de Ruby pour utiliser Jekyll ; il vous suffit d’avoir install\u00e9 Ruby sur votre machine.<\/p>\n Jekyll peut \u00eatre utilis\u00e9 pour cr\u00e9er diff\u00e9rents types de sites statiques tels qu’un blog personnel, un site de portfolio ou un site de documentation sans avoir besoin d’une base de donn\u00e9es ou d’un syst\u00e8me de gestion de contenu comme WordPress<\/a>.<\/p>\n Voici ce qui distingue Jekyll des autres SSG :<\/p>\n Vous devez d’abord installer Ruby sur votre machine avant de proc\u00e9der \u00e0 l’installation de Jekyll, comme indiqu\u00e9 dans la documentation de Jekyll<\/a>.<\/p>\n Par d\u00e9faut, Ruby est pr\u00e9install\u00e9 avec macOS, mais il n’est pas recommand\u00e9 d’utiliser cette version de Ruby pour installer Jekyll car elle est ancienne. Par exemple, sur Ventura, le dernier syst\u00e8me d’exploitation d’Apple, la version de Ruby pr\u00e9install\u00e9e est la 2.6.10, dont la derni\u00e8re version est la 3.1.3 (au moment de la r\u00e9daction de cet article).<\/p>\n Pour r\u00e9soudre ce probl\u00e8me, vous devez installer Ruby correctement \u00e0 l’aide d’un gestionnaire de versions tel que chruby<\/a>. Vous devez d’abord installer Homebrew<\/a> sur votre Mac en utilisant la commande ci-dessous dans votre terminal :<\/p>\n Une fois l’installation r\u00e9ussie, quittez et red\u00e9marrez Terminal, puis v\u00e9rifiez si Homebrew est pr\u00eat \u00e0 fonctionner en ex\u00e9cutant la commande suivante :<\/p>\n Si vous obtenez \u00ab Your system is ready to brew \u00bb<\/strong>, vous pouvez maintenant passer \u00e0 l’installation de Vous pouvez maintenant installer la derni\u00e8re version de ruby qui est la 3.1.3 en utilisant le paquet Cela prendra quelques minutes. Une fois l’installation r\u00e9ussie, configurez votre shell pour qu’il utilise automatiquement Vous pouvez maintenant quitter et relancer votre terminal, puis v\u00e9rifier que tout fonctionne en lan\u00e7ant cette commande :<\/p>\n Vous devriez voir appara\u00eetre ruby 3.1.3<\/strong>.<\/p>\n Vous avez maintenant la derni\u00e8re version de Ruby install\u00e9e sur votre machine. Vous pouvez maintenant proc\u00e9der \u00e0 l’installation des derni\u00e8res gemmes Jekyll et bundler :<\/p>\n Pour installer Ruby et Jekyll sur une machine Windows, vous devez utiliser RubyInstaller<\/a>. Pour cela, t\u00e9l\u00e9chargez et installez une version de Ruby+Devkit<\/strong> \u00e0 partir de RubyInstaller Downloads<\/a> et utilisez les options d’installation par d\u00e9faut.<\/p>\n Lors de la derni\u00e8re \u00e9tape de l’assistant d’installation, ex\u00e9cutez l’\u00e9tape Dans les options, choisissez MSYS2 et la cha\u00eene d’outils de d\u00e9veloppement MINGW. Ouvrez une nouvelle fen\u00eatre d’invite de commande et installez Jekyll et Bundler \u00e0 l’aide de la commande ci-dessous :<\/p>\n Pour v\u00e9rifier que Jekyll est correctement install\u00e9 sur votre machine, ouvrez votre terminal et ex\u00e9cutez la commande suivante :<\/p>\n Si vous voyez le num\u00e9ro de version, cela signifie que Jekyll est install\u00e9 et fonctionne correctement sur votre syst\u00e8me. Vous \u00eates maintenant pr\u00eat \u00e0 utiliser Jekyll !<\/p>\n Avant de commencer \u00e0 cr\u00e9er et \u00e0 personnaliser un site statique avec Jekyll, il est bon de se familiariser avec ses diff\u00e9rentes commandes CLI et les r\u00e9glages de son fichier de configuration.<\/p>\n Voici quelques-unes des commandes CLI les plus courantes de Jekyll. Vous n’avez pas besoin de les m\u00e9moriser, mais sachez simplement qu’elles existent, et n’h\u00e9sitez pas \u00e0 v\u00e9rifier ce que fait chacune d’entre elles lorsque vous remarquerez leur utilisation plus loin dans cet article.<\/p>\n Vous pouvez \u00e9galement ajouter certaines options \u00e0 ces commandes. Vous trouverez une liste compl\u00e8te des commandes et options Jekyll dans la documentation Jekyll<\/a>.<\/p>\n Le fichier de configuration Jekyll est un fichier YAML nomm\u00e9 _config.yml<\/strong> qui contient des param\u00e8tres et des options pour votre site Jekyll. Il est utilis\u00e9 pour configurer divers aspects de votre site, y compris le titre du site, la description, l’URL et d’autres param\u00e8tres.<\/p>\n Voici quelques-unes des options de configuration les plus couramment utilis\u00e9es :<\/p>\n Vous pouvez \u00e9galement cr\u00e9er des variables personnalis\u00e9es dans votre fichier de configuration et les utiliser dans les mod\u00e8les, les mises en page et les inclusions de votre site. Par exemple, vous pouvez cr\u00e9er une variable appel\u00e9e Pour modifier votre fichier de configuration Jekyll, ouvrez le fichier _config.yml<\/strong> dans le r\u00e9pertoire de votre projet Jekyll dans un \u00e9diteur de texte et apportez des modifications.<\/p>\n Remarque :<\/strong> toute modification apport\u00e9e au fichier de configuration prendra effet la prochaine fois que vous g\u00e9n\u00e9rerez votre site \u00e0 l’aide de Maintenant que Jekyll est install\u00e9 sur votre machine, il est possible de cr\u00e9er un site statique Jekyll avec une commande en quelques secondes. Ouvrez votre terminal et ex\u00e9cutez cette commande :<\/p>\n Veillez \u00e0 remplacer \u00ab joels-blog \u00bb par le nom de votre site pr\u00e9f\u00e9r\u00e9.<\/p>\n Ensuite, naviguez jusqu’au dossier du site web. Vous remarquerez une structure de site Jekyll de base qui comprend des r\u00e9pertoires et des fichiers comme ceux-ci :<\/p>\n Voici \u00e0 quoi sert chacun de ces r\u00e9pertoires et fichiers :<\/p>\n Mais il existe d’autres fichiers\/dossiers qui peuvent \u00eatre utilis\u00e9s pour personnaliser votre site Jekyll. Ces dossiers incluent :<\/p>\n Cette structure de fichiers constitue une base solide pour un projet Jekyll, mais vous pouvez la modifier si n\u00e9cessaire pour r\u00e9pondre aux besoins sp\u00e9cifiques de votre projet.<\/p>\n Au lieu de d\u00e9marrer votre projet \u00e0 l’aide de l’interface de programmation Jekyll, vous pouvez cr\u00e9er un d\u00e9p\u00f4t Git en utilisant le mod\u00e8le Jekyll \u00ab Hello World \u00bb <\/a>\u00a0de Kinsta sur GitHub. S\u00e9lectionnez Utiliser ce mod\u00e8le<\/strong> > Cr\u00e9er un nouveau d\u00e9p\u00f4t<\/strong> pour copier le code de d\u00e9marrage dans un nouveau d\u00e9p\u00f4t au sein de votre propre compte GitHub.<\/p>\n Vous disposez maintenant d’un site Jekyll, mais comment le pr\u00e9visualiser pour voir \u00e0 quoi il ressemble avant de commencer \u00e0 le personnaliser pour qu’il r\u00e9ponde \u00e0 vos besoins ? Ouvrez votre terminal et placez-vous dans le r\u00e9pertoire de votre projet, puis ex\u00e9cutez la commande suivante :<\/p>\n Cette commande g\u00e9n\u00e8re un dossier _site<\/strong> qui contient tous les fichiers statiques g\u00e9n\u00e9r\u00e9s par votre projet. Elle d\u00e9marrera \u00e9galement le serveur Jekyll, et vous pourrez pr\u00e9visualiser votre site via http:\/\/localhost:4000<\/strong>.<\/p>\n Si vous visitez l’URL dans votre navigateur web, vous devriez voir votre site Jekyll avec le th\u00e8me minima :<\/p>\n Lorsque vous cr\u00e9ez un site avec Jekyll et que vous utilisez un th\u00e8me, vous pouvez personnaliser le site en fonction de vos besoins. Par exemple, vous pouvez ajouter de nouvelles pages, modifier la mise en page d’une page ou ajuster l’affichage de certains \u00e9l\u00e9ments. Tout cela est possible avec Jekyll.<\/p>\n Lorsque vous ouvrez chaque page ou article de blog de votre dossier de projet, vous remarquerez un bloc d’informations situ\u00e9 entre trois tirets (—) en haut de la page. C’est ce que l’on appelle le front matter<\/strong>.<\/p>\n Il s’agit d’un format de m\u00e9tadonn\u00e9es utilis\u00e9 dans Jekyll pour stocker des informations sur une page ou un article – il peut \u00eatre \u00e9crit en YAML ou en JSON.<\/p>\n Dans l’exemple ci-dessus, le front matter comprend des variables telles que le titre, la description et la date de l’article. Ces variables peuvent \u00eatre utilis\u00e9es dans la mise en page ou le contenu de la page ou du billet.<\/p>\n Jekyll analyse le contenu de la page et l’utilise pour g\u00e9n\u00e9rer le code HTML de votre site. Vous pouvez utiliser le front matter pour sp\u00e9cifier diverses options, telles que la mise en page, le permalien, le statut de publication, etc.<\/p>\n Vous pouvez \u00e9galement configurer une pr\u00e9sentation par d\u00e9faut, afin de ne pas avoir \u00e0 d\u00e9finir la m\u00eame pr\u00e9sentation pour des fichiers similaires. Par exemple, si chaque article de blog utilise le m\u00eame nom d’auteur et la m\u00eame mise en page. Vous pouvez d\u00e9finir un front matter personnalis\u00e9 dans votre fichier _config.yml<\/strong> pour servir tous vos articles de blog.<\/p>\n La fa\u00e7on dont il est structur\u00e9 est un peu complexe, mais voici \u00e0 quoi il ressemblera. Collez ceci en dessous de la derni\u00e8re configuration dans votre fichier _config.yml<\/strong>\u00a0:<\/p>\n Lorsque vous lancez la commande Note :<\/strong> Lorsque vous ne d\u00e9finissez pas de chemin d’acc\u00e8s, tous les fichiers utiliseront les valeurs d\u00e9finies pour la page d’accueil.<\/p>\n Lorsque vous cr\u00e9ez un fichier dans le r\u00e9pertoire racine de votre projet, il est consid\u00e9r\u00e9 comme une page. Le nom que vous donnez au fichier est le plus souvent utilis\u00e9 dans l’URL, c’est pourquoi vous donnerez \u00e0 chaque fichier de page un nom qui r\u00e9sonne bien.<\/p>\n Par exemple, si vous souhaitez cr\u00e9er une page dont l’URL est https:\/\/example.com\/about<\/strong>, cr\u00e9ez un fichier nomm\u00e9 about.html <\/strong>ou about.md<\/strong>. L’extension du fichier d\u00e9termine le langage de balisage \u00e0 utiliser pour le contenu de la page (HTML ou Markdown).<\/p>\n Une fois que vous avez cr\u00e9\u00e9 un fichier, ajoutez le texte de pr\u00e9sentation et le contenu appropri\u00e9s. Enregistrez le fichier et actualisez votre site Jekyll dans le navigateur. La nouvelle page devrait maintenant \u00eatre accessible \u00e0 l’URL correspondant au nom du fichier.<\/p>\n Vous pouvez utiliser les mises en page pour d\u00e9finir la structure et le design des pages et des articles de votre site. En g\u00e9n\u00e9ral, cela se fait principalement \u00e0 l’aide de code HTML. Vous pouvez inclure un en-t\u00eate, un pied de page, des m\u00e9ta-informations dans les m\u00e9tadonn\u00e9es de la page.<\/p>\n La premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er un dossier _layouts<\/strong> dans le r\u00e9pertoire racine de votre projet. Ensuite, cr\u00e9ez un fichier pour chaque mise en page – le fichier doit avoir un nom descriptif qui refl\u00e8te l’objectif de la mise en page. Par exemple, vous pouvez cr\u00e9er un fichier nomm\u00e9 page.html <\/strong>pour d\u00e9finir la mise en page de toutes les pages de votre site.<\/p>\n Il est pr\u00e9f\u00e9rable de d\u00e9finir la structure g\u00e9n\u00e9rale de vos mises en page en HTML ou dans un autre langage de balisage.<\/p>\n Vous pouvez inclure des espaces r\u00e9serv\u00e9s pour tout contenu dynamique qui sera ins\u00e9r\u00e9 dans la mise en page, comme le titre de la page, le contenu et les m\u00e9tadonn\u00e9es. Par exemple, vous pouvez cr\u00e9er une mise en page de base comprenant un en-t\u00eate, un pied de page et une zone de contenu :<\/p>\n Dans cet exemple, les espaces r\u00e9serv\u00e9s \u00c0 ce stade, toute page ou tout article qui utilise page comme valeur de mise en page dans son contenu principal aura cette mise en page. Vous pouvez cr\u00e9er plusieurs mises en page dans le dossier _layouts<\/strong> et les styliser comme vous le souhaitez. Vous pouvez \u00e9galement remplacer la mise en page d’un th\u00e8me en d\u00e9finissant une mise en page portant un nom similaire.<\/p>\n Le dossier _includes<\/strong> contient des extraits de code r\u00e9utilisables que vous pouvez inclure dans diff\u00e9rentes parties de votre site web. Par exemple, vous pouvez cr\u00e9er un fichier navbar.html<\/strong> dans votre dossier includes et l’ajouter \u00e0 votre fichier de mise en page page .html<\/strong> \u00e0 l’aide de la balise Au moment de la compilation, Jekyll remplacera la balise par le contenu de navbar.html<\/strong>.<\/p>\n Le dossier _includes<\/strong> peut contenir n’importe quel type de fichier, comme des fichiers HTML, Markdown ou Liquid. L’objectif principal est de conserver votre code DRY (Don’t Repeat Yourself) en vous permettant de r\u00e9utiliser le code sur l’ensemble de votre site.<\/p>\n Vous pourriez vouloir cr\u00e9er une page de blog d\u00e9di\u00e9e pour contenir tous vos articles de blog, ce qui signifie que vous voudriez r\u00e9cup\u00e9rer tous les articles sur votre site et les parcourir en boucle. Avec Jekyll, c’est facile \u00e0 r\u00e9aliser en utilisant la balise Tous les articles d’un site Jekyll sont stock\u00e9s dans la variable Vous pouvez \u00e9galement utiliser d’autres variables Liquid pour afficher d’autres informations sur chaque article, telles que la date ou l’auteur de l’article :<\/p>\n Notez que dans l’exemple ci-dessus, le filtre Liquid date formate la date de chaque article dans un format plus lisible pour l’homme.<\/p>\n Vous avez maintenant une id\u00e9e de ce qu’il est possible de faire pour le formatage de base de votre site Jekyll. Mais vous n’aurez peut-\u00eatre pas besoin d’utiliser tous ces \u00e9l\u00e9ments pour cr\u00e9er un site Jekyll \u00e0 partir de z\u00e9ro, car vous pouvez toujours rechercher un th\u00e8me qui r\u00e9pond \u00e0 vos besoins et l’ajouter \u00e0 votre site Jekyll.<\/p>\n Il existe plusieurs th\u00e8mes faciles \u00e0 ajouter, mais la bonne chose est que pour chaque th\u00e8me, il y a toujours des informations claires sur la fa\u00e7on de les installer dans le fichier ReadMe sur GitHub. Vous pouvez d\u00e9cider de cloner le th\u00e8me, ou s’il s’agit d’un th\u00e8me bas\u00e9 sur une gemme<\/a>, le processus est plus facile.<\/p>\n Pour cet article, vous installerez un th\u00e8me de blog<\/a> et le personnaliserez pour avoir un site de blog d\u00e9ploy\u00e9 sur Kinsta<\/a>. Il s’agit d’un th\u00e8me bas\u00e9 sur des gemmes et vous pouvez acc\u00e9der \u00e0 son code source<\/a> et aux instructions sur GitHub<\/a>.<\/p>\n Pour ajouter un th\u00e8me bas\u00e9 sur une gemme, ouvrez le fichier Gemfile de votre site et ajoutez la gemme pour le th\u00e8me que vous voulez utiliser. Le th\u00e8me que nous allons utiliser est le jekyll-theme-clean-blog<\/strong>. Vous pouvez remplacer le th\u00e8me minima<\/strong> par d\u00e9faut dans le fichier Gemfile :<\/p>\n Ex\u00e9cutez la commande Dans le fichier _config.yml<\/strong> de votre site, ajoutez la ligne suivante pour sp\u00e9cifier le th\u00e8me que vous souhaitez utiliser :<\/p>\n \u00c0 ce stade, votre th\u00e8me est pr\u00eat \u00e0 \u00eatre utilis\u00e9.<\/p>\n Vous devrez supprimer toutes les mises en page du r\u00e9pertoire _layouts<\/strong> pour \u00e9viter qu’elles ne remplacent la mise en page du th\u00e8me.<\/p>\n Vous pouvez ensuite trouver les noms des dispositions de vos fichiers dans la documentation du th\u00e8me<\/a>. Par exemple, si vous utilisez le th\u00e8me jekyll-theme-clean-blog<\/strong>, le nom de la mise en page du fichier index.html<\/strong> est home<\/strong>, celui des autres pages est page<\/strong>, et celui de tous les articles est post<\/strong>.<\/p>\n Enfin, ex\u00e9cutez Voil\u00e0, c’est fait ! Votre site Jekyll devrait maintenant utiliser le nouveau th\u00e8me bas\u00e9 sur la gemme que vous avez ajout\u00e9. Vous pouvez personnaliser davantage le th\u00e8me en modifiant sa pr\u00e9sentation dans les r\u00e9pertoires _layouts<\/strong> de votre site.<\/p>\n Vous avez maintenant ajout\u00e9 votre th\u00e8me \u00e0 votre site. La prochaine \u00e9tape consiste \u00e0 personnaliser le site pour qu’il r\u00e9ponde \u00e0 vos besoins et qu’il fonctionne comme pr\u00e9vu. Par exemple, les images de chaque page et de chaque article ne sont pas affich\u00e9es, mais un arri\u00e8re-plan gris est affich\u00e9.<\/p>\n Vous pouvez y rem\u00e9dier en ajoutant une option\u00ab front matter \u00bb \u00e0 chaque page et \u00e0 chaque article, en sp\u00e9cifiant le chemin d’acc\u00e8s \u00e0 l’image que vous souhaitez utiliser. Dans Jekyll, les \u00e9l\u00e9ments tels que les images sont stock\u00e9s dans le dossier assets<\/strong>. Dans ce dossier, vous pouvez d\u00e9cider de cr\u00e9er des sous-dossiers pour organiser vos images.<\/p>\n Vous pouvez maintenant ajouter une option d’arri\u00e8re-plan au bloc de la page d’accueil et un chemin vers son image. Par exemple, sur la page \u00ab \u00c0 propos \u00bb, il s’agit de la premi\u00e8re page :<\/p>\n Faites-le pour toutes les pages et tous les articles et votre page ressemblera \u00e0 ceci :<\/p>\n Vous pouvez \u00e9galement personnaliser les options de la barre de navigation. Par exemple, si vous n’avez pas besoin d’une page de contact, vous devez supprimer son lien dans les options de la barre de navigation. Vous pouvez le faire en \u00e9tudiant le code source du th\u00e8me<\/a>, en remarquant le fichier responsable des liens de la barre de navigation et en reproduisant ce fichier exactement dans votre projet, en supprimant l’option dont vous n’avez pas besoin.<\/p>\n Les liens de navigation se trouvent dans le fichier navbar.html du dossier _includes<\/a>. Vous pouvez cr\u00e9er ce fichier, coller le code de votre code source et supprimer l’option de contact ou ajouter toute nouvelle option que vous souhaitez.<\/p>\n![\"Site](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/joels-blog-jekyll-site.jpg\")
Qu’est-ce que Jekyll ?<\/h2>\n
\n
Comment installer Jekyll<\/h2>\n
Comment installer Jekyll sur macOS<\/h3>\n
\/bin\/bash -c \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/HEAD\/install.sh)\"<\/code><\/pre>\nbrew doctor<\/code><\/pre>\nchruby<\/code> et ruby-install<\/strong> avec la commande ci-dessous :<\/p>\nbrew install chruby ruby-install<\/code><\/pre>\nruby-install<\/code> que vous venez d’installer :<\/p>\nruby-install 3.1.3<\/code><\/pre>\nchruby<\/code> avec la commande ci-dessous :<\/p>\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/chruby.sh\" >> ~\/.zshrc\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/auto.sh\" >> ~\/.zshrc\necho \"chruby ruby-3.1.3\" >> ~\/.zshrc<\/code><\/pre>\nruby -v<\/code><\/pre>\ngem install jekyll bundler<\/code><\/pre>\nComment installer Jekyll sous Windows<\/h3>\n
ridk install<\/code> – qui est utilis\u00e9e pour installer les gems. Pour en savoir plus, consultez la documentation de RubyInstaller<\/a>.<\/p>\ngem install jekyll bundler<\/code><\/pre>\nComment v\u00e9rifier que Jekyll est correctement install\u00e9 ?<\/h3>\n
jekyll -v<\/code><\/pre>\nCommandes et configuration de Jekyll<\/h2>\n
Commandes CLI de Jekyll<\/h3>\n
\n
jekyll build<\/code>: G\u00e9n\u00e8re le site statique dans le r\u00e9pertoire _site<\/strong>.<\/li>\njekyll serve<\/code>: Construit le site et d\u00e9marre un serveur web sur votre machine locale, ce qui vous permet de pr\u00e9visualiser le site dans votre navigateur \u00e0 l’adresse http:\/\/localhost:4000.<\/li>\njekyll new [site name]<\/code>: Cr\u00e9e un nouveau site Jekyll dans un nouveau r\u00e9pertoire avec le nom de site sp\u00e9cifi\u00e9.<\/li>\njekyll doctor<\/code>: Affiche tout probl\u00e8me de configuration ou de d\u00e9pendance \u00e9ventuel.<\/li>\njekyll clean<\/code>: Supprime le r\u00e9pertoire _site<\/strong>, dans lequel sont stock\u00e9s les fichiers du site g\u00e9n\u00e9r\u00e9.<\/li>\njekyll help<\/code>: Affiche la documentation d’aide pour Jekyll.<\/li>\njekyll serve --draft<\/code>: G\u00e9n\u00e8re et sert votre site Jekyll, y compris tous les messages qui se trouvent dans le r\u00e9pertoire _drafts<\/strong>.<\/li>\n<\/ul>\nFichier de configuration de Jekyll<\/h3>\n
\n
minima<\/code>. Vous pouvez utiliser n’importe quel autre th\u00e8me<\/a> en d\u00e9finissant son nom et en appliquant d’autres param\u00e8tres que nous verrons plus loin dans cet article.<\/li>\n<\/ul>\nauthor_name<\/code> et l’utiliser dans vos mod\u00e8les comme ceci : {{ site.author_name }}<\/code>.<\/p>\njekyll build<\/code> ou jekyll serve<\/code>.<\/p>\nComment cr\u00e9er un site statique avec Jekyll ?<\/h2>\n
jekyll new joels-blog<\/code><\/pre>\n![\"Site](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-jekyll-site.jpg\")
\u251c\u2500\u2500 _config.yml\n\u251c\u2500\u2500 _posts\n\u251c\u2500\u2500 Gemfile\n\u251c\u2500\u2500 Gemfile.lock\n\u251c\u2500\u2500 index.md\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n
\n
Option de d\u00e9marrage rapide : Utilisez notre mod\u00e8le GitHub<\/h3>\n
Comment pr\u00e9visualiser un site Jekyll<\/h2>\n
jekyll serve<\/code><\/pre>\n![\"Apparence](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/minima-jekyll-theme.jpg\")
Comment personnaliser un site Jekyll<\/h2>\n
Comment fonctionne le Front Matter dans Jekyll<\/h3>\n
---\ntitle: \"Welcome to Jekyll!\"\ndescription: \"Introduction to what Jekyll is about and how it works\"\ndate: 2023-03-07 16:54:37 +0100\n---<\/code><\/pre>\nComment configurer la page d’accueil par d\u00e9faut<\/h4>\n
defaults:\n -\n scope:\n path: \"posts\" # empty string means all files\n values:\n layout: \"post\"\n author: \"John Doe\"<\/code><\/pre>\njekyll serve<\/code>, vous remarquerez que m\u00eame si vous ne d\u00e9finissez pas la mise en page et l’auteur pour chaque article, vous y avez toujours acc\u00e8s dans vos fichiers.<\/p>\nCr\u00e9ation de pages dans Jekyll<\/h3>\n
![\"Premi\u00e8re](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-page.jpg\")
Cr\u00e9ation de mises en page dans Jekyll<\/h3>\n
<!DOCTYPE html>\n<html>\n <head>\n <title>{{ page.title }}<\/title>\n <\/head>\n <body>\n <header>\n \n <\/header>\n <main>{{ content }}<\/main>\n <footer>\n \n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n{{ page.title }}<\/code> et {{ content }}<\/code> seront remplac\u00e9s par le titre et le contenu r\u00e9els de la page en cours de rendu.<\/p>\nFonctionnement du dossier _includes dans Jekyll<\/h3>\n
{% include %}<\/code>.<\/p>\n<!DOCTYPE html>\n <html>\n <head>\n <title>{{ page.title }} <\/title>\n <\/head>\n <body>\n <header>{% include navbar.html %} <\/header>\n <main>{{ content }} <\/main>\n <footer>\n \n <\/footer>\n <\/body>\n <\/html><\/code><\/pre>\nParcourir les articles en boucle dans Jekyll<\/h3>\n
{% for %}<\/code>.<\/p>\nsite.posts<\/code>. Vous pouvez les parcourir en boucle et utiliser la variable Liquid {{ post.title }}<\/code> pour afficher le titre de chaque article de cette mani\u00e8re :<\/p>\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n{% endfor %}<\/code><\/pre>\n\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n <p>Published on {{ post.date | date: \"%B %-d, %Y\" }} by {{ post.author }}<\/p>\n{% endfor %}<\/code><\/pre>\nComment ajouter un th\u00e8me \u00e0 un site Jekyll ?<\/h2>\n
gem \"jekyll-theme-clean-blog\"<\/code><\/pre>\nbundle install<\/code> dans le r\u00e9pertoire de votre site pour installer la gemme du th\u00e8me et ses d\u00e9pendances.<\/p>\ntheme: jekyll-theme-clean-blog<\/code><\/pre>\njekyll serve<\/code> pour construire et servir votre site en utilisant le nouveau th\u00e8me.<\/p>\n![\"Site](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-blog-theme.jpg\")
Personnaliser un th\u00e8me Jekyll<\/h3>\n
![\"Dossier](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-assets.jpg\")
---\nlayout: page\ntitle: About\ndescription: This is the page description. \npermalink: \/about\/\nbackground: '\/assets\/images\/about-page.jpeg'\n---<\/code><\/pre>\n![\"L'image](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-page-customized.jpg\")
![\"Personnalisation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/customizing-navbar.jpg\")