Nous avons vu précédemment comment mettre en place un blog avec Gatsby et l’API de WordPress. Nous allons voir dans cet article comment déployer notre projet sur Netlify.

Création d’un repo Git

Pour pouvoir déployer notre projet nous devons le mettre sur GitHub ou Gitlab afin de le connecter à Netlify.

github-add-repo

Ensuite nous ajoutons notre projet sur GitHub :

# se déplacer dans le dossier
cd ~/PATH/TO/gatsby-personal-blog/

# initialiser le projet
git init

# ajouter tous les fichiers 
git add .

# commit
git commit -m '🎉 init project'

# ajouter l'origin
git remote add origin https://github.com/itsabdessalam/gatsby-personal-blog

# push
git push -u origin master

Connecter le projet à Netlify

Après s’être connecté à Netlify, il nous suffit tout simplement de rajouter un nouveau site comme le montre la capture

new-site-netlify-git

En cliquant sur ce bouton il nous est proposé de choisir le Git Provider, dans notre cas c’est GitHub. On choisit ensuite parmi la liste le projet en question

netlify-projects

Nous passons maintenant à la configuration du projet

 netlify-gatsby-configure

On peut maintenant déployer le projet !

deploy-netlify

Notre site est maintenant en ligne

gatsby-index-posts

L’auto-déploiement sur Netlify

De base si on veut mettre à jour notre site il va falloir encore une fois redéployer le projet et cela devient une tâche récurrente. Netlify a mis en place ce qu’on appelle les triggers deploy qui permettent de redéployer le projet à chaque push/changement.

trigger-deploy

Et pour pouvoir redéployer le projet simplement en mettant à jour des articles on utilise les build hooks. A la création un lien nous est fourni, c’est en exécutant une requête POST sur ce dernier que le projet est redéployé.

auto-deploy-netlify

Permettre l’auto-déploiement depuis l’API de WordPress

Afin de pouvoir redéployer le projet sans avoir recours à Netlify il est nécessaire de faire une requête POST sur le lien fourni au moment de l’ajout, la modification d’un post (seulement s’il est publié). Voici le bout de code à mettre dans le fichier functions.php de notre thème. Plusieurs autres fonctions WordPress existent pour ce type de cas à vous de voir lesquelles vous conviennent.

add_action('publish_post', 'post_published_notification', 10, 2);
function post_published_notification() {
    wp_remote_post('https://api.netlify.com/build_hooks/XXXXXXXXXXXXXXX')
}

Avant de partir…
Merci pour votre lecture ! 😊