Published on

Migrer son blog de Wordpress à Gatsby - Part 2

Authors

Passer de Wordpress à Gatsby

Comme dit dans la partie 1 de ce tuto, mettre en place gatsby est rapide et relativement simple, nous aborderons ces 3 étapes:

  • Migration de notre fichier .xml wordpress
  • Mise en place de Gatsby
  • Déploiementvia Netlify

Migrer depuis wordpress

interface wordpress d'exportation
git clone https://github.com/lonekorean/wordpress-export-to-markdown.git
cd wordpress-export-to-markdown
npm install
// copiez votre fichier .xml par exemple wordpress.xml
node index.js --input=wordpress.xml

N'oubliez pas de c/c votre .xml à la racine du repo cloné et de mettre le bon chemin/nom de fichier. Une fois fait tout vos articles convertis se trouveront dans le dossier /output. Vous aurez aussi besoin de toutes vos images stockées dans votre wp-content/uploads/**. De base wordpress en fait différents formats genre thumbnails, à vous de faire le tri. Pour l'instant pas besoin d'aller plus loin, passons à l’installation de notre projet gatsby.

Setup son blog avec gatsby

Premièrement on installe de manière globale le CLI de gatsby:

npm install -g gatsby-cli

On créer un nouveau projet gatsby en utilisant gatsby-starter-blog, un template conçu spécialement pour notre besoin. Il inclut de base plusieurs plugins utiles ainsi que des settings appropriés pour la création d'un blog.

gatsby new mon-super-blog https://github.com/gatsbyjs/gatsby-starter-blog

On lance le serveur de développement:

cd mon-super-blog
gatsby develop
gatsby compiled

Maintenant que l'installation est complète copiez vos dossiers d'articles convertis précédemment en markdown vers content/blog. C'est là que vous pouvez stocker vos articles .md.

Chemin des articles
gatsby metadata

Vous avez maintenant votre blog qui fonctionne en local il ne reste plus qu'à lui trouver un host !

Héberger son blog avec Netlify

Netlify est un hébergeur gratuit tout indiqué lorsqu'il s'agit de contenu statique. On peut lui distinguer plusieurs fonctionnalités sympa:

  • Système d'intégration continue via git
  • Un CDN puissant
  • Possibilité de split-testing
  • Configurer plusieurs environnements
  • Certificat SSL

Tout d'abord initialisez un repo git dans votre projet:


git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/kevin/mon-super-blog.git
git push -u origin master
Host with netlify via git

Pour aller plus loin dans le développement de votre site je vous invite à assimiler le fonctionnement de React et de Gatsby avec GraphQl.

Bravo ! Avec tout ça il ne vous reste plus qu'à mettre par écrit toutes vos ideés d'articles !