Hugging Face's logo

Buckets:
ktongue
/
docker_container

Files
xet
ktongue/docker_container / approximations_function /GUIDE_DEPLOYMENT_GITHUB.md
preview code
|
download
raw
10.8 kB

🚀 Guide: Déployer des fichiers HTML interactifs sur GitHub

Méthode 1: GitHub Pages (Recommandée) ⭐

GitHub Pages permet d'héberger gratuitement des sites web statiques directement depuis un repository GitHub.

Étape par étape:

1. Créer un repository GitHub 

# Sur GitHub.com, créez un nouveau repository
# Nom: fenics-visualizations (ou autre)
# Public ou Private (Pages fonctionne avec les deux pour les comptes gratuits)

2. Initialiser et pousser votre projet 

cd /root/test

# Initialiser git (si pas déjà fait)
git init

# Créer un fichier .gitignore
cat > .gitignore << EOF
__pycache__/
*.pyc
*.pyo
*.pyd
.Python
*.so
*.egg
*.egg-info/
dist/
build/
EOF

# Ajouter vos fichiers
git add mesh_interactive_3d.html
git add mesh_interactive_2d.html
# Ajouter d'autres fichiers si nécessaire

# Commit
git commit -m "Add interactive mesh visualizations"

# Ajouter le remote (remplacer USERNAME et REPO)
git remote add origin https://github.com/USERNAME/REPO.git

# Pousser
git branch -M main
git push -u origin main

3. Activer GitHub Pages

Option A: Via l'interface GitHub

  1. Allez sur votre repository → Settings
  2. Dans le menu de gauche → Pages
  3. Source: Sélectionnez main branch et / (root)
  4. Cliquez sur Save

Option B: Via GitHub CLI

# Installer GitHub CLI si nécessaire
# https://cli.github.com/

gh repo create fenics-visualizations --public
cd /root/test
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/USERNAME/fenics-visualizations.git
git push -u origin main

# Activer Pages
gh api repos/USERNAME/fenics-visualizations/pages -X POST -f source[branch]=main -f source[path]=/

4. Accéder à votre site

Après quelques minutes, votre site sera disponible à:

https://USERNAME.github.io/REPO/mesh_interactive_3d.html

Structure recommandée du repository: 

fenics-visualizations/
├── index.html              # Page d'accueil (liste des visualisations)
├── mesh_interactive_2d.html
├── mesh_interactive_3d.html
├── README.md               # Documentation
└── images/                 # Captures d'écran pour le README
    ├── preview_2d.png
    └── preview_3d.png

Méthode 2: GitHub Gist (Partage rapide) ⚡

Pour partager rapidement UN fichier sans créer un repository complet.

Via l'interface web:

  1. Allez sur https://gist.github.com/
  2. Collez le contenu de votre HTML
  3. Nommez le fichier: mesh_interactive_3d.html
  4. Cliquez sur Create public gist

Via ligne de commande: 

# Installer gist CLI
sudo apt-get install gist  # ou: brew install gist

# Créer le gist
gist -p mesh_interactive_3d.html

# Retourne une URL comme: https://gist.github.com/USERNAME/abc123...

Visualiser le Gist: 

# URL brute du fichier:
https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/mesh_interactive_3d.html

# Pour visualiser dans le navigateur (via service externe):
https://htmlpreview.github.io/?https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/mesh_interactive_3d.html

Méthode 3: Repository GitHub + Preview service

Si vous ne voulez pas activer GitHub Pages, utilisez un service de preview.

1. Pousser sur GitHub (comme Méthode 1, étapes 1-2)

2. Utiliser un service de preview:

Option A: htmlpreview.github.io 

https://htmlpreview.github.io/?https://github.com/USERNAME/REPO/blob/main/mesh_interactive_3d.html

Option B: raw.githack.com 

# Pour développement (mises à jour instantanées):
https://raw.githack.com/USERNAME/REPO/main/mesh_interactive_3d.html

# Pour production (CDN avec cache):
https://rawcdn.githack.com/USERNAME/REPO/COMMIT_HASH/mesh_interactive_3d.html

Option C: GitHub.dev (VSCode en ligne) 

https://github.dev/USERNAME/REPO
# Puis ouvrir le fichier HTML et utiliser l'extension "Live Preview"

Méthode 4: Solution complète avec page d'accueil

Créer une belle page d'accueil (index.html): 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visualisations de Maillages FEniCS</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }
        h1 {
            text-align: center;
            font-size: 3em;
            margin-bottom: 10px;
        }
        .subtitle {
            text-align: center;
            font-size: 1.2em;
            opacity: 0.9;
            margin-bottom: 40px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        }
        .card h2 {
            margin-top: 0;
            font-size: 1.8em;
        }
        .card p {
            opacity: 0.9;
            line-height: 1.6;
        }
        .btn {
            display: inline-block;
            background: white;
            color: #667eea;
            padding: 12px 30px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 15px;
            transition: background 0.3s, color 0.3s;
        }
        .btn:hover {
            background: #667eea;
            color: white;
        }
        .icon {
            font-size: 3em;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔬 Visualisations FEniCS</h1>
        <p class="subtitle">Maillages interactifs créés avec la méthode des éléments finis</p>
        
        <div class="grid">
            <div class="card" onclick="window.location.href='mesh_interactive_2d.html'">
                <div class="icon">📐</div>
                <h2>Maillage 2D</h2>
                <p>Visualisation interactive d'un maillage 2D triangulaire. Zoomez et explorez la structure du maillage.</p>
                <a href="mesh_interactive_2d.html" class="btn">Voir la démo 2D →</a>
            </div>
            
            <div class="card" onclick="window.location.href='mesh_interactive_3d.html'">
                <div class="icon">🎲</div>
                <h2>Maillage 3D</h2>
                <p>Visualisation 3D interactive avec rotation complète. Explorez le maillage tétraédrique de tous les angles.</p>
                <a href="mesh_interactive_3d.html" class="btn">Voir la démo 3D →</a>
            </div>
        </div>
        
        <div style="text-align: center; margin-top: 50px; opacity: 0.8;">
            <p>Créé avec DOLFINx et Plotly</p>
            <p>
                <a href="https://github.com/USERNAME/REPO" style="color: white;">
                    📦 Voir le code source sur GitHub
                </a>
            </p>
        </div>
    </div>
</body>
</html>

Comparaison des méthodes:

Méthode Simplicité Vitesse URL propre Recommandé pour
GitHub Pages ⭐⭐⭐⭐ ⭐⭐⭐ ✅ Projets sérieux
GitHub Gist ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ❌ Partage rapide
htmlpreview.github.io ⭐⭐⭐⭐⭐ ⭐⭐ ❌ Tests rapides
raw.githack.com ⭐⭐⭐⭐ ⭐⭐⭐⭐ ✅ Alternative à Pages

Script automatique pour déploiement

Créez ce script deploy.sh:

#!/bin/bash

echo "🚀 Déploiement sur GitHub..."

# Configuration (à modifier)
USERNAME="votre-username"
REPO="fenics-visualizations"

# Initialiser si nécessaire
if [ ! -d .git ]; then
    git init
    git remote add origin https://github.com/$USERNAME/$REPO.git
fi

# Ajouter les fichiers
git add mesh_interactive_*.html
git add index.html
git add README.md
git add images/*.png 2>/dev/null || true

# Commit
echo "📝 Création du commit..."
git commit -m "Update visualizations - $(date +%Y-%m-%d)"

# Push
echo "⬆️  Push vers GitHub..."
git push origin main

# Afficher l'URL
echo ""
echo "✅ Déploiement terminé!"
echo "📱 Votre site sera disponible dans quelques minutes à:"
echo "   https://$USERNAME.github.io/$REPO/"

README.md suggéré: 

# 🔬 Visualisations de Maillages FEniCS

Visualisations interactives de maillages générés avec DOLFINx/FEniCS.

## 🌐 Démos en ligne

- [Maillage 2D interactif](https://USERNAME.github.io/REPO/mesh_interactive_2d.html)
- [Maillage 3D interactif](https://USERNAME.github.io/REPO/mesh_interactive_3d.html)

## ✨ Fonctionnalités

- ✅ Visualisations interactives (zoom, pan, rotation)
- ✅ Informations au survol de la souris
- ✅ Export d'images haute résolution
- ✅ Aucune installation requise

## 🛠️ Technologies utilisées

- [DOLFINx](https://fenicsproject.org/) - Génération de maillages
- [Plotly](https://plotly.com/) - Visualisations interactives
- Python 3.12+

## 📦 Installation locale

```bash
pip install fenics-dolfinx plotly
python visualize_plotly.py

📝 License

MIT


---

## Conseils importants:

1. **Taille des fichiers**: GitHub Pages a une limite de 100 MB par fichier
   - Si votre HTML est trop gros, réduisez le nombre de points du maillage
   
2. **Sécurité**: Ne commitez JAMAIS de tokens ou mots de passe
   - Utilisez `.gitignore` pour les fichiers sensibles

3. **Performance**: 
   - Les fichiers HTML Plotly peuvent être lourds (plusieurs MB)
   - Pour de gros maillages, considérez un hébergement dédié

4. **Mise à jour**:
   ```bash
   git add .
   git commit -m "Update meshes"
   git push
   # GitHub Pages se met à jour automatiquement en quelques minutes

🎯 Résumé rapide

Pour partager rapidement → GitHub Gist + htmlpreview.github.io
Pour un projet sérieux → GitHub Pages avec index.html
Pour un portfolio → GitHub Pages + domaine personnalisé

Xet Storage Details

Size:
10.8 kB
·
Xet hash:
c9dcb63a8456bf409a0dd58a5b19cb27c2cc7ba5c2e36d60cfb78b0c5d0a182c

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.