Migration de worpdress à Pélican

2016 débute par un gros changement pour moi. Je pars de chez mon hébergeur adoré gandi pour aller chez Scalway (succursale de Online). Si je pars, ce n'est pas par désamour pour gandi (je suis un grand fan, je les aime ! GANDI \o/), mais parce que je souhaitais passer d'un hybride de serveur mutualisé (les Simpe Hosting) à un serveur dédié. Et les prix chez gandi sont hors budget pour moi.

Quitte à changer de serveur, pourquoi ne pas changer le reste ? J'abandonne donc mon bon vieux Wordpress. Plusieurs raisons :

Installation de Pelican

La documentation est assez complète, et son l'installation n'est pas ce qu'il y a de plus compliqué. Mais une petite précision s'impose : Pelican s'installe sur son PC. Le serveur est là pour afficher le contenu, mais n'a pas vocation à accueillir toute l'installation.

Donc, sur son PC, on va commencer par installer virtualenv, qui a pour vocation de créer un environnement Python fermé (pour éviter de foutre le bordel partout) :

# En root (vers l'aventure)
apt install virtualenv

# En utilisateur
virtualenv ~/virtualenvs/pelican
cd ~/virtualenvs/pelican
source bin/activate

source bin/activate permet d'activer l'environnement pelican (vous verrez alors (pelican) à gauche de votre terminal). Pour en sortir, il suffit de taper deactivate.

J'ai utilisé le chemin ~/virtualenvs/pelican, mais vous pouvez utiliser celui que vous souhaitez, comme par exemple ~/Dev/Site/pelican

A partir de là, on a plus qu'à installer Pelican :

pip install pelican

# Ou, si on veut la version deluxe
pip install pelican markdown typogrify

Ensuite... On installe vraiment la bête (ce qu'il y a entre les crochets [] représente la valeur par défaut, tout comme les Y ou N (en majuscules) - il suffit alors de taper sur Entrée pour valider) :

pelican-quickstart
> Where do you want to create your new web site? [.] # là où vous êtes
> What will be the title of this web site? SpF
> Who will be the author of this web site? SpF
> What will be the default language of this web site? [en] fr
> Do you want to specify a URL prefix? e.g., http://example.com   (Y/n) y
> What is your URL prefix? (see above example; no trailing slash) http://sanspseudofix.fr # pas de / à la fin
> Do you want to enable article pagination? (Y/n) y
> How many articles per page do you want? [10]
> What is your time zone? [Europe/Paris]
> Do you want to generate a Fabfile/Makefile to automate generation and publishing? (Y/n) y
> Do you want an auto-reload & simpleHTTP script to assist with theme and site development? (Y/n) y
> Do you want to upload your website using FTP? (y/N) N
# Pour envoyer votre site depuis votre PC vers votre serveur en SSH
> Do you want to upload your website using SSH? (y/N) y
> What is the hostname of your SSH server? [localhost]
> What is the port of your SSH server? [22]
> What is your username on that server? [root]
> Where do you want to put your web site on that server? [/var/www] /var/www/html/pelican
> Do you want to upload your website using Dropbox? (y/N) N
> Do you want to upload your website using S3? (y/N) n
> Do you want to upload your website using Rackspace Cloud Files? (y/N) n
> Do you want to upload your website using GitHub Pages? (y/N) n
Done. Your new project is available at /var/www/html/pelican

Si je résume :

Make (installé par défaut sur les distributions GNU/Linux) permet de générer le site, de lancer le server de développement etc. L'auto-reload permet de relancer la génération de votre site en développement à chaque changements (que ce soit un changement d'un fichier de configuration, d'un article, d'un fichier CSS etc).

Importer son site Wordpress

Munissez-vous de votre import WordPress en .xml. Toujours dans son environnement Pelican :

(pelican)spf@debian$ pip install BeautifulSoup4 lxml
(pelican)spf@debian$ pip install feedparser
(pelican)spf@debian$ pelican-import --wpfile -m markdown -o content/ /chemin/vers/import.xml

-o content/ dans mon cas, veut dire -o ~/virtualenvs/pelican/content

Si vous rencontrez des erreurs concernant lxml avec Jessie : apt-get install libxml2-dev libxslt1-dev python-dev (merci ici)

Pour plus d'information : RTFM :)

It's alive! ALIIIIIVE!

Bah, en fait, pas encore. Pelican est installé sur votre PC (j'ai pas insisté là), mais ne tourne pas. Avant d'envoyer tout ça sur votre serveur via SSH (ou autre), il faut voir si il tient la route.

C'est maintenant que make (ou son copain Fabric) entre dans la partie (comme le mystérieux personnage dans la première scène).

(pelican)spf@debian$ cd ~/virutalenvs/pelican
(pelican)spf@debian$ pelican content/ # on génère le site
(pelican)spf@debian$ make devserver # on lance le serveur test

devserver permet de lancer le serveur local, pour les tests, et permet le rafraichissement automatique à chaque modification (expliqué plus haut). Vous pouvez désormais visualiser votre site à l'adresse http://localhost:8000 ou http://127.0.0.1:8000.

Faisons le point

. (celui-là fera l'affaire)

Jusque là, notre site a été généré : le contenu markdown se trouvant dans ~/virtualenvs/pelican/content/ est arrivé organisé dans ~/virtualenvs/pelican/output sous la forme html. On arrive à le voir en local (pour les tests) avec devserver (qu'on arrête simplement en faisant ctrl + c).

Le ficher central s'appelle pelicanconf.py (à la racine de votre dossier). Voici à quoi ressemble le mien :

#!/usr/bin/env python
# -*- coding: utf-8 -*- #
from __future__ import unicode_literals

AUTHOR = u'SpF'
SITENAME = u'SpF'
SITEURL = 'http://sanspseudofix.fr'
SITESUBTITLE = "Un site qui ne sert à rien, mais on ne sait jamais."

PATH = 'content' # où sont les posts
STATIC_PATHS = ['images'] # où sont les... images (bravo à ceux/celles qui ont trouvé)
TIMEZONE = 'Europe/Paris'

ARTICLE_URL = "{slug}/" # Correspondance avec wordpress (pour un modèle url/post/)
ARTICLE_SAVE_AS = "{date:%Y}/{slug}.html" # je range comme je veux

DEFAULT_LANG = u'fr'

DEFAULT_METADATA = {
'status': 'draft',
} # les nouveaux posts sont automatiquement sauvegardés en brouillon

# PLUGINS (expliqué plus bas)

# Les commentaires
ISSO_SERVER="http://isso.sanspseudofix.fr"

# THEME
THEME = "/home/spf/Documents/sanspseudofix/themes/pelican-hyde"
PROFILE_IMAGE = "le_piaf_ronchon-transparent.png"

# Feed generation is usually not desired when developing
FEED_DOMAIN = SITEURL
FEED_ALL_ATOM = 'feeds/all.atom.xml'
FEED_ALL_RSS = 'feeds/all.rss.xml'


DEFAULT_PAGINATION = 10

# Uncomment following line if you want document-relative URLs when developing
RELATIVE_URLS = True

Votre site n'est pas publié. Il est seulement en développement, en local. Pour le publier, vous devez faire :

pelican content -s publishconf.py

Maintenant, si vous avez choisi d'envoyer vos œuvres via SSH, vous devez faire :

make rsync_upload
# entrez ensuite votre mot de passe (donné via pelican-quickstart)

Cette commande revient à faire rsync -avc --delete output/ host.example.com:/var/www/your-site/, à savoir synchroniser votre dossier local avec votre serveur (cela supprime le contenu du dossier output, mais il est toujours présent dans content)

Félicitations, vous avez un site qui fonctionne (normalement).

Workflow

A la demande général du Nugget de Chocobozzz, voici comment je travaille.

Tout d'abord, un petit script bash (un jour, peut-être, il sera en Python) pour créer un post avec les méta-datas qui vont bien :

#!/bin/bash
#
# Script qui génère un template pour les posts Pelican
#

# On dégage les accents, espaces, "():,!?" etc du slug (l'URL du post),
# enlève un "-" éventuel avant .md, et met tout le slug en minuscules
# C'est moche et long, mais il faut ce qu'il faut
SLUG=$(echo $1 | sed "s/ /-/g;s/[():,!?]//g;s/'/-/g;s/[àâäÀÂÄ]/a/g; s/[éèêëÉÈÊË]/e/g; s/[îïÎÏ]/i/g; s/[ôöÖÔ]/o/g; s/[ûüùÛÜÙ]/u/g; s/[çÇ]/c/g; s/\(.*\)-$/\1/g" | tr "[:upper:]" "[:lower:]")

{
  echo "Title:" $1;
  echo "Date:" $(date +"%Y-%m-%d %H:%M"); # format 2012-08-09 15:33
  echo "Author: SpF";
  echo "Tags: ";
  echo "Slug:" $SLUG; # génération du slug
  echo "#Status: published";
  echo "Summary: ";
} > $SLUG.md

Mea culpa : une erreur s'était glissée. Ne pas mettre echo ".md";, puisque le slug n'a pas besoin d'avoir de .md, il sera ajouté à la génération du fichier. Sinon, vous vous retrouvez avec une URL comme ce post, avec un .md inutile... --'

echo "#Status: published"; permet de n'avoir qu'à supprimer # devant pour publier (Made in feignasse).

C'est pas le plus beau script du monde, mais il fait son boulot. On l'utilise en faisant ./script "titre du post" (n'oubliez pas les guillemets).

Par exemple :

post_generation.sh "Migration de worpdress à Pélican (et ISSO)"

donnera un fichier migration-de-worpdress-a-pelican-et-isso.md :

Title: Migration de worpdress à Pélican (et ISSO)
Date: 2016-01-28 00:18
Author: SpF
Tags:
Slug: migration-de-worpdress-a-pelican-et-isso.md
#Status: published
Summary:

Ce script est, bien sûr, Libre : vous pouvez le modifier à votre convenance, l'améliorer (et me donner vos tuyaux) et le distribuer.

Je n'ai plus qu'à ouvrir le fichier, le sauvegarder et envoyer avec rsync. Avec des alias, c'est rapide.

Les plugins

Pelican a aussi son lot de plugins. On clone le dépôt et on indique le chemin dans pelicanconf.py :

# Chemin du ou des dossiers contenant les plugins
PLUGIN_PATHS = ["/home/spf/Documents/sanspseudofix/plugins/", "/home/spf/Documents/sanspseudofix/plugins/pelican-plugins"]

# Plugins qu'on souhaite activer
PLUGINS = ["multi_neighbors", "md_inline_extension"]

Pour une raison qui m'échappe, je n'ai pas réussi à faire fonctionner le plugin md_inline_extension directement depuis le dépôt des plugins Pelican. J'ai donc cloné le dépôt dans un autre dossier.

Multi-neighbors permet simplement d'ajouter un lien vers le post précédent, et suivant, dans les articles. 1 signifie "afficher que les posts immédiatement placés avant/après" (par défaut, il affiche une liste des 5 précédents/suivants). On ajoute à pelicanconf.py : MULTI_NEIGHBORS = 1.

Md inline extension permet d'ajouter des classes perso. Par exemple, pour générer les encadrés bleus/rouges sur ce site, j'utilise du JS. Si j'utilise la classe .nota, le JS ajoute l'icône et le cadre automatiquement.

Normalement, sans l'extension, je dois faire :

<div class="nota">
J'ai utilisé le chemin ``~/virtualenvs/pelican``, mais vous pouvez utiliser celui que vous souhaitez, comme par exemple ``~/Dev/Site/pelican``
</div>

Grâce à l'extension, il me suffit de mettre .nota juste avant et après le bloc :

.nota
J'ai utilisé le chemin ``~/virtualenvs/pelican``, mais vous pouvez utiliser celui que vous souhaitez, comme par exemple ``~/Dev/Site/pelican``
.nota

Pour ajouter vos classes perso, dans le fichier pelicanconf.py

MD_INLINE = {
        '.attention' : 'attention',
        '.nota' : 'nota',
        '.edit' : 'edit',
        '.git' : 'git',
        '.dl-zip' : 'dl-zip',
}

Redirections apache

Nous avons déjà vu comment rendre les URL compatibles avec la syntaxe sanspseudofix.fr/titre-article/ (correspondant à Nom de l'article dans les paramètres Permaliens de Wordpress) dans pelicanconf.py, mais il reste les flux RSS et atom.

On commence par activer le mode rewrite :

a2enmod rewrite.load

Puis dans votre fichier pelican.conf :

RewriteEngine On
RewriteRule /?feed/$ /feeds/all.rss.xml [L,R=301]
RewriteRule /?feed/atom /feeds/all.atom.xml [L,R=301]

Les images

C'est bien beau d'avoir tout bien configuré, et ne pas avoir configuré le bon chemin pour les images. Wordpress range les images des posts de la façon suivante : wp-content/uploads/année/mois/img.png|jpg|etc. Je ne me suis pas trop pris la tête, j'ai gardé la structure, mais en remplaçant wp-content/uploads par images/posts (puisque j'avais déjà créé le dossier images). Pour remplacer l'ancien chemin par le nouveau, j'ai utilisé le script suivant dans content :

CE SCRIPT VA MODIFIER TOUS LES CHEMINS DE VOS ARTICLES ! FAITES UN TEST AVANT ! Je ne pourrais être tenu pour responsable si vous faites n'importe quoi.

#!/bin/bash
for i in *md; do
  sed -i 's/wp-content\/uploads/images\/posts/g' $i
done

Ça y est, c'est fini

Vous devriez avoir un site qui tourne plutôt bien (y a toujours deux-trois bricoles à corriger, des redirections oubliées ou ratées etc). Je devais parler initialement de comment installer ISSO (le disqus Libre et auto-hébergeable), mais je le ferai dans un autre post.

« Attention, ça va couper, chérie »

Moss IT crowd lumiere

diaspora*
Retour maison