Comment déployer une app sur GitHub Pages ?

Essentiellement tu crées un repo sur GitHub, tu pushes ton code et si tu utilises un framework comme React ou Vue tu configures le script de build dans le package.json, puis tu actives GitHub Pages depuis les settings du repo en pointant vers le dossier dist ou gh-pages. Si c'est un site statique HTML/CSS/JS simple il suffit de pusher directement les fichiers dans la branche main ou de créer une branche gh-pages et c'est bon, le déploiement est pratiquement automatique.

Oui, fondamentalement c'est ça, mais je veux ajouter un détail qui m'a été utile quand j'ai commencé à faire du déploiement. Comme dit plus haut la base est bonne, mais ça dépend beaucoup de ce que tu es en train de déployer. Si c'est un simple site statique, genre HTML, CSS et JavaScript vanilla, littéralement tu pushes juste le code et tu actives Pages depuis les settings - tu choisis si tu veux qu'il lise depuis la branch main et le dossier root, ou depuis un dossier /docs. Voilà.

Mais si tu utilises React ou Vue, c'est un peu différent. Tu dois installer le paquet `gh-pages` avec npm, ensuite configurer le `package.json` en ajoutant `"homepage": "https://tonusername.github.io/nom-repo"` (important de mettre le nom du repo si c'est pas ton site principal). Après ça tu ajoutes les scripts de build et deploy, genre `"deploy": "npm run build && gh-pages -d build"` pour React. Quand tu runnes `npm run deploy`, l'outil compile tout et pousse automatiquement le dossier build sur la branch `gh-pages`. Depuis les settings tu actives Pages sur cette branch et t'es bon.

Une autre chose que j'ai apprise en faisant différents essais : si t'as des assets ou des images qui ne chargent pas, souvent c'est un problème de chemins relatifs. Vérifie bien que les images soient linké correctement dans ton code. Et si tu utilises un router (genre React Router), tu dois le configurer avec `basename` pour le nom du repo, sinon les liens ne fonctionnent pas. C'est un de ces détails qu'on découvre quand on voit tout cassé en production, haha.

Ce qu'ils ont dit c'est juste. Je rajouterais juste que si t'as un site statique simple (html, css, js) tu dois même pas faire grand-chose, faut juste que le repo soit public et que tu actives Pages depuis les paramètres en pointant vers la branche que tu veux, généralement main. Pour React et trucs comme ça tu dois installer `gh-pages` et mettre les bons scripts dans package.json genre `"deploy": "gh-pages -d build"`, puis quand tu fais `npm run deploy` ça upload tout automatiquement.

Un truc que personne ne dit vraiment mais qui est super utile : si ton projet n'est pas à la racine du repo, tu dois spécifier le bon dossier dans les settings de GitHub Pages (tu choisis "Deploy from a branch" et tu sélectionnes le dossier `/docs` ou `/dist` selon où finit la build). Je l'ai découvert à mes dépens quand j'ai déployé un site à côté d'autres projets dans le même repo et je me suis retrouvé avec une page blanche. Ah, et une astuce que j'utilise souvent : crée un workflow GitHub Actions simple qui fait la build automatiquement quand tu push, comme ça tu n'as pas besoin de faire manuellement `npm run build` et ensuite commiter le dossier compilé - tu laisses GitHub le faire pour toi et c'est beaucoup plus clean à gérer.