Un blog avec jekyll
Depuis maintenant 4 ans, j’expose sur mon serveur personnel un blog.
Celui-ci contient mes retours d’expériences, mes projets, mes envies.
J’ai commencé par utiliser un bon vieux wordpress. Pourquoi? Car c’était ce qu’il y avait de plus simple sur le marché… Mais lors d’une manipulation, j’ai malheureusement tout perdu. Heureusement que Wayback Machine m’a permis de PRESQUE tout récupérer!
Ainsi, j’ai décidé d’utiliser une autre techno qui sera hébergé sur un projet git. Jekyll!
Malheureusement Jekyll se base sur ruby et ce n’est pas un environnement familier. Il faut donc installer ruby sur son environnement (personnellement je suis passé par un container docker) puis éxècuter:
gem install jekyll bundler
cd /opt/
jekyll new helloworld
cd helloworld
bundle exec jekyll serve
Jekyll s’éxècute sur le port 4000. Pour le remplir, il vous faudra ajouter vos articles dans le répertoire _posts. Attention, il faut respecter le format des dates dans le nom du fichier ainsi que l’entête. Vous pouvez alors relancer votre commande de construction bundle exec jekyll serve et votre article apparaît. Vous connaissez maintenant le principe de base de jekyll. Deux petites options bien pratiques: — watch — livereload l’une vous permet de recharger automatiquement le build quand vous modifiez un fichier et l’autre de recharger automatiquement la page dès qu’un build success.
Allez donc faire un tour également dans le fichier _config.yml. Vous pourrez personnaliser votre nom et différentes informations vous concernant.
Maintenant que nous avons les bases, nous allons voir comment le personnaliser.
Finalement ici, avec le thème par défault theme: minima, tout est caché… Mais allons fouiller dans les répertoires de ce thème.
gem environment puis cherchez INSTALLATION DIRECTORY: /usr/gem et donc cd /usr/gem/gems. Rendez-vous dans le dossier du thème minima-2.3.0 puis un ls.
- _includes contient tous les fichiers que vous pourrez importer avec {% include disqus.html %}
- _layouts contient les fichiers utilisés de base pour créer votre site. Si vous regardez dans un de vos posts, vous pouvez trouver layout: default. Cette instruction indique à jekyll qu’il faut utiliser le layout default pour afficher cette page.
- _sass contient les fichiers sass (css)…
- et assets contient tous vos assets (images, …)
Imaginons que nous voulons ajouter fontawesome à votre site internet et l’afficher dans le titre.
Commençons par copier le layout principal.
mkdir /opt/helloworld/_layouts
cp ./_layouts/default.html /opt/helloworld/_layouts/
En regardant dans default.html on remarque qu’il inclut head.html. C’est parti…
mkdir /opt/helloworld/_includes
cp ./_includes/head.html /opt/helloworld/_includes/
cp ./_includes/header.html /opt/helloworld/_includes/
Ouvrons-le et ajoutons ceci juste avant </head>:
<script defer src=”https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>.
Dans header.html, ajoutons notre icone. Remplacez cette ligne par la suivante:
<a class=”site-title” rel=”author” href=”{{ “/” | relative_url }}”>{{ site.title | escape }}</a>
<a class=”site-title” rel=”author” href=”{{ “/” | relative_url }}”><i class=”fa fa-home”></i>{{ site.title | escape }}</a>
Vous avez maintenant intégré fontawesome dans votre tout nouveau site Jekyll.
Vous en connaissez assez pour découvrir et avancer dans ce fabuleux outil. Très simple à prendre en main, il permet cependant de générer très rapidement un site web statique (et même plus avec les différents plugins existants).
