Les cours d'informatique de l'ecm

On devrait voir ici différents cours de 1A, 2Ai MIE et 3A en informatique.

https://francoisbrucker.github.io/cours_informatique/index.html

Contribuer

Le site est généré en utilisant jekyll qui est un générateur de site statique.

jekyll

Jekyll agglomère des pages pouvant être écrite en différents langages (html, markdown, etc) en un site web cohérent.

fonctionnement général

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.

installation

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.

ruby et ses gems

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"

bundler

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

Initialiser un nouveau site avec Jekyll

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

voir et/ou compiler son site

installer les packages si nécessaire

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é.

voir le site

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

Combiner la création d'un site avec github

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

Organisation des pages

projet

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.

site

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.

pages

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 
---