Aller au contenu principal

Déploiement GitHub Pages

📌 Prérequis​

  • Un compte GitHub
  • Un dépôt GitHub contenant votre projet Vite
  • Node.js installé sur votre machine

1️⃣ Configurer Vite pour GitHub Pages​

Par défaut, GitHub Pages sert les fichiers statiques depuis un sous-dossier (gh-pages).
Ajoutez cette ligne dans vite.config.js pour définir le bon chemin de base :

// vite.config.js
export default {
  base: "/nom-du-repo/", // Remplacez "nom-du-repo" par le nom réel de votre dépôt GitHub
};

2️⃣ Installer le package gh-pages​

Dans votre terminal, exécutez :

npm install gh-pages --save-dev

3️⃣ Modifier package.json​

Ajoutez ces lignes dans package.json :

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

4️⃣ Déployer manuellement sur GitHub Pages​

Une fois votre code sur GitHub, exécutez :

npm run build
npm run deploy

Cela va :

  1. Générer les fichiers optimisés dans dist/
  2. Publier le contenu du dossier dist/ sur la branche gh-pages

5️⃣ Activer GitHub Pages​

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

✅ Déploiement Automatique avec GitHub Actions​

Si vous voulez un déploiement automatique à chaque modification du code, ajoutez un workflow GitHub Actions.

  1. Dans votre dépôt GitHub, créez un dossier .github/workflows
  2. Ajoutez un fichier deploy.yml avec ce contenu :
name: Deploy Vite Project

on:
  push:
    branches:
      - main  # Déclenche l'action sur la branche principale

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 sur GitHub.

Désormais, à chaque push sur la branche main, GitHub déploiera automatiquement votre projet sur GitHub Pages ! 🎉

Votre projet Vite est maintenant en ligne sur GitHub Pages.