Hexo est un framework construit avec nodejs permettant de créer rapidement et facilement un blog. A l’instar de wordpress ou d’autres plateformes de blog, les articles et contenus ne sont pas stockés en base de données mais sous forme de fichiers écrits avec le langage markdown . Ces fichiers markdown seront ensuite compilés en fichiers html.
Comme toute nodejs application, plusieurs commandes existent et permettent de créer une page, un post, une catégorie, générer des fichiers statiques, déployer sur un serveur :
- git
- heroku
- netlify
- rsyncSFTP
- SFTP.
Si on veut changer de plateforme – par exemple de wordpress, jekyll, octopress , joomla vers hexo ou d’importer un flux rss, celà est également possible.
Installation
Prérequis
Installons nodejs si ce n’est pas dejà fait.
- nodejs
Si ce n’est pas encore fait, l’installation est très simple. Sur Windows, il faut aller sur https://nodejs.org/en/ et télécharger l’installeur
On vérifie ensuite la bonne installation de node en tapant ceci dans la console :
node -v
v12.4.0
Installation de hexo
On installe hexo-cli en global
npm i hexo-cli -g
Retour de la console
+ hexo-cli@2.0.0
On crée une application hexo dans un dossier blognodejs
hexo init blognodejs
On va dans ce dossier et on installe les dépendances.
cd blognodejs/
npm install
On veut tout de suite générer les fichiers statiques (.html, css, javascript) dans le dossier public. Ce sont les contenus de ce dossier qu’il faudra envoyer dans un espace FTP pour que le blog soit accessible via un URL. Il suffit de lancer cette commande.
hexo generate
Si on voulait générer automatiquement les fichiers .html après leur création/modification – on ajoute le paramètre –watch
hexo generate --watch
Avant de déployer le blog sur un serveur de production, observons d’abord le rendu en local.
hexo possède un serveur nous permettant de voir cela facilement. Il suffit alors de lancer:
hexo server --draft --open
Le paramètre :
- –draft permet d’afficher les brouillons (car ils sont cachés par défaut)
- –open lance le navigateur et ouvre l’adresse http://localhost:4000 lorsque le serveur est prêt
Si le port 4000 est déjà utilisé par une autre instance, on peut choisir un autre port en passant le paramètre -p comme ceci
hexo server -p 4500
INFO Start processing
INFO Hexo is running at http://localhost:4500 . Press Ctrl+C to stop.
Pour afficher la liste des URLs existantes.
hexo list page
Voici le retour de cette commande
INFO Start processing
Date Title Path
2019-06-21 About me about/me.md
2019-06-21 Bonjour bonjour.md
2019-06-21 Bonjour Miary hello/miary.md
Un petit aperçu du blog.
On veut maintenant afficher un menu dynamique sur toutes les pages du blog.
Créons un dossier.
mkdir -p source/_data
Et ajoutons un fichier menu.yml dans ce dossier.
touch source/_data/menu.yml
qui contiendra le code suivant.
Accueil: /
Photos: /photos/
Articles: /archives/
- A gauche (du « : ») : le titre du menu
- A droite (du « : ») : l’URL de destination
Affichons ces menus sur toutes les pages. Pour cela, modifions le fichier /themes/landscape/layout/_partial/header.ejs et ajoutons
<% for (var link in site.data.menu) { %>
<a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>
Voici le résultat
Plugins
Comme dans wordpress, il est possible avec hexo d’installer des plugins pour ajouter des fonctionnalités utiles à notre besoin.
Nous aurions besoin des plugins suivants dans un premier temps :
- hexo-browsersync
- hexo-lazyload-image
- hexo-wordcount
hexo-browsersync
Parce qu’on n’a pas envie de rafraîchir la page à chaque fois qu’on fait une modification, on va laisser au navigateur de faire cela. Il nous faut installer le package suivant.
npm install hexo-browsersync --save
Arrêter à nouveau le serveur en faisant (CTRL+C) puis lancer le à nouveau via la commande suivante :
hexo server
hexo-lazyload-image
Permet de présenter une icône de chargement (loading) avant l’affichage réel d’une image.
On installe
npm install hexo-lazyload-image --save
Dans le fichier /_config.yml, on ajoute les paramètres du plugin
lazyload:
enable: true
onlypost: false
loadingImg: # eg ./images/loading.gif
Il suffit ensuite d’arrêter à nouveau le serveur en faisant (CTRL+C) puis lancer le à nouveau via la commande suivante :
hexo server
Et à partir de là, une icône de chargement s’affiche avant de présenter l’image.
hexo-wordcount
Permet d’ajouter des informations utiles à un post par exemple : le nombre de mots, le temps de lecture estimé.
On installe
npm install hexo-wordcount --save
Deploiement
Nous avons terminé la rédaction de notre premier post. Il est temps d’envoyer cela sur un serveur car l’article a besoin d’être lu assez rapidement.
Il nous faut faire quelques modifications avant de lancer le déploiement.
Dans notre cas, nous allons publier (git push
) le code source sur Gitlab . Ensuite un webhook communiquera avec notre serveur pour tirer (git pull
) les commits.
Installons le plugin hexo-deployer-git permettant de faire un déploiement via git
npm install hexo-deployer-git --save
Modifions le fichier /_config.yml et ajoutons ceci
deploy:
type: git
repo: git@gitlab.com:miary/hexo.git
branch: prod
message: # messg laisser vide - par défaut "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"
lancons ensuite le deploiement
hexo clean && hexo deploy
Retour
INFO Deleted database.
INFO Deleted public folder.
INFO Start processing
INFO Files loaded in 575 ms
INFO Generated: index.html
INFO Generated: archives/index.html
...
INFO 17 files generated in 1.39 s
* Bonus
Ecrire en markdown
Comme précisé plus haut, les pages doivent respecter le format markdown. Il n’est pas facile au début d’apprendre ce langage bien qu’il soit pratique et simple lorsqu’on prend l’habitude.
Un outil gratuit en ligne wysiwyg (What You See Is What You Get) existe et permet de nous aider à écrire du markdown. Cet outil se nomme stackedit .
Plugins markdown
J’utilise principalement PHPSTORM comme IDE. J’ai ajouté 2 plugins qui m’aident bien à écrire du markdown:
- Markdown Navigator :
Editeur de markdown plus complet que l’éditeur par défaut proposé par le logiciel. Des barres d’outils supplémentaires permettent de : ajouter des liens, tableaux, listes à puces… - Paste Image To Markdown
Permet d’ajouter une image copiée et d’enregistrer cette image dans un dossier spécifique.
Bookmarks et Webographie
Mise à jour du 27/06/2019
Logiciels
Voici une liste de logiciels gratuits pour écrire/et ou lire du markdown :
- typora – développé avec Electronjs – fonctionne sous windows, linux et macOSX (en version beta)
- boostnote – fonctionne sous windows, linux et macOSX
- markdownpad – fonctionne sur windows
- markdownedit – fonctionne sur windows
[Mise à jour] 28 juin 2019
Quelques commandes hexo
utiles
- Créer une page
hexo new page "Bonjour, bienvenue sur ma premiere page !"
Le fichier suivant sera créé
source/Bonjour-bienvenue-sur-ma-premiere-page/index.md
- Créer un post
hexo new post "Le titre de mon blog"
Le fichier source/_posts/Le-titre-de-mon-blog.md sera créé
- Créer un post en spécifiant son nom
hexo new post je-veux-donner-nom-post
Le fichier source/_posts/je-veux-donner-nom-post.md sera créé
- Créer un brouillon
hexo new draft "Brouillon du post"
Le fichier source/_drafts/Brouillon-du-post.md sera créé
- Publier un brouillon
hexo publish post Brouillon-du-post
Remarquons ici qu’il faut prendre le nom du fichier markdown créé dans source/_drafts/
Cette commande déplace le fichier source/_drafts/Brouillon-du-post.md vers source/_posts/Brouillon-du-post.md