GitHub Pages

🐙 1. Présentation de GitHub Pages

GitHub Pages est un service d'hébergement gratuit intégré à GitHub. Il sert des fichiers statiques (HTML, CSS, JS) directement depuis un dépôt Git.

• Gratuit pour les dépôts publics et privés
• URL automatique : username.github.io/repo
• SSL/HTTPS automatique
• Support des domaines personnalisés
• Intégration native avec GitHub Actions

📄 2. Types de sites

🌿 3. Déploiement depuis une branche

GitHub Pages peut servir depuis :

• La branche gh-pages (racine)
• La branche main, dossier /docs
• La branche main, racine (pour les sites statiques simples)

# Installer gh-pages localement
npm install -D gh-pages

# package.json
{
  "homepage": "https://username.github.io/mon-app",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

# Déployer
npm run deploy

⚡ 4. GitHub Actions pour déploiement automatique

Créez .github/workflows/deploy.yml pour déployer automatiquement à chaque push.

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/deploy-pages@v4
        id: deployment

🌐 5. Domaine personnalisé

Pour utiliser monsite.fr au lieu de username.github.io/repo :

1. Créez un fichier CNAME à la racine du site avec votre domaine
2. Configurez les enregistrements DNS chez votre registrar
3. Activez HTTPS dans Settings → Pages

# Fichier CNAME (à la racine du dossier dist/)
monsite.fr

# DNS à configurer chez Hostinger/OVH/Namecheap
# Enregistrements A (4 IPs GitHub Pages)
A  @  185.199.108.153
A  @  185.199.109.153
A  @  185.199.110.153
A  @  185.199.111.153

# Enregistrement CNAME pour www
CNAME  www  username.github.io

⚠️ 6. Limitations

• Sites statiques uniquement — pas de backend Node.js
• Taille du dépôt : 1 GB max
• Bande passante : 100 GB/mois
• Builds : 10 builds/heure
• Pas de traitement côté serveur, pas de base de données