Un vendredi sur deux

Static site generators

Dans la longue liste des choses que je voulais regarder depuis longtemps : Jekyll et autres sites permettant de générer des sites statiques. Ca tombe bien, j’ai un sujet (prochaine journée). On va commencer par faire un choix.

Besoin

Pour le coup, mon besoin est assez “simple” : je veux pouvoir générer un site sur la base de fichier (JSON, CSVn Markdown, …) contenant les données.

Première sélection

Alors … autant que des générateurs, il y en a plein mais alors … plein … faire un choix va encore être très très compliqué … Pour aider voici deux premiers liens :

Ensuite, comme d’habitude, le résultat combiné de la recherche sous Qwant et Google de : “static site generator 2019” qui donne :

Sur la base de tout cela et comme nous sommes en plein “Concours de l’eurovision”, j’ai fait une liste en partant du principe suivant : 5 points au premier de la liste etc…

Cela donne :

  1. Jekyll (34 points),
  2. Gatsby (29 points),
  3. Hugo (28 points),
  4. NextJs (24 points),
  5. Hexo (12 points).

Alors c’est moche mais de base, je supprime NextJs pour la seule raison qu’il est (semble-t-il) basé sur React et comme c’est le cas de Gatsby, je ne vais pas en prendre deux dans la liste. C’est moche je sais.

En plus, j’en profite pour ajouter un autre : Stasis. Pourquoi ? D’après StaticGen c’est le seul qui ressort avec le filtre “Typescript”.

Deuxième sélection

Pour chacun des sélectionnés, je vais “simplement” parcourir la documentation pour me faire une idée. Le but est en d’en lister deux max si possible pour la suite des actions :).

Jekyll

Le step by step tutorial donne envie tellement cela paraît simple. Le langage de template (Liquid) est très similaire à ce que j’utilise.

Par contre, le côté ruby me gêne … Je n’ai jamais été très tenté par ce langage (c’est purement du ressenti …) et j’ai déjà une version de ruby sur ma machine, donc je vais devoir passer par de la conf …

Après dans les 30 minutes accordées, je n’ai pas pu voir le rendu en termes d’output … ni le déploiement…

Gastby.js

Ce serait le framework qui monte dans le domaine. Déjà premier point, via npx j’ai pu crée un site en quelque secondes et donc regarder un peu ce qu’il y a dedans …

Les premiers exemples montrent qu’il utilise React que je ne connais pas mais est-ce que cela pourrait être l’occasion un premier test ?

La difficulté que j’ai identifiée est dans le déploiement. En fait, le site généré n’est pas 100% static car l’ouvrir directement un navigateur ne fonctionne pas. Bon après, il y a peut-être une solution mais dans les 30 minutes : pas trouvé.

UPDATE : J’ai trouvé cet échange qui semble indiqué que ce n’est pas forcément le cas : https://github.com/gatsbyjs/gatsby/issues/4610.

J’aurais peut-être du prendre Next.Js …

Hugo

Au suivant … Bon, il à l’air bien celui-là ! Son seul défaut: il est basé sur Go mais les premiers pas semblent montrer que c’est principalement la partie template dans laquelle il faut jouer.

Forcément, j’ai cherché et pour le coup, il semble que l’élément généré soit vraiment un site static de base que l’on peut déposer n’importe où et çà: c’est bien !

Hexo

Le sous-titre est assez explicite : “A fast, simple & powerful blog framework”. Même si tous les autres mettent en avant le côté blog, ici c’est carrément dans le titre. De plus, il y a tout un chapitre qui est dédié à comment migrer et dans la liste, il y a les différents moteurs de blog les plus populaires.

Après, je pense qu’il doit être possible de l’utiliser pour faire autre chose. Il ne semble pas lié à framework particulier et semble compatible avec différents types de template dont “Nunjuncks“ que j’avais choisi un peu par erreur mais que bon … je connais :).

Stasis

Bon … ca à l’air bien mais c’est en alpha de chez alpha !

Bilan

Alors c’est pas facile mais j’exclus Gatsby pour le fait que finalement il ne génère pas un site statique. De même Jekyll pour le coté Ruby.

Reste Hugo / Hexo …

Hugo semble être là pour générer des sites statiques et c’est finalement le template qui fait le taf.

Hexo c’est pareil au final (le template gère) mais semble être fait pour du blog … Après cela reste du javascript et en terme de langage de template.

Choix

Je vais pas le faire … Je vais faire les tutos de bases de deux pour décider :).

Hexo

Quelques notes …

  • Lien : https://hexo.io/docs/
  • Commandes générales :
    • npx hexo init ga-hexo # Génération du projet,
    • hexo server # Lancement du serveur local,
    • hexo server -l # Avec des logs
    • hexo server --draft # Idem mais en mode draft
    • hexo generate --watch --bail # Permet d'avoir une génération en continue et la remontée des erreurs
  • Génération de contenu :
    • hexo new [name] # Genère le contenu par defaut (_config.yml.default_layout)
    • hexo new [content] [name] # Idem mais pour un autre type de content (post, draft, page ...)
    • hexo publish [name] # pour publier le brouillon
  • Petites choses :
    • Sans le bail, le générateur ne retourne pas les erreurs,
    • Un changement de thème n’est pas pris en compte par le watch,
    • Il faut parfois relancer le serveur pour que les modifications soient pris en compte.

Retour

Le sous titre était clair : c’est un générateur de blog. Honnêtement, entre les thèmes et les datas, je pense qu’il est possible d’en faire autres choses mais l’effort serait conséquent et instable.

Il y a très longtemps, j’avais fait un template WordPress et quand je vois la page des variables et des helpers, j’ai un gros sentiment de déjà vu.

Un point qui me pose question : la gestion des fichiers “content” avec le site devenant “gros” … Je me dis que cela ne doit pas être évident …

Hugo

Liens

Quelques notes

Retour

L’outil est puissant et dispose de nombreuses fonctionnalités et donc méritent plus de temps. La génération est rapide et les concepts très similaire à ceux vus sur Hexo.

Par contre, la syntaxe de template est pas ultra évidente ou innée … Quelques exemples :

  • Un if : if and ($var1 eq $var2) ($var1 eq $var3),
  • Un filtre sur une liste : range where (where .Site.Pages ".IsNode" true) ".Type" "==" "categories"
  • La syntaxe du passage d’infos entre template ou shortcode …

Après, d’après la documentation, il s’agit de librairies issues du monde Go qui est le langage de Hugo :).

Bilan Final

Entre les deux derniers, mon choix va vers Hugo car les templates présents/disponibles semblent beaucoup plus ouverts en terme de type de sites déployés.

Maintenant ce choix n’est pas définitif. Je vais répondre à mon besoin immédiat via Hugo mais pour le prochain, je referais sans doute une sélection.

Mais ça … c’est pour un autre demain.