Jekyll, ou comment gérer facilement son site - Partie 1
Donc, aujourd’hui, j’ai décidé de vous préparer un petit pas à pas pour commencer avec Jekyll. Jekyll, c’est quoi ? Basiquement, c’est un logiciel qui vous permet de tenir un blog. Aviaplanet repose dessus, par exemple. Vous allez me dire, y’a Wordpress. Quelle différence ? Wordpress est un logiciel serveur, dans le quel vous écrivez grâce à une interface web. Tous les articles sont stockés dans une base de données, puis Wordpress va les chercher pour les afficher lorsqu’un visiteur visite la page.
C’est ici que commencent les problèmes. Si vous avez un hébergement payant, avec des serveurs corrects, le logiciel devrait tenir la charge. Si vous avez un serveur moyen, voire pas top du tout (free.fr, c’est pour vous ), Wordpress risque de mettre du temps à charger les pages lorsqu’un certain nombre de visiteurs sont connectés. De plus, il nécessite une version de php que certains hébergeurs n’ont pas installé. Oui, c’est encore pour free.fr.
Bref, l’intérêt de Jekyll, c’est qu’il n’utilise aucun logiciel serveur. Tout est sur l’ordinateur. Pour faire simple (on va voir tout ça en détails plus loin), vous tapez votre article dans un éditeur de texte de votre choix (je tape par exemple ces premières lignes sur mon iPhone), vous enregistrez au format markdown, puis Jekyll va passer tous ça a la moulinette, pour présenter l’article dans une page html Ue vous aurez codé. Vous arrivez au final avec un dossier contenant vos pages html, qu’il vous suffit de transférer sur votre serveur. C’est tout. Forcément, il y a quelques inconvénients : vous ne pouvez pas gérer les commentaires, par exemple, il vous faudra passer par un service externe comme Disqus.
installation de Jekyll
Pour ce tuto, on va voir qu’il faut utiliser la ligne de commande. Si vous utilisez Linux, vous avez probablement déjà ouvert le terminal. Si vous êtes sur Mac, ouvrez Terminal.app, vous le trouverez dans /Applications/Utilitaires/.
Premièrement, on va vérifier que Ruby soit installé sur votre machine. Tapez la commande suivante dans le terminal, vous devriez obtenir une seconde ligne, peut-être différente de la mienne (selon votre version du système, …).
Si vous obtenez un message d’erreur, il faudra installer les outils développeurs de Apple, disponible sur le Mac App Store ou en créant un compte graduit sur Apple Developer Connexion.
une fois que vous êtes assurés de la présence de Ruby sur vôtre machine, il est temps d’installer Jekyll. Dans le terminal, entrez :
Vous devrez donner votre mot de passe administrateur. En effet, le “sudo” qui précède la commande en elle même permet de la lancer en tant qu’administrateur (gestion des droits de fichiers,…). Ensuite, vous devriez obtenir quelque chose comme ça :
À ce stade, Jekyll est installé. Nous allons donc pouvoir rentrer dans le vif du sujet, à savoir la création du site en lui même. Il faut savoir que Jekyll nécessite une certaine structure de dossiers pour travailler. Nous allons donc créer une dossier racine pour votre site, soit par le Finder/Explorateur Windows, soit, si vous voulez faire plus film américain, avec la commande :
une fois le dossier créé, placez vous dedans avec le terminal, en entrant :
(cd signifie “Change Directory”, soit changer de dossier pour les anglophobes) Dans notre dossier racine, il va falloir créer un certain nombre de choses: un dossier “_posts”, un dossier “_layouts”, et un fichier “_config.yml”. On peut utiliser le terminal, si on veut :
On va maintenant créer un fichier html “index.html” à la racine de notre site:
Il y a pas mal de chose qui vont vous sembler étrange, pas forcément très html, on y reviendra ensuite. Pour l’instant, on va créer un fichier “default.html” dans le dossier “_layouts”.
Ici encore, on a pas mal de tags et de codes qui ne sont pas du htm standard. On va créer encore un dernier fichier, cette fois dans le dossier “_posts”, qu’on nommera sous la forme “2012-01-32-le_titre_du_fichier.md”. C’est un fichier texte tout bête, dans lequel on peut utiliser le language MarkDown. Je ne peux que vous conseiller de l’apprendre, cela vous sera très utile, et puis, c’est vraiment simple, vous ne perdrez pas votre temps.
bref, on va donc remplir notre fichier avec ça :
Bon, maintenant qu’on a tout ça, vérifiez que vous êtes bien, dans le terminal, dans le dossier racine. sinon, faites :
Enfin, lancez la commande
si tout va bien, vous devriez voir qulque chose qui ressemble à ça :
Un dossier “_site” devrait apparaitre dans le dossier racine. Maintenant que vous avez généré votre site une première fois, voyons à quoi il ressemble ! lancez la commande :
et ouvrez la page http://localhost:4000/. Vous devriez voir quelque chose comme ça :
Voilà pour cette première partie, la deuxième devrait suivre d’ici peu. On y décortiquera le code que nous avons écrit, et on mettra en place la structure d’un site un peu plus évolué.
Bon codage !
05/01/2012JekyllWeb