On devrait voir ici différents cours de 1A, 2Ai MIE et 3A en informatique.
https://francoisbrucker.github.io/cours_informatique/index.html
Le site est généré en utilisant jekyll qui est un générateur de site statique.
Jekyll agglomère des pages pouvant être écrite en différents langages (html, markdown, etc) en un site web cohérent.
Nous utiliserons le langage markdown comme langage d'écriture de nos page (ou plutôt une variante de celui-ci appelé kramdown mais les différences sont minimes) qui a l'intérêt d'être compréhensible dans son format texte et facilement compilable en html, pdf, ou autre. Le markdown (ou ses multiples variante) est un format d'écriture très utilisé en développement.
Ces pages sont ensuite compilée en html par jekyll en utilisant des templates, ce qui permet de garder une unité au site.
Ces fichiers compilés forment un site qui peut ensuite être placé sur n'importe quel serveur admettant des site statique (par défaut, le site compilé est placé dans le dossier build).
On utilise le plugin https://rdoc.info/gems/jekyll-spaceship pour améliorer la mise ne page avec markdown et jekyll.
On suit les instrutions.
Comme on le voit, il y a des prés-requis, en particulier ruby qui est le langage dans le lequel jekyll est écrit (jekyll a été écrit par un des développeur de github célèbre site lui aussi écrit en ruby on rails et erlang).
Commencez donc par installer ruby.
Nota Bene : Sous mac avec Brew, il faudra rajouter le chemin de ruby de brew dans le PATH pour ne plus utiliser le ruby de mac.
En ruby, une bibliothèque est appelée gem et s'installe via la commande gem
.
Pour savoir est la gemme liée à Jekyll, on peut taper la commande : gem info jekyll
.
Qui donne chez moi :
jekyll (4.1.1)
Authors: Tom Preston-Werner, Parker Moore, Matt Rogers
Homepage: https://jekyllrb.com
License: MIT
Installed at: /usr/local/lib/ruby/gems/2.7.0
A simple, blog aware, static site generator.
**Nota Bene : ** Sous mac avec https://brew.sh/, les gems ne sont pas automatiquement mis dans un endroit exécutable. Il faut rajouter le chemin dans le path. Chez moi, ça donne (en utilisant le chemin de la gem liée à Jekyll) à la fin de mon
.zshrc
(ou.bashrc
si vous êtes avec bash ) :export PATH="/usr/local/opt/ruby/bin:/usr/local/lib/ruby/gems/2.7.0/bin:$PATH"
On va gérer toutes ces gems avec [bundler qui est l'équivalent de npm
/yarn
pour ruby. On va l'installer avec la commande gem
: gem install bundler
On se place à la racine du site et on initialise bundle :
bundle init
Cette commande va créer un fichier Gemfile
qui va contenir les différents package que l'on veut installer. Nous on aura besoin de jekyll :
bundle add jekyll
Cela va ajouter la dépendance de jekyll au fichier Gemfile
et créer un fichier [Gemfile.lock
.
On peut maintenant créer un site jekyll vide qui va contenir tous les fichiers sources nécessaires à la création du site. On utilisera la commande bundle et son action exec pour exécuter une gem, ici jekyll :
bundle exec jekyll new docs
La commande précédente a créé un template de site dans le dossier docs
. Ce dossier va contenir plein de fichiers. Chez moi la commande tree docs
donne :
docs
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│ └── 2020-08-28-welcome-to-jekyll.markdown
├── _site
│ ├── 404.html
│ ├── about
│ │ └── index.html
│ ├── assets
│ │ ├── main.css
│ │ ├── main.css.map
│ │ └── minima-social-icons.svg
│ ├── feed.xml
│ ├── index.html
│ └── jekyll
│ └── update
│ └── 2020
│ └── 08
│ └── 28
│ └── welcome-to-jekyll.html
├── about.markdown
└── index.markdown
9 directories, 15 files
Si c'est la première fois que vous téléchargez le site depuis github, il vous faudra, après avoir installé bundle
, télécharger les différents plugins nécessaires pour faire fonctionner le tout.
La commande bundle install
va télécharger les différentes gem nécessaires (elles sont listées dans le fichier Gemfile
).
Fun Fact une bibliothèque ne s'installe pas s'il y a un espace dans le nom du dossier d'installation. Il faut déplacer le projet, installer les gems, puis redéplacer le projet si vous voulez que ça fonctionne.
Jeckyll fait parti des prérequis du site, il n'est donc pas nécessaire de l'avoir préalablement installé.
Si l'on veut juste voir son et qu'il se mette à jour à chaque modification, on utilise le mode preview de jekyll qui crée un serveur web temporaire qui compile à la volée vos fichiers et les montre en local sur le port 4000 par défaut (http://127.0.0.1:4000) :
cd docs
bundle exec jekyll serve
Si l'on veut compiler son site et obtenir le site statique complet dans le dossier _site
vous pouvez taper la commande :
cd docs
bundle exec jekyll build
Ce n'est pas une manipulation basique, et qui n'est utile que si l'on veut déployer son site jekyll sur github en n'utilisant pas les moyens mis directement à disposition par github. Les instruction sont disponible là
Le projet contient deux dossiers :
- dossier :
docs
: contient les fichiers sources du site - dossier
resources
: les ressources brutes comme les images non redimensionnées, les fichiers de tests, etc.
Le site (dans le dossier docs
) contient 4 collections : _1A, _2A, _3A et _autre dont les fichiers sont automatiquement ajoutés au site. Ces collections correspondent aux déroulés du cours et des UEes, et inclut les vrais cours qui sont eux dans le dossier cours.
Le dossier assets contient les images, et autres pdf nécessaire aux pages générales. Chaque cours contient ses propres assets.
Les pages snt au format markdown. En revanche, il ne faut pas oublier les entêtes, sinon votre fichier ne sera pas converti.
Exemple d'entête :
---
layout: page
title: "Tronc commun d'informatique"
category: cours
tags: informatique cours
---