Catégories
Les logiciels, tutoriels et ressources ouvertes

Réaliser gratuitement un site web statique avec Jekyll

Site statique ou site dynamique ? La popularité des sites dynamiques semble du aux CMS dont WordPress. Ce dernier utilisé tel un couteau suisse du web y compris pour des sites dont les contenus ne nécessitent pas une telle technologie. Les sites dynamiques se sont donc imposés en raison de leur simplicité de conception via les interfaces des CMS. Le retour en force du web statique s’explique entre autre par des outils qui permettent la création et l’administration de site statique avec beaucoup plus de facilité. En effet, il n’est plus question de coder ses pages en HTML CSS, les générateurs de sites statiques tel Jekyll en combo avec le langage de balisage léger Markdown allègent leur conception et facilitent leur administration.

Les sites statiques c’est à dire des sites qui ne varient pas selon la demande possèdent des avantages indéniables :

  • Performance : plus rapide (avantage indéniable en SEO), plus flexible sur les mises en page également…
  • Sécurité : impossible d’intégrer du code malveillant,
  • Économique : en fonction des usages, mais l’hebergement reste moins couteux en statique si ce n’est parfois gratuit…
  • Écologique : choisir un site statique est sans doute une des premières étapes vers l’écoconception de site web.

Pour réaliser un site statique vous pouvez utiliser Jekyll l’un des générateurs de site statique ou SSG (Static Site Generator) les plus populaire. D’autres SSG existent, citons Hugo, Cecil, Hakyll, Pelican parmi d’autres. Jekyll doit sa popularité sans doute en raison de son lien avec Github puisque c’est en Jekyll que sont publiées les pages des utilisateurs Github. Seulement 0,1% des 1,84 milliards sites web seraient réalisés en Jekyll pour plus de 40% avec WordPress[1]. Jekyll est bien entendu un logiciel libre multplateformes (GNU Linux, IOS et Windows). EnfinJekyll possède une documentation solide (en anglais) et des tutoriels videos pour débuter. Jekyll permet de créer des pages en HTML selon un templates CSS prédéfini et configurable à partir de pages rédigées en syntaxe markdown très populaire car très simple.

Prérequis et installation

Pour utiliser Jekyll quelques prérequis sont nécessaires :

  • Jekyll est écrit en langage Ruby, vous aurez besoin d’une version supérieure à la 2.5 de Ruby
  • Jekyll nécessite également RubyGems, GCC et Make

Vos prérequis vérifiés et/ou installés, procéder à l’installation en ligne de commande

  • Installer Jekyll et Bundler
gem install jekyll bundler
  • Créer un nouveau site Jekyll
jekyll new mon_nouveau_site
  • Aller dans votre répertoire « mon_nouveau_site »
cd mon_nouveau_site
  • Construire le site et le rendre disponible en local
bundle exec jekyll serve
  • Connecter votre navigateur en local sur le port 4000 ou bien cliquer sur l’adresse fourni par la ligne de commande
Server address: http://127.0.0.1:4000/

Le site est sous conçu par Jekyll est sous vos yeux, vous n’avez plus qu’à concevoir les contenus. Pour éditer votre site vous aurez besoin d’un éditeur. Choisissez un éditeur qui permet l’accès à l’arborescence de votre dossier « mon_nouveau_site » dans la même fenêtre tel VS Codium.

Créer un nouveau billet :

  • Créer un nouveau document dans le répertoire _posts
  • Ce document doit être en markdown
  • Il doit posséder la syntaxe suivante : AAAA-MM-JJ-mon-premier-billet.md
  • Puis éditer simplement votre billet en markdown avec un entête en YAML de ce type :
---
layout: post #votre gabarit de billet, configurable
title:  "Mon Premier Billet" #titre de votre billet
date:   2021-08-20  #date de votre billet
categories: jekyll update #catégorie facultatif, configurable
author: moi #facultatif
---

# Mon premier billet
 Lorem impsum

## Titre 2
- Lorem ipsum...

Créer une page

  • Créer un nouveau dossier à la racine du dossier mon_nouveau_site
    • nommer ce dossier _pages (le _ est très important pour Jekyll)
  • créer un document en markdown du nom de votre page par exemple mon-CV
  • éditer ce document en markdown avec un entête en YAML par exemple :
---
layout: page #gabarit de la page, configurable
title:  "Mon CV" #titre de la page
permalink:  /mon-CV/ #lien de navigation
---

# Mon CV

## Mes compétences
Lorem ipsum

## Mes expériences
- Lorem ipsum
-...

Gabarits ou themes ?

Côté style, vous avez du choix. Chez Jekyll on nomme cela un « theme » (Jekyll theme). Un nombre important de themes sont disponibles que ce soit sur des sites spécialisé ou chez RubyGem. La gestion des themes se fait très simplement pour peu que vous n’ayez pas à le modifier. Préférez un theme récent qui possède une documentation solide (j’insiste sur ce point pour les débutants)

  • Télécharger votre theme et installer-le comme une gem ruby.
  • Puis ouvrir le fichier Gemfile de votre répertoire « mon-nouveau_site » et modifier la gem du theme (par défaut c’est « minima ») avec le nom de votre nouveau theme.
gem "minima" # à replacer par 
gem "nom-de-mon-nouveau-templates"
  • Puis recharger votre site avec la ligne de commande sans quoi la modifications des gem ne sera pas pris en compte, à savoir :
ctrl-c puis bundle exec jekyll serve

Si certaines page ou post de s’affichent pas, ne paniquez pas. Il faut modifier le layout des pages concernées. En effet, les theme ne possèdent pas tous des layout « post » ou « pages ». Par conséquent ils ne peuvent s’afficher. Il vous suffit de modifier dans l’entête en YAML le layout et de mettre un layout proposé par votre theme que vous trouverez dans la documentation ou dans les dossiers composant le theme. Souvent il suffit de mettre « default » pour voir réapparaitre vos pages :

---
layout: post default #changer le layout du billet en "default" ou autre layout disponible dans le  nouveau template
title:  "Mon Premier Billet" 
date:   2021-08-20  
categories: jekyll update 
author: moi #facultatif
---

# Mon premier billet
 Lorem impsum

## Titre 2
- Lorem ipsum...

Hébergement

Une fois que votre site est terminé, vous pouvez l’héberger gratuitement chez GitHub à l’aide du services GitHub Pages. Par contre votre nom de domaine sera nécessairement « nom-utilisateur.github.io ».

Créez un compte gratuit puis créez un nouveau projet.

Chargez votre dossier « mon_nouveau_site » au sein de ce projet. Pour cela plusieurs solutions. Soit par l’interface graphique en glisser-déposer, soit en le poussant avec git et en communiquant avec votre dépôt en ssh sur votre terminal. Je ne m’attarderai pour sur cette méthode qui est à favoriser mais qui nécessite de maîtriser git.

Une fois votre dossier dans son dépôt (repository) Github, utilisez le tutoriel proposé soit en ligne de commande soit avec l’interface graphique pour publier votre site sur les pages GitHub.

Pour conclure

Si les générateurs de site statique permettent de gagner un temps certains dans la création de site statique, il demeure évident qu’il est nécessaire d’avoir un minimum de bagage en informatique afin d’affronter la pente pédagogique plus abrupte de Jekyll. Et ce d’autant plus si vous souhaitez modifier votre theme, il vous faudra également vous familiariser maitriser les Liquid et posséder des bases en programmation.

Mais c’est à ce prix que cette technologie permet d’accroître sécurité, performance et surtout d’avoir des sites statiques plus écologiques. Même si ce qu’une bonne pratique, si ce n’est excellente, de l’écoconception web parmi d’autres.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

dix-huit − douze =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.