Depuis 2 ans environ, j’écrivais mes retours d’expériences sur un bon vieux WordPress. WordPress un outil universel, connu et utilisé par tout le monde, s’installant facilement et permettant avec un faible investissement, de créer des thèmes, des extensions…
Oui mais aujourd’hui, voilà pourquoi je me suis décidé à quitter WordPress :
- J’utilise WordPress pour créer des contenus statiques et par conséquent, je n’ai pas de réel intérêt de générer une page dynamiquement à chaque fois.
- WordPress est lent et malgré mon investissement, rien n’y fait, 1 seconde pour toujours ressortir le même contenu, c’est trop.
- Je suis développeur PHP, et PHP est langage de » templating » mais je ne supporte pas de voir des mélanges de templates et de code métier…
- … Par conséquent, je n’ai jamais pris le temps de personnaliser mon thème. J’utilisais le thème officiel de WordPress qui était chargé, ne prenait pas toute la largeur de l’écran et formattait l’essentiel de mon travail dans une colonne de plus ou moins 350px… !
Oui, mais quels sont les inconvénients ?
D’une manière plus générale, les générateurs statiques comme Hexo ou Jekyll génère du contenu… statique et ne laisse donc pas la place au contenu nécessitant des traitements comme des commentaires. Ce problème m’a longtemps embêté et j’ai finalement tranché en faveur de Disqus. Avant de me décider j’ai quand même étudié un peu les projets et voici ce que j’en ai retenu.
- Disqus (ou tout autre SaaS) décentralise votre contenu. Les commentaires ne sont pu votre propriété. Il existe un importeur et un exporteur. Malgré cela, aucune maintenance chez vous.
- Des solutions comme Isso ou Discours vous permettent d’avoir un système similaire chez vous mais cela implique de sauvegarder le contenu (problème que nous avions déjà avec WordPress), mais également de vous assurer du bon fonctionnement de votre SMTP (problématique déjà connue)…
- Déporter les commentaires vous permet également d’héberger votre blog sur GitHub par exemple.
Isso
Isso est une super alternative qui ressemble fortement à Disqus mais pêche sur quelques détails.
- Pas de Back-end pour administrer les commentaires.
- Dans mes tests, j’avais lu qu’on pouvait modérer les commentaires via un lien disponible dans un mail ou dans les logs. Je n’ai jamais vu ces liens et j’aurai donc dû effectuer des requêtes en BDD.
En dehors de cela, Isso était LE produit idéale. Je ne doute pas qu’il continue de grandir et que bientôt j’écrirai un article pour migrer de Disqus à celui-ci.
Discours
Discourse était la seconde alternative mais je ne l’ai pas réellement testé. Celui-ci propose une version payante et ces pré-requis techniques m’ont rapidement arrêté.
Pourquoi Hexo et pas Jekyll
La réponse est simple. Jekyll est en Rubis alors que Hexo est en JavaScript (Node.js). J’aime la syntaxe JS et par conséquent il était plus simple pour le personnaliser, comprendre, …
|
1 2 3 4 |
$ $ npm install -g hexo-cli $ $ hexo init my-blog && ; cd my-blog |
Et voilà, votre projet est prêt. Vous pouvez le versionner.
Avec cette simple commande, vous pouvez accéder à un serveur Node.js qui vous fait le rendu en temps réel. L’adresse est généralement http://localhost:4000.
Hexo a mis en place de nombreux outils pour migrer vos contenus. Pour WordPress, cela est très simple.
|
1 2 3 |
$ npm install hexo-migrator-wordpress -save $ $ hexo migrate wordpress /path/to/file_exported.xml |
Pour migrer le contenu, vous n’avez besoin de rien de plus. La difficulté réside à migrer les pièces jointes (comme les images). Dans le dossier source/_posts vous devez créer un dossier portant le même nom que le fichier de votre article.
Exemple, pour le article dessine-moi-un-mouton.md vous devez créer un dossier dessine-moi-un-mouton.
Dans ces dossiers, vous copierez les images de votre WordPress. Vous devrez ensuite re-passer sur vos articles et changer la source. Dans mon cas, les images chargées sont restées sur la source initiale.
Exemple :
|
1 2 3 4 5 6 7 |
# Avant  # OU < ;img src= » https://mon-blog/wp-content/mon-image.png « /> ; # Après  |
Pourquoi spécifier le nom du dossier dans le chemin de mon image ?
Vous pourriez tout à fait charger l’image de cette manière.
|
1 |
 |
Cela pose rapidement un problème. Sur la page de l’article, l’image sera bien chargée car elle est relative à la page en cours, mais sur votre page d’accueil, l’image sera chargée par rapport à la page d’accueil et vous verrez alors une 404 Not Found.
La configuration
Pour copier les images, vous devrez mettre cette configuration dans votre _config.yml.
|
1 2 |
post_asset_folder : vrai |
Le principal problème une fois le contenu migré est de ne pas perdre le référencement naturel. Il s’agit du nerf de la guerre et j’ai contourné le problème assez facilement.
Les articles
Initialement, les articles ont pour URL :année/:mois/:jour/:titre. Dans WordPress, il n’y a généralement que le titre. Mettez dans votre _config.yml cette valeur.
Les catégories
Avec les catégories, c’est un peu la même histoire. Cette fois le chemin est quasiment le même. Dans WordPress, c’est catégorie/ et dans hexo catégories/ (par défaut). Voici comment le changer.
|
1 2 |
category_dir : catégorie |
Avec les tags, c’est toujours la même histoire. Dans WordPress, c’est tag/ et dans hexo tags/ (par défaut). Voici comment le changer.
Les archives
C’est la partie la plus technique et la plus simple à la fois. Dans WordPress, les archives se trouvent dans année/mois/ et dans hexo c’est archives/année/mois/. Dans mon cas, je ne voulais pas changer le chemin dans hexo et je voulais garder cette nouvelle façon de faire.
Voici la redirection Nginx à mettre en place.
|
1 2 3 4 5 6 7 |
serveur { … localisation / { rewrite ^/(d{4})/(01|02|03|04|05|06|07|08|09|10|11|12)/archives/$1/$2/ permanent ; } } |
Cette regex est loin d’être la plus parfaite mais elle sera redoutable.
Autre
Concernant, les attachements vous devez faire une petite redirection mais dans tous les cas, la perte de référencement sera moins préjudiciable.
Voici comment faire une redirection avec Nginx.
|
1 2 3 4 5 6 7 |
serveur { … emplacement / { rewrite ^/dessine-moi-un-mouton/mon-image/$ /dessine-moi-un-mouton/mon-image.png permanent ; } } |
Et si Google voit une redirection vers une 404 ?
Pas de soucis, avec cette condition dans Nginx, aucun problème. On redirige toutes les 404 vers la page d’accueil.
|
1 2 3 4 5 6 7 8 9 |
serveur { … error_page 404 @fallback ; location @fallback { rewrite ^/ / permanent ; } } |
Via Disqus, voici le lien qui vous permettra de facilement importer vos commentaires WordPress.
Il existe un projet permettant de facilement générer un sitemap avec Hexo. En bref, voici comment faire.
|
1 |
$ npm install hexo-generator-sitemap -save |
|
1 2 3 |
sitemap : chemin : sitemap.xml |
Avec un petit investissement, on migre facilement son contenu. Un petit passe pour vérifier que les articles ont correctement été migré et c’est emballé. Dans mon cas, je n’ai que 23 règles de redirection pour tout mon site. Easy ?