Tutoriel Jekyll : Comment créer un site web statique

À l’ère du numérique, il est essentiel d’avoir un site web pour établir une présence en ligne, promouvoir votre marque et atteindre des clients potentiels. Cependant, la création d’un site web peut s’avérer une tâche ardue.

C’est là qu’interviennent les générateurs de sites statiques (Static Site Generators ou SSG), qui facilitent la création de beaux sites web à chargement rapide sans nécessiter de systèmes backend ou de bases de données complexes.

Dans cet article, vous découvrirez l’un des SSG les plus populaires, Jekyll, vous apprendrez comment il fonctionne et comment vous pouvez créer un site web statique avec lui.

Voici une démonstration en direct du site de blog que vous allez créer avec Jekyll.

Vous pouvez accéder au dépôt GitHub du projet si vous souhaitez y jeter un coup d’œil plus approfondi.

Qu’est-ce que Jekyll ?

Jekyll est un SSG open source gratuit qui s’appuie sur le langage de programmation Ruby. Vous n’avez pas besoin de comprendre le fonctionnement de Ruby pour utiliser Jekyll ; il vous suffit d’avoir installé Ruby sur votre machine.

Jekyll peut être utilisé pour créer différents 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ées ou d’un système de gestion de contenu comme WordPress.

Voici ce qui distingue Jekyll des autres SSG :

1. Facilité d’utilisation : Jekyll utilise des fichiers texte simples et la syntaxe markdown pour créer et gérer le contenu, ce qui signifie que vous n’avez pas besoin d’avoir des connaissances en HTML ou en CSS pour commencer.
2. Rapide et sûr : Jekyll n’utilise pas de base de données ni de script côté serveur, ce qui réduit les risques de vulnérabilité et d’attaque. Il génère des fichiers HTML statiques, ce qui rend votre site web incroyablement rapide et sûr.
3. Personnalisable : Jekyll est hautement personnalisable, ce qui vous permet d’utiliser des mises en page et des modèles, voire de créer des extensions pour étendre les fonctionnalités.
4. Facile à déployer : Jekyll génère des fichiers HTML statiques qui peuvent être déployés sur un serveur web ou chez un hébergeur sans nécessiter de système de gestion de contenu dynamique.
5. Soutenu par une large communauté : Jekyll dispose d’une large communauté d’utilisateurs et de développeurs, ce qui signifie que de nombreuses ressources sont disponibles si vous avez besoin d’aide ou si vous souhaitez étendre les fonctionnalités de votre site.

Comment installer Jekyll

Vous devez d’abord installer Ruby sur votre machine avant de procéder à l’installation de Jekyll, comme indiqué dans la documentation de Jekyll.

Comment installer Jekyll sur macOS

Par défaut, Ruby est préinstallé avec macOS, mais il n’est pas recommandé d’utiliser cette version de Ruby pour installer Jekyll car elle est ancienne. Par exemple, sur Ventura, le dernier système d’exploitation d’Apple, la version de Ruby préinstallée est la 2.6.10, dont la dernière version est la 3.1.3 (au moment de la rédaction de cet article).

Pour résoudre ce problème, vous devez installer Ruby correctement à l’aide d’un gestionnaire de versions tel que chruby. Vous devez d’abord installer Homebrew sur votre Mac en utilisant la commande ci-dessous dans votre terminal :

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Une fois l’installation réussie, quittez et redémarrez Terminal, puis vérifiez si Homebrew est prêt à fonctionner en exécutant la commande suivante :

brew doctor

Si vous obtenez « Your system is ready to brew », vous pouvez maintenant passer à l’installation de chruby et ruby-install avec la commande ci-dessous :

brew install chruby ruby-install

Vous pouvez maintenant installer la dernière version de ruby qui est la 3.1.3 en utilisant le paquet ruby-install que vous venez d’installer :

ruby-install 3.1.3

Cela prendra quelques minutes. Une fois l’installation réussie, configurez votre shell pour qu’il utilise automatiquement chruby avec la commande ci-dessous :

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

Vous pouvez maintenant quitter et relancer votre terminal, puis vérifier que tout fonctionne en lançant cette commande :

ruby -v

Vous devriez voir apparaître ruby 3.1.3.

Vous avez maintenant la dernière version de Ruby installée sur votre machine. Vous pouvez maintenant procéder à l’installation des dernières gemmes Jekyll et bundler :

gem install jekyll bundler

Comment installer Jekyll sous Windows

Pour installer Ruby et Jekyll sur une machine Windows, vous devez utiliser RubyInstaller. Pour cela, téléchargez et installez une version de Ruby+Devkit à partir de RubyInstaller Downloads et utilisez les options d’installation par défaut.

Lors de la dernière étape de l’assistant d’installation, exécutez l’étape ridk install – qui est utilisée pour installer les gems. Pour en savoir plus, consultez la documentation de RubyInstaller.

Dans les options, choisissez MSYS2 et la chaîne d’outils de développement MINGW. Ouvrez une nouvelle fenêtre d’invite de commande et installez Jekyll et Bundler à l’aide de la commande ci-dessous :

gem install jekyll bundler

Comment vérifier que Jekyll est correctement installé ?

Pour vérifier que Jekyll est correctement installé sur votre machine, ouvrez votre terminal et exécutez la commande suivante :

jekyll -v

Si vous voyez le numéro de version, cela signifie que Jekyll est installé et fonctionne correctement sur votre système. Vous êtes maintenant prêt à utiliser Jekyll !

Commandes et configuration de Jekyll

Avant de commencer à créer et à personnaliser un site statique avec Jekyll, il est bon de se familiariser avec ses différentes commandes CLI et les réglages de son fichier de configuration.

Commandes CLI de Jekyll

Voici quelques-unes des commandes CLI les plus courantes de Jekyll. Vous n’avez pas besoin de les mémoriser, mais sachez simplement qu’elles existent, et n’hésitez pas à vérifier ce que fait chacune d’entre elles lorsque vous remarquerez leur utilisation plus loin dans cet article.

• jekyll build: Génère le site statique dans le répertoire _site.
• jekyll serve: Construit le site et démarre un serveur web sur votre machine locale, ce qui vous permet de prévisualiser le site dans votre navigateur à l’adresse http://localhost:4000.
• jekyll new [site name]: Crée un nouveau site Jekyll dans un nouveau répertoire avec le nom de site spécifié.
• jekyll doctor: Affiche tout problème de configuration ou de dépendance éventuel.
• jekyll clean: Supprime le répertoire _site, dans lequel sont stockés les fichiers du site généré.
• jekyll help: Affiche la documentation d’aide pour Jekyll.
• jekyll serve --draft: Génère et sert votre site Jekyll, y compris tous les messages qui se trouvent dans le répertoire _drafts.

Vous pouvez également ajouter certaines options à ces commandes. Vous trouverez une liste complète des commandes et options Jekyll dans la documentation Jekyll.

Fichier de configuration de Jekyll

Le fichier de configuration Jekyll est un fichier YAML nommé _config.yml qui contient des paramètres et des options pour votre site Jekyll. Il est utilisé pour configurer divers aspects de votre site, y compris le titre du site, la description, l’URL et d’autres paramètres.

Voici quelques-unes des options de configuration les plus couramment utilisées :

• title : Le titre de votre site.
• description : Une courte description de votre site.
• url : L’URL de base de votre site.
• baseurl : Le sous-répertoire de votre site, s’il est hébergé dans un sous-répertoire d’un domaine.
• permalink : La structure URL de vos articles et pages.
• exclude : Une liste de fichiers ou de répertoires à exclure du processus de génération du site.
• include : Une liste de fichiers ou de répertoires à inclure dans le processus de génération du site.
• paginate : Le nombre d’articles à afficher par page lors de l’utilisation de la pagination.
• plugins : Une liste d’extensions Jekyll à charger.
• theme : Par défaut, il s’agit de minima. Vous pouvez utiliser n’importe quel autre thème en définissant son nom et en appliquant d’autres paramètres que nous verrons plus loin dans cet article.

Vous pouvez également créer des variables personnalisées dans votre fichier de configuration et les utiliser dans les modèles, les mises en page et les inclusions de votre site. Par exemple, vous pouvez créer une variable appelée author_name et l’utiliser dans vos modèles comme ceci : {{ site.author_name }}.

Pour modifier votre fichier de configuration Jekyll, ouvrez le fichier _config.yml dans le répertoire de votre projet Jekyll dans un éditeur de texte et apportez des modifications.

Remarque : toute modification apportée au fichier de configuration prendra effet la prochaine fois que vous générerez votre site à l’aide de jekyll build ou jekyll serve.

Comment créer un site statique avec Jekyll ?

Maintenant que Jekyll est installé sur votre machine, il est possible de créer un site statique Jekyll avec une commande en quelques secondes. Ouvrez votre terminal et exécutez cette commande :

jekyll new joels-blog

Veillez à remplacer « joels-blog » par le nom de votre site préféré.

Ensuite, naviguez jusqu’au dossier du site web. Vous remarquerez une structure de site Jekyll de base qui comprend des répertoires et des fichiers comme ceux-ci :

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

Voici à quoi sert chacun de ces répertoires et fichiers :

• _config.yml : Le fichier de configuration de Jekyll contenant les paramètres et options de votre site.
• _posts : Un répertoire qui contient le contenu de votre site (il peut s’agir d’articles de blog). Il peut s’agir de fichiers Markdown ou HTML avec une convention de nommage spécifique : YEAR-MONTH-DAY-title.MARKUP.
• Gemfile et Gemfile.lock : Bundler utilise ces fichiers pour gérer les gemmes Ruby sur lesquelles votre site s’appuie.
• index.md : La page d’accueil par défaut de votre site, générée à partir d’un fichier Markdown ou HTML.

Mais il existe d’autres fichiers/dossiers qui peuvent être utilisés pour personnaliser votre site Jekyll. Ces dossiers incluent :

• _includes : Un répertoire qui contient des extraits HTML réutilisables qui peuvent être inclus dans vos mises en page et vos pages. Comme la barre de navigation, le pied de page, etc.
• _layouts : Un répertoire qui contient des modèles de mise en page HTML qui définissent la structure de vos pages.
• assets : Un répertoire qui contient tous les fichiers utilisés par votre site, tels que les images et les fichiers CSS.
• _sass : Un répertoire contenant des fichiers Sass qui peuvent être utilisés pour générer des feuilles de style CSS pour votre site.

Cette structure de fichiers constitue une base solide pour un projet Jekyll, mais vous pouvez la modifier si nécessaire pour répondre aux besoins spécifiques de votre projet.

Option de démarrage rapide : Utilisez notre modèle GitHub

Au lieu de démarrer votre projet à l’aide de l’interface de programmation Jekyll, vous pouvez créer un dépôt Git en utilisant le modèle Jekyll « Hello World »  de Kinsta sur GitHub. Sélectionnez Utiliser ce modèle > Créer un nouveau dépôt pour copier le code de démarrage dans un nouveau dépôt au sein de votre propre compte GitHub.

Comment prévisualiser un site Jekyll

Vous disposez maintenant d’un site Jekyll, mais comment le prévisualiser pour voir à quoi il ressemble avant de commencer à le personnaliser pour qu’il réponde à vos besoins ? Ouvrez votre terminal et placez-vous dans le répertoire de votre projet, puis exécutez la commande suivante :

jekyll serve

Cette commande génère un dossier _site qui contient tous les fichiers statiques générés par votre projet. Elle démarrera également le serveur Jekyll, et vous pourrez prévisualiser votre site via http://localhost:4000.

Si vous visitez l’URL dans votre navigateur web, vous devriez voir votre site Jekyll avec le thème minima :

Comment personnaliser un site Jekyll

Lorsque vous créez un site avec Jekyll et que vous utilisez un thème, 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 éléments. Tout cela est possible avec Jekyll.

Comment fonctionne le Front Matter dans Jekyll

Lorsque vous ouvrez chaque page ou article de blog de votre dossier de projet, vous remarquerez un bloc d’informations situé entre trois tirets (—) en haut de la page. C’est ce que l’on appelle le front matter.

Il s’agit d’un format de métadonnées utilisé dans Jekyll pour stocker des informations sur une page ou un article – il peut être écrit en YAML ou en JSON.

---
title:  "Welcome to Jekyll!"
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

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 être utilisées dans la mise en page ou le contenu de la page ou du billet.

Jekyll analyse le contenu de la page et l’utilise pour générer le code HTML de votre site. Vous pouvez utiliser le front matter pour spécifier diverses options, telles que la mise en page, le permalien, le statut de publication, etc.

Comment configurer la page d’accueil par défaut

Vous pouvez également configurer une présentation par défaut, afin de ne pas avoir à définir la même présentation pour des fichiers similaires. Par exemple, si chaque article de blog utilise le même nom d’auteur et la même mise en page. Vous pouvez définir un front matter personnalisé dans votre fichier _config.yml pour servir tous vos articles de blog.

La façon dont il est structuré est un peu complexe, mais voici à quoi il ressemblera. Collez ceci en dessous de la dernière configuration dans votre fichier _config.yml :

defaults:
 -
   scope:
     path: "posts" # empty string means all files
   values:
     layout: "post"
     author: "John Doe"

Lorsque vous lancez la commande jekyll serve, vous remarquerez que même si vous ne définissez pas la mise en page et l’auteur pour chaque article, vous y avez toujours accès dans vos fichiers.

Note : Lorsque vous ne définissez pas de chemin d’accès, tous les fichiers utiliseront les valeurs définies pour la page d’accueil.

Création de pages dans Jekyll

Lorsque vous créez un fichier dans le répertoire racine de votre projet, il est considéré comme une page. Le nom que vous donnez au fichier est le plus souvent utilisé dans l’URL, c’est pourquoi vous donnerez à chaque fichier de page un nom qui résonne bien.

Par exemple, si vous souhaitez créer une page dont l’URL est https://example.com/about, créez un fichier nommé about.html ou about.md. L’extension du fichier détermine le langage de balisage à utiliser pour le contenu de la page (HTML ou Markdown).

Une fois que vous avez créé un fichier, ajoutez le texte de présentation et le contenu appropriés. Enregistrez le fichier et actualisez votre site Jekyll dans le navigateur. La nouvelle page devrait maintenant être accessible à l’URL correspondant au nom du fichier.

Création de mises en page dans Jekyll

Vous pouvez utiliser les mises en page pour définir la structure et le design des pages et des articles de votre site. En général, cela se fait principalement à l’aide de code HTML. Vous pouvez inclure un en-tête, un pied de page, des méta-informations dans les métadonnées de la page.

La première étape consiste à créer un dossier _layouts dans le répertoire racine de votre projet. Ensuite, créez un fichier pour chaque mise en page – le fichier doit avoir un nom descriptif qui reflète l’objectif de la mise en page. Par exemple, vous pouvez créer un fichier nommé page.html pour définir la mise en page de toutes les pages de votre site.

Il est préférable de définir la structure générale de vos mises en page en HTML ou dans un autre langage de balisage.

Vous pouvez inclure des espaces réservés pour tout contenu dynamique qui sera inséré dans la mise en page, comme le titre de la page, le contenu et les métadonnées. Par exemple, vous pouvez créer une mise en page de base comprenant un en-tête, un pied de page et une zone de contenu :

<!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <header>
                
        </header>
        <main>{{ content }}</main>
        <footer>
            
        </footer>
    </body>
</html>

Dans cet exemple, les espaces réservés {{ page.title }} et {{ content }} seront remplacés par le titre et le contenu réels de la page en cours de rendu.

À 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éer plusieurs mises en page dans le dossier _layouts et les styliser comme vous le souhaitez. Vous pouvez également remplacer la mise en page d’un thème en définissant une mise en page portant un nom similaire.

Fonctionnement du dossier _includes dans Jekyll

Le dossier _includes contient des extraits de code réutilisables que vous pouvez inclure dans différentes parties de votre site web. Par exemple, vous pouvez créer un fichier navbar.html dans votre dossier includes et l’ajouter à votre fichier de mise en page page .html à l’aide de la balise {% include %}.

<!DOCTYPE html>
 <html>
     <head>
         <title>{{ page.title }} </title>
     </head>
     <body>
         <header>{% include navbar.html %} </header>
         <main>{{ content }} </main>
         <footer>
             
         </footer>
     </body>
 </html>

Au moment de la compilation, Jekyll remplacera la balise par le contenu de navbar.html.

Le dossier _includes 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éutiliser le code sur l’ensemble de votre site.

Parcourir les articles en boucle dans Jekyll

Vous pourriez vouloir créer une page de blog dédiée pour contenir tous vos articles de blog, ce qui signifie que vous voudriez récupérer tous les articles sur votre site et les parcourir en boucle. Avec Jekyll, c’est facile à réaliser en utilisant la balise {% for %}.

Tous les articles d’un site Jekyll sont stockés dans la variable site.posts. Vous pouvez les parcourir en boucle et utiliser la variable Liquid {{ post.title }} pour afficher le titre de chaque article de cette manière :

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

Vous pouvez également utiliser d’autres variables Liquid pour afficher d’autres informations sur chaque article, telles que la date ou l’auteur de l’article :

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
  <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

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.

Vous avez maintenant une idée de ce qu’il est possible de faire pour le formatage de base de votre site Jekyll. Mais vous n’aurez peut-être pas besoin d’utiliser tous ces éléments pour créer un site Jekyll à partir de zéro, car vous pouvez toujours rechercher un thème qui répond à vos besoins et l’ajouter à votre site Jekyll.

Comment ajouter un thème à un site Jekyll ?

Il existe plusieurs thèmes faciles à ajouter, mais la bonne chose est que pour chaque thème, il y a toujours des informations claires sur la façon de les installer dans le fichier ReadMe sur GitHub. Vous pouvez décider de cloner le thème, ou s’il s’agit d’un thème basé sur une gemme, le processus est plus facile.

Pour cet article, vous installerez un thème de blog et le personnaliserez pour avoir un site de blog déployé sur Kinsta. Il s’agit d’un thème basé sur des gemmes et vous pouvez accéder à son code source et aux instructions sur GitHub.

Pour ajouter un thème basé sur une gemme, ouvrez le fichier Gemfile de votre site et ajoutez la gemme pour le thème que vous voulez utiliser. Le thème que nous allons utiliser est le jekyll-theme-clean-blog. Vous pouvez remplacer le thème minima par défaut dans le fichier Gemfile :

gem "jekyll-theme-clean-blog"

Exécutez la commande bundle install dans le répertoire de votre site pour installer la gemme du thème et ses dépendances.

Dans le fichier _config.yml de votre site, ajoutez la ligne suivante pour spécifier le thème que vous souhaitez utiliser :

theme: jekyll-theme-clean-blog

À ce stade, votre thème est prêt à être utilisé.

Vous devrez supprimer toutes les mises en page du répertoire _layouts pour éviter qu’elles ne remplacent la mise en page du thème.

Vous pouvez ensuite trouver les noms des dispositions de vos fichiers dans la documentation du thème. Par exemple, si vous utilisez le thème jekyll-theme-clean-blog, le nom de la mise en page du fichier index.html est home, celui des autres pages est page, et celui de tous les articles est post.

Enfin, exécutez jekyll serve pour construire et servir votre site en utilisant le nouveau thème.

Voilà, c’est fait ! Votre site Jekyll devrait maintenant utiliser le nouveau thème basé sur la gemme que vous avez ajouté. Vous pouvez personnaliser davantage le thème en modifiant sa présentation dans les répertoires _layouts de votre site.

Personnaliser un thème Jekyll

Vous avez maintenant ajouté votre thème à votre site. La prochaine étape consiste à personnaliser le site pour qu’il réponde à vos besoins et qu’il fonctionne comme prévu. Par exemple, les images de chaque page et de chaque article ne sont pas affichées, mais un arrière-plan gris est affiché.

Vous pouvez y remédier en ajoutant une option« front matter » à chaque page et à chaque article, en spécifiant le chemin d’accès à l’image que vous souhaitez utiliser. Dans Jekyll, les éléments tels que les images sont stockés dans le dossier assets. Dans ce dossier, vous pouvez décider de créer des sous-dossiers pour organiser vos images.

Vous pouvez maintenant ajouter une option d’arrière-plan au bloc de la page d’accueil et un chemin vers son image. Par exemple, sur la page « À propos », il s’agit de la première page :

---
layout: page
title: About
description: This is the page description. 
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

Faites-le pour toutes les pages et tous les articles et votre page ressemblera à ceci :

Vous pouvez également 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 étudiant le code source du thème, 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.

Les liens de navigation se trouvent dans le fichier navbar.html du dossier _includes. Vous pouvez créer ce fichier, coller le code de votre code source et supprimer l’option de contact ou ajouter toute nouvelle option que vous souhaitez.

Lorsque vous enregistrez votre projet, vous remarquerez que les options de la barre de navigation sont personnalisées :

Enfin, une dernière personnalisation consisterait à créer une page d’articles qui contiendrait tous les articles de votre blog – ce qui signifie que vous parcourrez tous les articles en boucle sur cette page.

Créez un fichier, posts.html et collez le code suivant :

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---

{% for post in site.posts %}

<article class="post-preview">
    <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
        <h2 class="post-title">{{ post.title }}</h2>
        {% if post.subtitle %}
        <h3 class="post-subtitle">{{ post.subtitle }}</h3>
        {% else %}
        <h3 class="post-subtitle">
            {{ post.excerpt | strip_html | truncatewords: 15 }}
        </h3>
        {% endif %}
    </a>
    <p class="post-meta">
        Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
        }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
        read_time.html content=post.content %}
    </p>
</article>

<hr />

{% endfor %}

N’hésitez pas à modifier l’image d’arrière-plan pour qu’elle corresponde à l’image que vous avez enregistrée. Dans le code ci-dessus, vous parcourez en boucle tous les messages pour afficher tous les articles de cette page. Voici à quoi ressemblera la page des articles une fois sauvegardée.

Comment ajouter du contenu à un site Jekyll

Vous avez maintenant créé un site Jekyll et l’avez configuré pour qu’il réponde à vos besoins. La dernière étape consiste à ajouter du contenu ou à apprendre comment ajouter du contenu à un site Jekyll.

Tout le contenu est stocké dans le dossier _posts. Chaque contenu est stocké dans un fichier avec une convention de nommage similaire à YYYY-MM-DD-title.md (ou .html pour les fichiers HTML). Par exemple, si vous souhaitez créer un article intitulé « Mon premier article », créez un fichier 2023-03-08-mon-premier-article.md dans le répertoire _posts.

Ensuite, pour chaque fichier d’article/contenu, assurez-vous d’ajouter en tête de page des informations sur l’article. Il s’agit de la mise en page, du titre, de la description, de la date et d’autres informations.

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

Vous pouvez ensuite ajouter votre contenu sous le bloc d’introduction à l’aide de balises HTML ou de la syntaxe markdown.

Enregistrez le fichier, et Jekyll le construira et l’inclura automatiquement dans votre site.

Comment déployer votre site Jekyll sur Kinsta

Kinsta est une plateforme dans le cloud qui vous permet d’héberger des sites web statiques, y compris Jekyll. Pour ce faire, vous pouvez mettre en place certaines configurations, pousser vos codes sur GitHub et enfin les déployer sur Kinsta.

Pré-requis : Configuration de votre site Jekyll

Vérifiez votre fichier Gemfile.lock et assurez-vous qu’il inclut une plateforme pour tous les appareils. Pour vous assurer que toutes les plateformes sont correctement configurées, exécutez la commande suivante :

bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

Vous pouvez ensuite créer un Procfile – ce fichier spécifie les commandes qui sont exécutées lors du déploiement de votre site. Ce fichier met automatiquement à jour les commandes à exécuter dans l’onglet Process de MyKinsta. Voici la commande à ajouter à votre Procfile :

web: bundle exec jekyll build && ruby -run -e httpd _site

Pousser votre site Jekyll sur GitHub

Pour cet article, nous allons utiliser les commandes Git pour pousser vos codes sur GitHub. Tout d’abord, créez un dépôt sur GitHub ; cela vous donnera accès à l’URL du dépôt.

Vous pouvez maintenant initialiser un dépôt Git local en ouvrant votre terminal, en naviguant vers le répertoire qui contient votre projet et en exécutant la commande suivante :

git init

Ajoutez maintenant votre code au dépôt Git local à l’aide de la commande suivante :

git add

Vous pouvez maintenant valider vos modifications à l’aide de la commande suivante :

git commit -m "my first commit"

Remarque : vous pouvez remplacer « my first commit » par un bref message décrivant vos modifications.

Enfin, poussez votre code sur GitHub à l’aide des commandes suivantes :

git remote add origin [repository URL]
git push -u origin master

Remarque : veillez à remplacer « [repository URL] » par l’URL de votre propre dépôt GitHub.

Une fois ces étapes terminées, votre code sera poussé sur GitHub et accessible via l’URL de votre dépôt. Vous pouvez maintenant déployer sur Kinsta !

Déployer votre site Jekyll sur Kinsta

Le déploiement vers Kinsta se fait en quelques minutes. Commencez par le tableau de bord My Kinsta pour vous connecter ou créer votre compte. Ensuite, vous allez autoriser Kinsta sur GitHub.

Vous pouvez ensuite suivre les étapes suivantes pour déployer votre site Jekyll :

1. Cliquez sur Applications dans la colonne latérale gauche
2. Cliquez sur Ajouter un service
3. Cliquez sur Application dans la liste déroulante

Une fenêtre modale apparaît dans laquelle vous pouvez sélectionner le référentiel que vous souhaitez déployer. Sélectionnez une branche que vous souhaitez déployer si vous avez plusieurs branches dans votre référentiel.

Vous pouvez ensuite attribuer un nom à cette application. Sélectionnez un emplacement de centre de données parmi les 25 disponibles, puis le Procfile fournira automatiquement la commande de processus web.

Votre application va commencer à se déployer. Dans quelques minutes, un lien sera fourni pour accéder à la version déployée de votre site web. Dans le cas présent, il s’agit de : https://myblog-84b54.kinsta.app/

Résumé

Jusqu’à présent, vous avez appris comment Jekyll fonctionne et les différentes personnalisations que vous pouvez effectuer avec Jekyll. Vous pouvez maintenant affirmer que Jekyll est un excellent outil pour créer des sites web statiques en raison de sa simplicité, de sa flexibilité et de ses puissantes fonctionnalités.

Le système de modèles intuitif de Jekyll, les modèles liquides et la prise en charge intégrée de markdown et d’autres langages de balisage permettent de créer et de gérer rapidement des sites riches en contenu.

N’hésitez pas à héberger gratuitement tous vos sites statiques avec l’hébergement d’applications de Kinsta, et si vous l’appréciez, optez pour notre plan Hobby Tier, à partir de 7 $ par mois.

Que pensez-vous de Jekyll ? Avez-vous utilisé Jekyll pour construire quelque chose ? N’hésitez pas à partager vos projets et vos expériences avec nous dans la section des commentaires ci-dessous.