Ce premier article décrit de façon très brouillon l’installation de ce blog ainsi que mes notes que j’avais prises au fur et à mesure.

Je souhaitais quelque chose de très simple, sans base de données, même si le fait d’avoir une bdd n’ajoute pas forcément de complexité, mais au moins quelque chose de très condensé et très personnalisable. Jekyll paraissait une solution assez proche de cette vision et puis assez “geek”. Je me suis donc lancé sans vraiment réfléchir trop longtemps.

–

Installation

J’avais entendu parler d’un projet plutôt sympa : Yeoman. En gros, c’est un générateur de bootstrap qui vous installe plein de choses intéressantes (Sass et Grunt par exemple) pour débuter tous types de projets web. On choisit son générateur, dans ce cas précis, j’ai choisi le générateur generator-jekyllrb. Je vous laisse vous documenter pour l’installation de Yeoman et du générateur (mais avant pensez à installer Ruby), vous allez voir c’est très simple. Mais j’ai appris une chose, lorsqu’on suit des tutos, rien ne marche jamais comme prévu :)

Démarrer le serveur

Si tout fonctionne du premier coup, il suffit maintenant de lancer la commande grunt serve pour compiler, minifier, lintifier, démarrer le serveur web, rendre le tout toubokomilfo, et puis lancer le navigateur pour voir votre blog généré.

Lançons la commande :

$ grunt serve
Running "serve" task

Running "clean:server" (clean) task
>> 0 paths cleaned.

Running "concurrent:server" (concurrent) task
    Warning:        Deprecation: The 'pygments' configuration option has been renamed to 'highlighter'. Please update your config file accordingly. The allowed values are 'rouge', 'pygments' or null.
      Dependency Error: Yikes! It looks like you don't have pygments or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- pygments' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/! 
      Liquid Exception: pygments in /home/agoeury/Documents/Devs/blog/jekyll/app/_posts/2015-11-27-welcome-to-jekyll.md
                 ERROR: YOUR SITE COULD NOT BE BUILT:
                        ------------------------------------
                        pygments Use --force to continue.
        
    Aborted due to warnings.

Et voilà, on a déjà une couille, il y a un problème sur une des tâches grunt. Bon, rien de grave, il suffit de changer la valeur de configuration pygments en highlighter. On corrige et on relance :

Running "browserSync:server" (browserSync) task
Warning: The super constructor to `inherits` must not be null or undefined. Use --force to continue.

Aborted due to warnings.

Du coup je suis allé voir les différentes issues github du projet, et il semblerait qu’une mise à jour de browserSync devrait suffire.

$ npm outdated
Package                 Current  Wanted  Latest  Location
grunt-browser-sync        1.3.7   2.2.0   2.2.0  jekyll
grunt-browser-sync        1.3.7   2.2.0   2.2.0  jekyll
grunt-concurrent          0.5.0   0.5.0   2.1.0  jekyll
grunt-contrib-clean       0.6.0   0.6.0   0.7.0  jekyll
grunt-contrib-copy        0.5.0   0.5.0   0.8.2  jekyll
grunt-contrib-csslint     0.4.0   0.4.0   0.5.0  jekyll
grunt-contrib-cssmin     0.10.0  0.10.0  0.14.0  jekyll
grunt-contrib-htmlmin     0.3.0   0.3.0   0.6.0  jekyll
grunt-contrib-imagemin    0.8.1   0.8.1   1.0.0  jekyll
grunt-contrib-jshint     0.10.0  0.10.0  0.11.3  jekyll
grunt-contrib-uglify      0.5.1   0.5.1  0.11.0  jekyll
grunt-filerev             0.2.1   0.2.1   2.3.1  jekyll
grunt-svgmin              0.4.0   0.4.0   3.1.0  jekyll
grunt-usemin              2.4.0   2.4.0   3.1.1  jekyll
jshint-stylish            0.4.0   0.4.0   2.1.0  jekyll
load-grunt-tasks          0.6.0   0.6.0   3.3.0  jekyll
time-grunt                0.4.0   0.4.0   1.2.2  jekyll

Il y a effectivement pas mal de choses qui ne sont pas à jour. On met à jour et on recommence :

Running "browserSync:server" (browserSync) task
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.67.232:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.67.232:3001
 ---------------------------------------
[BS] Serving files from: .jekyll
[BS] Serving files from: .tmp
[BS] Serving files from: app
[BS] Watching files...

Running "watch" task
Waiting...

Le serveur est enfin démarré et fonctionne… sauf que le css n’est pas pris en compte. Voyons voir ce qu’un grunt build nous rapporte :

Running "concat:generated" (concat) task
File .tmp/concat/css/main.css created.
File .tmp/concat/js/scripts.js created.

Running "cssmin:dist" (cssmin) task

Running "cssmin:generated" (cssmin) task
>> Destination not written because minified CSS was empty.

Du coup si on remplit le fichier main.css, il est pris en compte. Bien évidemment, ce n’est pas le bon css qui devrait être utilisé. Je me rappelle avoir pris ces notes à ce moment là car il y avait des erreurs dans tous les sens :

Le main.scss devrait visiblement se trouver dans le répertoire _scss, mais il y a ça en commentaire :
// https://github.com/robwierzbowski/generator-jekyllrb/issues/106
    // scsslint: {
    //   // See https://www.npmjs.org/package/grunt-scss-lint for options.
    //   allFiles: [
    //     '<%= yeoman.app %>/_scss/**/*.scss'
    //   ]
    // },
en commentaire dans le `Gruntfile.js`. Je ne pense pas que ça explique qu'il soit dans le dossier css et pas _scss m'enfin bon.

Il y a par contre toujours un `syntax.css` qui est appelé sur la home, pourquoi ? parce qu'il est appelé dans le layout `default.phtml`. Après une petite recherche :
// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "layout",
        "syntax-highlighting"
;

L'import de **syntax-highlighting** doit probablement généré le fichier, mais étant donné que notre fichier `main.scss` n'est absolument pas utilisé, il ne se passera rien.

Bon, autant vous le dire, j’étais en galère et j’avais perdu trois plombes à essayer de comprendre ce qu’il se passait.

La décision

A ce stade rien ne fonctionne comme ça le devrait. Le générateur Yeoman jekyllrb n’est à priori plus vraiment maintenu. La décision : je laisse tomber Yo et Grunt pour l’instant. Une installation classique de jekyll sans rien autour fonctionne très bien du premier coup (à condition d’avoir correctement installé Ruby), on verra plus tard pour peut-être ajouter Grunt en fonction de mes besoins et de mes goûts.

Yeoman est quand même sympa et pratique, à condition d’utiliser des générateurs “officiels” à jour et maintenus. Je le garde de côté…

La gestion des thèmes ?

De base, Jekyll ne gère pas différents thèmes (edit: depuis la version 3.2 si). Il existe jekyll-bootstrap qui permet à priori de le faire mais le projet semble lui aussi à l’abandon. Cela consiste à avoir un répertoire _themes dans lequel chaque thème serait un sous répertoire. Au build, les fichiers seraient copiés dans les répertoires que Jekyll utilise. Certaines personnes parlent de gérer ça avec les branches git, une branche par thème. Je trouve cette façon à première vue pas top.

–

Conclusion

A force de vouloir chercher simple, je me suis compliqué la vie avec des outils annexes, qui ne sont pas forcément utiles pour l’instant pour mon blog. Un jekyll sans rien autour fonctionne très bien et répond parfaitement à mon besoin.

Arrêtons d’essayer de faire des choses complexes…