Mathieu GAILLARD

Créer un site avec Jekyll : Démarrage

Pour mettre en place mon site personnel, j’ai installé Jekyll sur une VM Debian, et sur la Raspbian de mon Raspberry Pi 2. Voilà comment j’ai procédé.

Installer les dépendances

Jekyll est basé sur une gem Ruby. Il faut donc commencer par installer Ruby pour ensuite pouvoir installer Jekyll. Tout est dans les depôts, on peut le faire en quelques commandes.

Pour installer Ruby :

$ apt-get install ruby-full

Pour installer Jekyll :

$ gem install jekyll

Je suis conscient que dans certains cas, ces commandes ne suffisent pas. Par exemple si vous êtes sur une autre distribution ou bien si vous n’êtes pas sous linux. Dans ce cas, je vous recommande d’aller chercher dans la documentation de Ruby ou de Jekyll.

D’autre part, l’installation peut sans doute être faite plus finement. Par exemple, pour avoir plusieurs versions de Ruby sur une machine, ou bien pour avoir les dernières fonctionnalités. Je ne l’explique pas, puisque ça ne fait pas partie du cadre de l’article, de plus, je n’ai pas eu ce problème.

Un premier site avec Jekyll

Maintenant que Jekyll est installé et fonctionne correctement, on va générer un nouveau projet. Il suffit d’exécuter la commande suivante :

$ jekyll new myblog

Celle-ci aura pour effet de créer un dossier myblog dans lequel il y aura un projet Jekyll minimaliste.

Pour traduire le projet Jekyll en pages HTML statiques, on utilise la commande build.

$ jekyll build

Cette commande construit les pages HTML du site et les places dans le répertoire _site. Il est aussi possible de spécifier d’autres répertoires pour le site source et les pages générées. Grâces aux paramètres --source et --destination. Enfin, l’option --watch permet de régénérer automatiquement le site suite à la détection d’un changement de ses sources.

Pour la phase de développement, Jekyll propose un serveur web intégré. Il permet de se rendre compte, en local, de l’aspect du site pendant qu’on le code. Je précise que ce serveur n’est pas adapté pour un environnement de production. Dans ce cas il faudrait se tourner vers quelque chose comme Apache, ou bien nginx.

Pour lancer le serveur :

$ jekyll serve

Cette commande va générer le site dans le répertoire _site et le servir à l’adresse http://localhost:4000/. De plus, il va automatiquement le régénérer en cas de changement d’un des fichiers sources. Le serveur web sera exécuté dans le terminal. Pour l’arrêter il faudra faire la combinaison Ctrl + C. Pour détacher ce processus du terminal on peut utiliser l’option --detach. Dans ce cas il faudra lui envoyer un signal kill pour l’éteindre.

Organisation des fichiers

Le répertoire généré contient un ensemble des dossiers et de fichiers. Chacun a une fonction bien précise.

_config.xml

Contient les paramètres globaux du site. Par exemple son titre ou l’email du webmaster. Il est possible de choisir de nouveaux paramètres à intégrer dans ce fichier. Ils seront accessibles depuis le code du site via la variable site.

_includes

Contient des templates partiels que l’on peut inclure dans d’autres pages pour éviter de dupliquer du code.

_layouts

Contient les templates du site. Par exemple le template général du site, celui qui décrit sa structure de base. On peut aussi y mettre dans templates plus spécifiquement pour un type de page. Par exemple, un pour les pages, et un pour les articles.

_posts

Contient les articles du site formatés selon nos préférences. Les noms des fichiers présents dans ce dossier doivent respecter une convention de nommage. ANNEE-MOIS-JOUR-titre.FORMAT. Par exemple : 2009-04-26-demarrage-jekyll.md

_site

Contient, par défaut, les fichiers HTML généré du site.

Fichiers à la racine ou dans des sous dossiers.

Chaque fichier à la racine du site dont l’extension est .html, .markdown, .md ou .textile sera transformé par Jekyll en fichier HTML.

Dossiers à la racine ou dans des sous dossiers.

Les autres dossiers et fichiers seront recopiés tels quels dans le dossier de destination lors de la génération du site Jekyll. Par exemple, un dossier css contenant des fichiers .css.

index.html

La page d’accueil du site. L’extension peut aussi être .md ou bien .textile.

Pour en savoir plus

Pour savoir comment écrire un article : Créer un site avec Jekyll : Poster un article