Déployer le dossier /dist sur Github Pages.

Parfois il serait souhaitable de déployer un dossier ou sous dossier d’un projet comme dossier par défaut de Github Pages afin de déployer uniquement les fichiers compilés d’une application. C’est le cas par exemple avec VueJS, où le dossier “/dist” contient les fichiers devant être déployés en production.

Voyons comment configurer notre application avec git pour déployer automatiquement le dossier dist dans une branche nommée “gh-pages”.

Étape 1

Compiler votre app VueJS dans le dossier “/dist” via la commande “npm run build”.

Si le dossier /dist est ignoré par git comme c’est souvent le cas par défaut, supprimer la ligne correspondante dans le fichier .gitignore.

Étape 2

A présent déclarons notre sous-arborescence à git par la commande suivante :

git add dist && git commit -m “Initial dist subtree commit”

Étape 3

Pousser la sous-arborescence dans la branche souhaitée :

git subtree push – prefix dist origin gh-pages

Et voilà ! Cette méthode fonctionne particulièrement bien avec Github Pages qui est configuré pour utiliser une branche du repository pour publier la page. Si ce tutoriel est décrit pour VueJS, il peut facilement être adapté pour d’autres SPA tel qu’Angular ou React.

Étape 4 (optionnel)

Si vous pensez mettre à jour souvent votre repository VueJS, ajouter une simple ligne de confuguratjon dans la.section scripts du ficher package.json permettant de compiler et de déployer dans la sous-arborescence :

“deploy”: “npm run build && git subtree push – prefix dist origin gh-pages”

A chaque fois que vous désirez déployer, il n’y a plus qu’à exécuter la commande npm run deploy.