JEKYLL

Le site contenant la documentation de Jekyll : Jekyllrb.com

Installation

$ gem install jekyll

Creer un nouveau projet jekyll

$ jekyll new <Nom du projet>

Ce qui aura pour effet de générer les fichiers nécessaires.

Builder un projet jekyll

Si vous souhaitez construire le site à partir de ces fichier, il suffira d’utiliser la commande

$ jekyll build

qui créera automatiquement votre site statique dans un dossier _site.

Le serveur Webrick

Travailler sur un projet deja existant en lancant un serveur webrick qui est un serveur ruby sur le port 4000. En revanche si vous souhaitez travailler sur les sources de votre projet il faudra utilise la commande

$ jekyll serve

qui vous permettra de lancer un serveur Webrick pour voir votre projet sur le navigateur.

Pour que les modifications des fichiers soient prise en compte vous pouvez utiliser l’option watch

$ jekyll serve --watch --force_polling

Fonctionnement

Un projet jekyll se compose de plusieurs fichiers/dossiers importants.

config.yml

config.yml, ce fichier permet de stocker la configuration du site. Tous les attributs définit dans ce fichier seront accessible dans les fichiers html en faisant site._posts

Ce dossier va contenir les différents articles qui vont composer notre site. Ces articles peuvent être au format markdown ou textile (ou autre à l’aide de plugins) et devront suivre la nomenclature suivante : YYYY-MM-JJ-mon-super-article.md

*.html

Les fihiers html se décomposent en 2 parties.

Au début du fichier, entre --- on pourra définir les propriété de notre page tel que le layout à utiliser, le titre de votre page…

Ensuite, en dessous de cette déclaration on peut utiliser la syntaxe liquid qui permettra par exemple d’afficher des variables et de faire des boucles.

_layouts

Ce dossier va contenir des pages HTML utilisées lorsque l’on précisera un layout dans nos fichier HTML, elles peuvent elles-même faire appelle à d’autres layouts.

_includes

Ce dossier contiendra des blocs de code HTML que l’on souhaitera utiliser à plusieurs endroits à l’aide du bloc liquid include \{\% include _social.html \%\}

Jekyll offre pas mal de fonctionnalitées et le mieux pour les découvrir reste de l’utiliser pour se créer un petit site perso.

Héberger sur GitHub

Comme je vous l’ai dit, un des avantage de Jekyll est de pouvoir héberger son projet simplement gràce à GitHub Pages. Vous pouvez l’utiliser de 2 façon :

Pour créer une page pour votre dépôt http://.github.io/. Dans ce cas là il vous faudra versionner votre projet jekyll sur une branche gh-pages Pour vous créer un site perso http://.github.io/ en créant un dépôt .github.io sur votre compte, et en publiant votre projet jekyll sur la branche master

Attention toutefois à quelques limitations, en effet github n’autorise pas l’utilisation de plugins pour ces pages (pour des raisons de sécurité). Donc si vous en utilisez il vous faudra publier directement les fichiers HTML.

il y a 3 layout: defaut, page, post

avec le site DISQUS on peut ajouter des modules javascript pour par exemple avoir des commentaires, des formulaires etc

Organisation du blog

Suite à la génération du blog, Jekyll a créé le minimum pour générer un blog. Le fichier _config contient la configuration générale du blog, le dossier _layout contient les templates qui serviront à générer les pages. Le dossier _post contient les articles et le dossier _site contient le blog généré. C’est ce dernier dossier qu’il faudra placer sur votre serveur si vous souhaitez publier votre blog.

tuto liquid for designer: Shopify

tuto en anglais: scotch.io

on creer un contenu (genre un contenu du footer) dans include, puis on l’insert dans un layout enfin le layout est appelé dans le .md ou .html entre les 3 tirés du haut genre 1 template include par action ; footer.html, commentaire.html, header.html, head.html, sidebar.html..

on cree un include genre header, puis on cree un layout ‘ce que contiendra la la page ex que des footer ou footer+header’ ensuite dans le contenu .md/html on appel notre layout qui est le model