Derniers billets

Hexo, un générateur de blog statique sous node.js - il y a 2 mois

Bonjour - il y a 2 mois

Me contacter

Voir le profil de Yann Rocq sur LinkedIn

Hexo, un générateur de blog statique sous node.js

05-04-2016

Comme vous l’avez peut-être remarqué à sa vitesse de chargement foudroyante, ce site n’utilise ni Drupal ni Wordpress. Je profite de la résurrection de ce blogue pour explorer le logiciel Hexo.

Alors que les gestionnaires de contenu populaires construisent dynamiquement les pages web visitées, le plus souvent à l’aide du duo PHP/MySQL, cet outil génère localement la totalité des fichiers HTML du site. Ces derniers peuvent ensuite être envoyés sur le serveur, qui les diffusera tels quels, sans traitement additionnel.

Outre la vitesse, cette approche offre de nombreux avantages :

  • L’auteur peut écrire le brouillon de ses billets sans être connecté à Internet, avec l’éditeur texte de son choix.
  • Les billets étant stockés dans des fichiers, ils sont très simples à manipuler (renommage, déplacement, archivage...)
  • Il est facile de migrer un site d’une machine à l’autre, par exemple, lors d’un changement d’hébergeur.
  • Pas besoin de base de données ou de PHP.
  • Aucune mise à jour de sécurité du site n’est requise, puisque le code ne s’exécute pas sur le serveur.

Pourquoi Hexo ?

Aujourd’hui, Jekyll est sans conteste la superstar des générateurs de site statique. C’est un logiciel mature et puissant, que j’aurais probablement adopté s’il n’avait pas été écrit en Ruby. Hexo a pour moi l’avantage de reposer sur node.js, tout en disposant d’une architecture solide, qui n’a rien à envier à son prédécesseur. En raison de son plus jeune âge, il bénéficie d’un plus petit nombre d’extensions, mais c’est selon moi une excellente occasion d’apprendre en en créant de nouvelles.

Pour utiliser Hexo, il suffit d’installer globalement le paquet npm hexo-cli :

1
npm install hexo-cli -g

Ce dernier offre l’outil en ligne de commande hexo, dont nous allons abuser tout au long de cet article. Pour créer un nouveau site monblog, placez-vous dans le répertoire souhaité et tapez :

1
hexo init monblog

Vous devriez obtenir un nouveau répertoire monblog, avec le contenu suivant:

Vous pouvez immédiatement tester le site en entrant les commandes :

1
2
cd monblog
hexo server

Notez que la plupart des commandes hexo doivent être lancées à la racine de votre installation (ici, monblog). Vous obtiendrez en réponse une URL locale. Par exemple:

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

Chargez-la avec votre navigateur pour admirer Hexo avec son thème par défaut.

La sous-commande server est très pratique pour parcourir le site localement, sans besoin de générer les pages après chaque modification (il vous suffit de sauvegarder le fichier et de rafraichir votre navigateur). Elle ne doit surtout pas être utilisée en production. Vous pouvez quitter ce mode avec ctrl-c.

À présent, créez votre premier billet en tapant:

1
hexo new post "Mon premier billet"

La sous-commande new prend deux paramètres : un type de contenu et un titre. Par défaut, il existe deux types de contenu : post (billet), et page. La seule différence est que les pages ne possèdent pas de date et ne sont pas affichées sur la page d’accueil.

Si tout s’est bien passé, Hexo devrait vous indiquer le chemin du nouveau fichier qu’il a créé pour votre billet. Ouvrez-le avec votre éditeur de texte. Il devrait ressembler à ceci:

1
2
3
4
5
6
7
---
title: Mon premier billet
date: 2016-04-05 15:57:28
tags:
- hexo
- test
---

La section placée entre deux groupes de trois tirets contient les métadonnées de votre billet (en anglais, « front matter »). Par défaut, elle inclut les champs pour le titre, la date, et les tags. Vous pouvez les modifier librement en tenant compte de certains critères :

  • Le champ title ne désigne que le titre affiché dans les pages. Si vous souhaitez changer l’URL du billet, vous devez renommer le fichier.
  • La date doit respecter le format YYYY-MM-JJ HH:MM:SS
  • Les tags doivent être insérés chacun sur sa ligne, précédé d'une espace et d'un tiret.

Le texte de votre billet doit être inséré après cette section. Par défaut, les billets doivent être écrits au format markdown. Par exemple:

1
2
3
4
5
6
7
8
9
---
title: Mon premier billet
date: 2016-04-05 15:57:28
tags:
- hexo
- test
---
# Bonjour !
Ceci est un *texte en gras*

N’oubliez pas d’utiliser la commande hexo server pour voir vos modifications.

Un peu de configuration

Vous pouvez personnaliser vos réglages en éditant le fichier *_config.yml,*à la racine du répertoire local. Le champ le plus important est URL. Il doit être renseigné avec l’adresse du site web sur lequel sera publié votre contenu. Si elle est erronée, les liens de vos pages le seront également. Les changements du fichier _config ne sont pas pris en compte par hexo server. Vous devrez relancer le programme après chaque modification pour les voir.

Choississons maintenant un nouveau thème pour notre blogue. Hexo en propose quelques-uns sur le site officiel. La plupart sont téléchargeables via git. Ils doivent être placés dans le sous-répertoire themes. Par exemple:

1
2
cd monblog
git clone https://github.com/cgmartin/hexo-theme-bootstrap-blog.git themes/bootstrap-blog

Il ne vous reste plus qu’à changer la variable theme de votre 2fichier _config.yml :

1
theme: bootstrap-blog

Chaque répertoire de thème contient lui aussi un fichier _config.yml, pour stocker les réglages qui lui sont propres. Contrairement à celui du site principal, les modifications de ce dernier sont prises en compte par hexo server.

Publions, mes frères

Vous voici maintenant à l’étape suprême où vous allez livrer votre blogue à l’humanité. Il vous suffit de taper la commande:

1
hexo generate

Les fichiers statiques seront exportés dans le répertoire public. Vous pouvez les copier à la racine de votre site web à l’aide de votre logiciel de FTP préféré.

Une autre option consiste d’exploiter l’un des modules de déploiement fourni par Hexo. J’utilise personnellement le module rsync, qui permet de téléverser les fichiers par SSH, via le programme du même nom. Pour l’installer, placez-vous à la racine de monblog et tapez :

1
npm install hexo-deployer-rsync --save

Ajoutez ensuite les lignes suivantes à la fin du fichier _config.yml

1
2
3
4
5
6
deploy:
type: rsync
host: [nom du serveur]
user: [nom de l’utilisateur ]
root: [chemin de la racine du site web]
port: 22

Désormais, vous aurez besoin d’une seule commande pour téléverser votre site:

1
hexo deploy

Retour d’Hexopérience

J’utilise hexo au quotidien depuis plusieurs semaines, et c’est l’un des outils de publications les plus agréables que j’ai utilisés. J’aime la souplesse et l’impression de contrôle qu’il m’apporte. Son approche statique implique certes quelques limitations. Par exemple, il est impossible de supporter les commentaires sans utiliser un service tierce comme Disqus. Il s’avère également peu adapté à un site multiutilisateur. Pour des simples besoins de blogage, c’est en revanche une option à considérer pour toute personne qui souhaite éviter la lourdeur et la complexité des gestionnaires de contenu classiques.

Bonjour

23-03-2016

Je m’appelle Yann Rocq, je suis développeur web et j’habite à Montréal.

J’ai plus de quinze ans d’expérience en développement PHP, dont neuf avec le gestionnaire de contenu Drupal.

Je possède une très bonne connaissance de JavaScript (notamment JQuery), que je complète actuellement par le développement de projets Node.js et AngularJS.

Vous trouverez sur ce blogue le fruit de mes explorations dans ces différents domaines, ainsi que mon opinion sur les sujets technologiques qui me tiennent à cœur.

Je suis disponible pour des mandats de développement, directement pour une compagnie ou pour une agence web. Vous pouvez me contacter sur ma page LinkedIn.

Je ne recherche pas un poste permanent. Les offres des agences de placement ont peu de chances de m’intéresser.