Aller au contenu principal

Déployer sur GitHub Pages

Notions théoriques​

Qu'est-ce que GitHub Pages ?​

GitHub Pages est un service gratuit proposé par GitHub qui permet d'héberger un site Web statique directement depuis un dépôt GitHub. C'est idéal pour déployer un projet Vite.

Prérequis​

  • Un compte GitHub
  • Un dépôt GitHub contenant votre projet Vite
  • Node.js et npm installés

Fonctionnement du déploiement​

  1. Vite génère les fichiers statiques dans dist/ avec npm run build
  2. Ces fichiers sont publiés sur la branche gh-pages du dépôt
  3. GitHub Pages sert le contenu de cette branche en ligne
info

GitHub Pages sert votre site à l'adresse https://votre-nom.github.io/nom-du-repo/. Le sous-chemin /nom-du-repo/ est important : Vite doit en être informé via l'option base dans sa configuration.

Exemple pratique​

Étape 1 : Configurer Vite pour GitHub Pages​

Par défaut, GitHub Pages sert les fichiers depuis un sous-dossier correspondant au nom de votre dépôt.
Modifiez ou créez vite.config.js à la racine du projet :

// vite.config.js
export default {
  base: '/nom-du-repo/',
}

Remplacez nom-du-repo par le nom exact de votre dépôt GitHub.

Étape 2 : Installer le package gh-pages​

npm install gh-pages --save-dev

Étape 3 : Modifier package.json​

Ajoutez le script deploy dans la section scripts :

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "deploy": "gh-pages -d dist"
}

Étape 4 : Déployer​

npm run build
npm run deploy

Cela génère les fichiers dans dist/ et les publie sur la branche gh-pages.

Étape 5 : Activer GitHub Pages​

  1. Allez sur votre dépôt GitHub
  2. Cliquez sur Settings > Pages
  3. Sous Branch, sélectionnez gh-pages et cliquez sur Save
  4. Votre site sera accessible à : https://votre-nom.github.io/nom-du-repo/

Déploiement automatique avec GitHub Actions​

Pour déployer automatiquement à chaque git push, ajoutez un workflow GitHub Actions :

  1. Créez .github/workflows/deploy.yml dans votre projet

  2. Contenu du fichier :

name: Deploy Vite to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install and Build
        run: |
          npm install
          npm run build

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: dist
  1. Commitez et poussez ce fichier. Désormais, à chaque push sur main, GitHub déploiera automatiquement votre projet.
Bonne pratique - Vérifier la branche de déploiement

Dans le workflow, la ligne branches: [main] déclenche le déploiement uniquement depuis main. Si votre branche principale s'appelle master, modifiez cette valeur en conséquence.

Test de mémorisation/compréhension​


Quelle option de configuration Vite est obligatoire pour GitHub Pages ?


Quelle commande génère les fichiers de production avant le déploiement ?


Sur quelle branche `gh-pages` publie-t-il les fichiers ?


Dans quel dossier Vite place-t-il les fichiers de production ?


Quelle est l'URL d'un site GitHub Pages pour un repo 'mon-projet' du compte 'alice' ?