Going Static, Ex to Ug

La semaine dernière j’inaugurais une série de billets racontant mon passage à un blog statique en vous parlant du commencement et du choix d’un générateur. Voici venu le temps de la deuxième installation pour cet série estivale et aujourd’hui au menu c’est Hugo.

De part sa structure Hexo se veut simple à prendre en main. Les dossiers sont explicites et on comprend rapidement ou l’on doit appliquer les modifications. Pour le blog j’utilise le thème Chan que j’ai légèrement modifier pour :

Le générateur fonctionne avec un système de plugins assez sympa ou il est notamment possible d’avoir un panel admin pour écrire et gérer ses billets comme avec un CMS, en beaucoup plus épuré. La génération d’une Table des matières est également de la partie avec le code ‘’.
Hexo est livré avec une fonction de déploiement pour simplement uploadé le contenu HTML généré vers votre serveur. Le principe est intéressant mais il demande encore à être modifier chez moi. En effet la fonction deploy envoie ce le contenu généré par Hexo mais si un dossier ou un fichier présent sur le serveur distant n’est pas dans le dossier génèré par Hexo il est tout bonnement supprimer. Ce qui me pose problème vu que j’utilise Hashover pour gérer les commentaires du blog. Peut-être qu’avec un script bash je pourrais télécharger le dossier et le placer dans le dossier génèré avant la commande hexo deploy. L’enquête commence.

Et… L’enquête se termine assez rapidement, Hexo est hyper cool à utiliser cependant certains bugs me dérangent :

Alors je me lance avec un autre générateur Hugo qui tire son épingle du jeu en utilisant le language Go et en ayant une vitesse de génération absolument hallucinante. Là où Hugo mettait 1,8 seconde pour générer le blog (avec 4 billets), Hugo n’en prend seulement *** ce qui peut s’avérer assez pratique avec un gros blog.
De plus Hugo a une communauté plus que vivante et les thèmes sont plus épurés de services tiers que peuvent l’être ceux pour Hexo.
Au niveau de sa structure, c’est également très propre et rapidement compréhensible. Je trouve même que les styles css sont plus propres que sur Hexo.

Vu que j’ai une connaissance très proche du néant sur le language Go je dois sûrement passer à côté de pas mal de choses pour le moment mais, Hugo est vraiment très agréable à utiliser.
J’utilise le thème Red Lounge qui se pase sur pureCSS avec des polices made in Google. Le thème est vraiment sympa et léger. J’aime particulièrement le look d’un blog avec ce genre de thème, c’est clair et efficace. Le thème a la particularité d’avoir quelques fonctions que je n’ai pas pu retrouver chez d’autres comme le fait de pouvoir placer la table des matières dans un cadre flotant sur la droite du texte (Voir mon billet sur le packaging sous Solus pour voir une table des matières en action). C’est beaucoup plus propre niveau lisibilité qu’un pauvre sommaire non stylisé se plaçant juste avant le billet.

Hugo permet également d’utiliser des shortcodes, de petites bribes de codes qui seront détectés par le générateur lors du rendu statique et auquels Hugo appliquera un template pour créer un rendu HTML propre. Nativement il est possible par exemple d’utiliser des shortcodes pour afficher des tweets, des vidéos hébergées sur Vimeo ou encore Youtube.
La fonction à l’air assez complète. Par xemple j’ai ajouté un shortcode pour créer des pullquotes, pour cela il m’a fallu créer un fichier pullquote.html dans /layouts/shortcodes.

<p data-pullquote="{ { .Get 0 } }"></p>
## Il faut enlever les espaces entre les caractères { et }, Jekyll croit qu'il sagit d'un paramètre Liquid et me foire le rendu.

ensuite il m’a fallu ajouter les options qui vont bien dans le fichier css du thème.

	/* Pullquote */
	p[data-pullquote] {
	  display: block;
	}

	p[data-pullquote]:before {
	  content: attr(data-pullquote);
	  float: right;
	  width: 200px;
	  margin: 0 0% 0.5em 30px;
	  padding: 0;
	  font-size: 22px;
	}

	p.pull-left[data-pullquote]:before {
	  float: left;
	  margin: 0 30px 0.5em -5%;
	}

Une fois cela fait il n’y a plus qu’à écrire et quand on souhaite faire apparaître une pullquote.

{ {< pullquote texteàpullquoter>} }
## Il faut enlever les espaces entre les caractères { et }, Jekyll croit qu'il sagit d'un paramètre Liquid et me foire le rendu.

Si tout s’est bien passé on doit obtenir ceci1.

Le lien renvoie vers une explication pour Jekyll mais le rendu est le même. Pour ce qui est de ce moyen je ne souhaite pas l’utiliser avec mon blog sous Jekyll car je trouve que ça cradosse mes fichiers markdown et que j’y perds en lisibilité.

Billets en liens :