time_read14mn de lecture

Jekyll : Le générateur pratique de sites Web statiques

03 janvier 2020

Jekyll : Le générateur pratique de sites Web statiques

Depuis de nombreuses années, le nombre de personnes utilisant WordPress ne cesse d’augmenter. En effet, au fil des années, il est devenu l’un des CMS (Content Management System) parmi les plus utilisés de par sa fiabilité. Cependant, ce CMS dépassait souvent les besoins des développeurs Web. De ce fait, une alternative a été trouvée comme Jekyll qui permet de mettre en place des sites Web sans aucun accès aux bases de données.

Qu’est-ce que Jekyll ?

Jekyll est un générateur de site statique simple, adapté aux blogs et statique.

Vous créez votre contenu sous forme de fichiers texte (Markdown) et les organisez dans des dossiers. Ensuite, vous construisez le thème de votre site à l’aide de modèles HTML optimisés pour Liquid. Jekyll associe automatiquement le contenu et les modèles pour créer un site Web entièrement constitué d’actifs statiques, pouvant être chargés sur n’importe quel serveur.

Cependant le logiciel ne fournit pas l’éditeur WYSIWYG comme sur WordPress. De ce fait, il est nécessaire d’avoir un minimum de connaissance en codage classique (HTML et CSS). Vous pouvez dans ce cas, utiliser l’éditeur de contenu Prose, optimisé pour Jekyll afin de vous simplifier l’édition de Markdown.

Le générateur de sites Web Jekyll peut être téléchargé en local sur votre ordinateur.

Quels sont les avantages et inconvénients de Jekyll ?

Si vous désirez mettre en place votre site statique ou votre blog, l’utilisation de Jekyll peut être un avantage et une bonne alternative au système de gestion de contenu tel que WordPress. En effet, l’utilisation de Jekyll reste très simple dans la mesure où aucune installation tel qu’une base de données n’est nécessaire. On évite de ce fait tout le travail de configuration.

Les avantages d’une telle solution sont les suivants :

  • Jekyll ne nécessite aucune maintenance du serveur
  • Faible risque d’être piraté (à moins que quelqu’un ait connaissance de vos informations de connexion à GitHub)
  • Jekyll est rapide et le temps de chargement rapide
  • Gestion des redirections 301 et 404 pour vous
  • Grande liberté au niveau de la programmation

Parmi les inconvénients, il est à noter :

  • Pas de script coté serveur (par exemple formulaire de contact)
  • Le contenu ne peut être présenté de manière dynamique
  • Aucune planification de post possible

Jekyll: comment créer un site Web avec GitHub Pages ?

GitHub vous permet de créer et déployer votre projet dans la limite de un Giga par compte. Cela reste suffisant pour un site statique créé avec Jekyll. La bande passante est quant à elle, limité à 100 GO par mois, ce qui reste raisonnable pour votre site vitrine.

1. Création de votre compte sur GitHub

La première étape est de créer votre compte sur GitHub. Pour cela, indiquez votre nom d’utilisateur, votre adresse email et le mot de passe souhaité. Cliquez ensuite sur le bouton “Suivant” se trouvant en bas de page.

Jekyll

Choisissez le plan gratuit en cliquant sur le bouton “Choose Free“.

Jekyll

2. Créer un nouveau référentiel

Afin de créer un nouveau référentiel, cliquez sur le “+” se trouvant en haut de page à droite puis sur “New repositery“.

Jekyll

Lors du choix de votre “Repository name“, il est nécessaire de mettre “github.io” sur votre modèle comme le montre la copie d’écran ci-dessous. Cliquez sur “Create repository” une fois le formulaire rempli.

Jekyll

3. Choix de votre thème Jekyll

Il vous est possible à tout moment de retrouver votre référentiel en vous rendant sur le menu de démarrage, se trouvant en haut à gauche de votre écran. Afin de lier le référentiel à Jekyll, rendez-vous sur ce dernier et cliquez sur le menu “Setting“.

Jekyll

Allez en bas de page, dans la rubrique “GitHub Page” et cliquez sur “Chose a theme“.

Jekyll

Choisissez le modèle souhaité et cliquez sur “Select Theme“.

Jekyll

4. Publication de votre première page Web

Lors de la sélection du thème effectuée à l’étape suivante, un fichier config.yml et un fichier index.md ont été créé automatiquement. Cette page, tout comme le fichier de configuration sont en mesure d’être modifié en cas de besoin. Le fichier index est quant à lui déjà au format Markdown.

Supprimez le code de votre fichier index.md et testez en mettant le texte suivant:

Bienvenue sur mon site web

Confirmez la modification en cliquant sur le bouton “commit change” se trouvant en bas de page.

Jekyll

5. Comment ajouter du contenu ?

Il vous est possible de créer et d’ajouter de nouveaux fichiers tels que du CSS en cliquant sur le bouton “Create new file” visible sur votre référentiel. Vous pouvez aussi uploader directement vos fichiers en cliquant sur “upload files“.

Jekyll

6. Téléchargement du client de bureau

Bien que vous puissiez effectuer le travail en ligne directement, vous avez aussi la possibilité de télécharger une solution hors ligne sur votre ordinateur, que vous soyez sous Windows ou sous Mac en vous rendant sur le lien de téléchargement gitHub.

Jekyll : Conclusion

Vous êtes désormais en mesure de créer vos premières pages avec Jekyll. Jekyll reste une solution simple et fiable permettant de créer rapidement et facilement votre site vitrine. De plus, il est possible, une fois votre site créé de le transférer sur un hébergement Web sans problème 👍

Hébergement Web LWS

 

Avatar de l'auteur

Auteur de l'article

Fabrice S.

Développeur web full stack et consultant SEO. Je suis Fabrice, expert en développement web Full Stack, consultant SEO et noms de domaine chez LWS 🌐. J'adore partager mes astuces et mon expérience pour vous aider à briller sur le web ! Suivez-moi pour des conseils pratiques et fun 😊.

Il y a 1590 jours

note article

4.6/5 (215 votes)

Commentaires (0)
Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

White Book for other Category

Hébergement Web LWS - 3 mois offerts

Hébergement Web Starter LWS GRATUIT pendant 3 mois ! 🚀

Cette offre exclusive comprend tout ce dont vous avez besoin pour créer votre site web GRATUITEMENT : Hébergement 250Go SSD, 5 sites webs hébergeables, WordPress et autres CMS en 1 clic, support réactif 7J/7, serveurs en France...