J'ai abandonné Wordpress

Wordpress commençait à me fatiguer et j'avais besoin de plus de simplicité. Je me suis alors intéressé aux différentes solutions qui permettent la création de sites Web statiques. J'avais besoin d'un système sans base de données et avec un langage que je maîtrise. J'ai donc regardé du coté de JavaScript et en particulier Node.js, c'est ainsi que j'ai découvert Poet.js

Poet.js : générateur de blog

Basiquement Poet est un module Node.js qui permet d'écrire ses articles avec un langage de template au choix (Markdown, Jade...). Pour chaque article, on écrit un fichier qui comporte un objet JSON avec les méta-données de l'article (titre, tags, catégorie, date, auteur, prévisualisation) suivit du corps d'article. Les articles sont automatiquement affichés par date de publication avec pagination. Il est également possible de lister les tags et les catégories. Les articles sont chargés au lancement de l'application, les performances d'affichage sont donc excellentes. Les URI des articles reprennent le nom des fichiers.

Il existe un outil très simple pour éditer et visualiser en Markdown. Avec StackEdit, il est même possible de publier les fichiers (en vrac : GitHub, Dropbox, SSH ... Wordpress )

Créer son blog statique

Le plus simple est de partir de l'exemple et de l'adapter à ses besoins. J'ai traduit l'ensemble des éléments en français et j'ai adapté le design en modifiant le layout. J'ai également configurer les routes afin de respecter les URI que j'avais avec Wordpress et éviter de casser mon référencement et éviter les 404 pour tout les sites qui peuvent faire référence à l'un de mes articles.

  routes: {
    '/:post': 'post',
    '/page/:page': 'page',
    '/tag/:tag': 'tag',
    '/category/:category': 'category'
  }

Au passage, sachez que les URI sont importantes pour le référencement. Il est donc intéressant de prendre soin de donner des noms pertinent à vos fichiers. Le nom se retrouvera directement dans la barre d'adresse du navigateur, ce sera plus jolie aussi

Etendre les fonctionnalités

Comme nous avons une application Express.js entre les mains, il est tout à fait possible de développer une partie serveur. Je ne m'en suis pas privé pour créer mon flux RSS.

Dans main.js :

app.get('/rss', function (req, res) {
  var posts = poet.helpers.getPosts(0, 10);
  res.setHeader('Content-Type', 'application/rss+xml');
  res.render('rss', { posts: posts });
});

Puis mon template rss.jade :

doctype xml
rss(version='2.0', xmlns:atom='http://www.w3.org/2005/Atom')
  channel
    title Loïc Guillois » conception d'applications Web, Mobile et TV
    link http://www.loicguillois.fr
    description conception d'applications Web, Mobile et TV
    atom:link(href='http://www.loicguillois.fr/rss', rel='self', type='application/rss+xml')
    each post in posts
      - var fullUrl = 'http://www.loicguillois.fr/' + post.url
      item
        title= post.title
        link= fullUrl
        description
          | 
        pubDate= post.date.toUTCString()
        guid= fullUrl

On peut également ajouter d'autres pages, pourquoi pas pour un formulaire de contact. Si un plugin Wordpress vous manque, à tout les coup avec un peu de développement il sera facile de le remplacer en s'appuyant sur l'un des modules Node.js. Si je prend l'exemple d'une galerie photo, le module node-gallery fera l'affaire.

Gestion des commentaires

Sans base de données, difficile de stocker des commentaires. Par défaut, ceux-ci sont donc absent. Il y a la possibilité d'utilisé la plateforme de commentaire la plus répandue : Disqus. Il suffit de créer un compte qui vous permettra de gérer directement vos commentaires (modérer, répondre...). Vous aurez alors la possibilité d'exporter un widget sous forme de code à copier-coller.

var disqus_shortname = 'xxx'; // required: replace example with your forum shortname

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

L'avantage de cette solution est qu'elle vous protège plutôt bien des spams et qu'elle permet de ne pas charger votre serveur. Les pages peuvent être mise en cache sans problème étant donné les commentaires sont chargés en Ajax. De plus, si vous avez plusieurs blog cette solution vous permet de gérer les commentaires en un seul endroit. Disqus est multilingue, vous pouvez donc intégrer le widget dans la langue de votre choix.

Bien sûr, il est possible de récupérer vos anciens commentaires, il suffit de se connecter sur votre Wordpress et d'aller dans le menu Outils > Exporter. Vous n'avez plus qu'à télécharger Tout le contenu. Vous allez ainsi récupérer un fichier XML (WXR). Connectez vous ensuite à Disqus puis allez sur l'onglet Discussions puis Import. Vous n'avez plus qu'à envoyer le fichier. La procédure peut prendre jusqu'à 24h et sera réalisé en arrière plan, pour moi ça n'aura duré que quelques minutes.

Il se peut que vos commentaires soit associés à des URL avec un slash de fin (trailing slash), le problème c'est que Disqus ne va pas y associé les commentaires car pour lui (et pour Google), il s'agit de pages différentes. La solution est d'utiliser l'outil de migration dans Discussions > Tools. Il suffira de créer un simple fichier CSV de correspondance ancienne URL -> nouvelle URL.

Intégration des réseaux sociaux

Alors que Wordpress propose des plugins plus ou moins lourd à installer, ici on peut se contenter de récupérer les widgets officiels de chacun des réseaux :

Ce qui donne par exemple pour Google+

<div class="g-plusone" data-annotation="inline" data-width="300"></div>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Pourquoi faire plus compliquer ?

Colorisation syntaxique

Cela ne vous aura pas échappé: le code source est en forme et colorisé. Non, je ne me suis pas amusé à le faire moi même. J'utilise Prettify. Son utilisation est simple, il suffit de récupérer la feuille de style qui vous convient parmis plusieurs disponibles ainsi que le fichier javascript qui ne fait que 15Ko. Ensuite, on définit le bloc de cette manière :

<pre class='prettyprint'>
[MON CODE]
</pre>

Vous n'avez plus qu'à appeler la fonction JavaScript prettyPrint() une fois la page chargée, soit si vous utilisez jQuery :

$(document).ready(function() {
   prettyPrint()
});

Sinon, plus simplement :

<body onload="prettyPrint()">
...
</body>

Bien sûr s'il s'agit de code HTML, il sera nécessaire de l'échapper avec un outil.

Hébergement du blog

Vous aviez Wordpress sur un serveur mutualisé ? Pas de problème, il existe de nombreuses solutions :

Sinon, il y a toujours la possibilité de l'héberger sur un petit serveur :

Conclusion

Finalement, ma plus grande satisfaction c'est de reprendre la main sur mon blog. Avec Poet, il est facile de maîtriser de bout en bout le contenu HTML et la forme des URI. Les mécanismes mis en oeuvre sont simples et il est facile d'aller voir dans le code source de Poet pour modifier son comportement ou comprendre comment fonctionne tel ou tel aspect. Le fait que le site soit statique et sans base de données le rend également plus performant et plus simple à sauvegarder. J'utilise un dépot privé Git pour l'ensemble du contenu, ainsi à chaque commit d'article, j'ai ma sauvegarde. C'est plus rassurant qu'une base de donnée MySQL. Le déploiement est plus simple et donc la restauration aussi en cas de problème.

Travailler à plusieurs est aussi très simple grâce justement à l'utilisation d'un outil de gestion de version comme Git. Il est possible de travailler hors ligne et donc d'avoir un aperçu avant de mettre en production.