🚀 Guide de Déploiement — GitHub Pages + Netlify

00

⚖️ GitHub vs Netlify — Que choisir ?

Critère	🐙 GitHub Pages	⚡ Netlify Drop
Vitesse de mise en ligne	5–15 min (1ère fois)	30 secondes
Compte requis	GitHub (gratuit)	Non (glisser-déposer)
URL obtenue	`tonnom.github.io/MartialApp`	`xyz.netlify.app`
Compétences pro acquises	Git, GitHub, versioning, CLI	Aucune (drag & drop)
Mise à jour du site	git push → déploiement auto	Re-déposer le dossier
Historique des versions	Oui — git log complet	Non
Accès mobile	Oui	Oui
Gratuit	Oui	Oui (avec limites)
Bandwidth	100 Go/mois	100 Go/mois (puis payant)
Sites max	Illimité	1 site (plan gratuit)
Build minutes	Illimité	300 min/mois
Recommandé si...	Tu veux les skills dev pro	Tu veux tester vite

Recommandation : Commence par Netlify Drop pour voir le résultat en 30 secondes. Puis fais GitHub Pages pour acquérir les compétences. Les deux se complètent — Netlify peut même se brancher sur GitHub automatiquement.

⚠️ Limites du plan gratuit Netlify (Starter) :
• Bandwidth : 100 Go/mois — au-delà, le site est coupé jusqu'au mois suivant ou tu payes ($55/mois pour 1 To)
• Build minutes : 300 min/mois — chaque déploiement consomme des minutes
• 1 membre d'équipe — pas de collaboration sur le plan gratuit
• Forms : 100 soumissions/mois max
• Serverless Functions : 125 000 requêtes/mois, 10s timeout max
• Pas de support prioritaire — communauté uniquement

💡 Pour un site statique comme le tien (~2 Mo), les 100 Go suffisent pour ~50 000 visites/mois. Mais si tu veux zéro limite et zéro dépendance, héberge sur ton NAS → Tutoriel NAS UGREEN

🖥️ Alternative ultime — Auto-hébergement sur NAS : Si tu possèdes un NAS UGREEN (ou Synology, QNAP...), tu peux héberger ton site chez toi avec Docker + Nginx. Aucune limite de bandwidth, aucun abonnement, 100% sous ton contrôle. → Voir le tutoriel complet NAS UGREEN DXP2800XP

A1

Créer un compte GitHub

1

Aller sur github.com

Va sur github.com → clique "Sign up" (en haut à droite)

📌 Conseil username : Choisis quelque chose de pro — ce sera dans ton URL.
Par exemple : fab-martial → URL = fab-martial.github.io

✅ Email + mot de passe fort + vérification CAPTCHA

2

Créer un nouveau Repository

Une fois connecté → clique le bouton vert "New" ou le "+" en haut à droite → "New repository"

Repository name : MartialApp
Description : Mon parcours martial — Kajukenbo + Kali
Visibility : ⚪ Public (requis pour GitHub Pages gratuit)
Initialize : ☑️ Add a README file

→ Clique "Create repository"

3

Uploader les fichiers HTML (méthode interface web)

Dans ton repo → clique "Add file" → "Upload files"

📁 Glisse-dépose tous les fichiers .html du dossier Martial Arts/
→ index.html, Kajukenbo.html, Kali_Arnis_Eskrima.html, etc.

Commit message : "Initial commit — site martial arts"
→ Clique "Commit changes"

⚠️ Important : GitHub ne supporte pas les espaces dans les noms de dossier pour l'upload. Upload directement les fichiers .html à la racine du repo (pas le dossier "Martial Arts/").

4

Activer GitHub Pages

Dans ton repo → onglet Settings → section Pages (dans le menu gauche)

Source : Deploy from a branch
Branch : main / / (root)
→ Clique "Save"

⏳ Attendre 1–2 minutes...
✅ Ton site est en ligne à :
https://fab-martial.github.io/MartialApp/

🎉 C'est tout ! Ton site est maintenant accessible depuis n'importe quel appareil dans le monde. Partage l'URL à qui tu veux.

A2

🖥️ Git en Ligne de Commande — Skills Pro

Pourquoi apprendre ça ? Toutes les équipes dev utilisent Git quotidiennement. Maîtriser git en ligne de commande te permettra de contribuer à n'importe quel projet, de gérer des mises à jour proprement, et d'impressionner en entretien. Tu as déjà git installé sur ton Mac.

1

Configuration initiale (1 seule fois)

Terminal (zsh)

# Dire à git qui tu es

git config --global user.name "Fab"

git config --global user.email "ton@email.com"

# Vérifier

git config --list

2

Cloner ton repo GitHub en local

Remplace fab-martial par ton username GitHub

Terminal

# Aller sur le Bureau

cd ~/Desktop

# Cloner (télécharger) le repo

git clone https://github.com/fab-martial/MartialApp.git

# Entrer dans le dossier

cd MartialApp

3

Copier tes fichiers HTML dans le repo cloné

Terminal

# Copier tous les fichiers HTML de ton dossier Martial Arts

cp ~/Desktop/"Martial Arts"/*.html ~/Desktop/MartialApp/

# Voir l'état

git status

4

Commit & Push — Le flux quotidien

Ces 4 commandes sont le cœur de Git. Tu les utiliseras des milliers de fois dans ta vie de dev.

Terminal — Workflow quotidien

# 1. Voir ce qui a changé

git status

# 2. Ajouter tous les fichiers modifiés

git add .

# 3. Créer un "snapshot" avec un message

git commit -m "Ajout programme préparation physique"

# 4. Envoyer sur GitHub → site mis à jour automatiquement

git push

          Mémorise ça : git add . → git commit -m "message" → git push

          C'est le triptyque fondamental de tout développeur. Tu viens d'apprendre 80% de git.

5

Commandes utiles à connaître

Terminal — Référence rapide

# Voir l'historique de tes commits

git log --oneline

# Voir les différences avant de commit

git diff

# Récupérer les dernières modifications depuis GitHub

git pull

# Créer une branche (pour tester sans casser le site)

git checkout -b ma-nouvelle-idee

# Revenir sur la branche principale

git checkout main

B1

⚡ Netlify Drop — Le plus Simple

1

Aller sur app.netlify.com/drop

Ouvre ton navigateur → va sur app.netlify.com/drop

📁

Drag and drop your site output folder here

or browse to upload

2

Glisser-déposer le dossier "Martial Arts"

Ouvre le Finder → navigue vers ton Bureau → glisse le dossier "Martial Arts" directement dans la zone de dépôt Netlify dans le navigateur.

⚠️ Important : Netlify Drop requiert que index.html soit à la racine du dossier déposé. C'est le cas — index.html est bien dans le dossier Martial Arts/. ✅

3

Ton site est en ligne !

Après quelques secondes, Netlify génère automatiquement une URL aléatoire :

🎉 Production deploy is live!
URL : https://festive-samurai-abc123.netlify.app

→ Copie cette URL → ouvre-la sur ton téléphone → ton site est là !

🏆 30 secondes chrono ! Accessible depuis ton téléphone, n'importe où dans le monde, sans abonnement.

4

Créer un compte pour conserver l'URL

Sans compte, le site expire après un certain temps. Pour le garder définitivement :

Clique "Claim your site" sous l'URL générée
→ Crée un compte Netlify gratuit (email + mot de passe)
→ L'URL est définitivement liée à ton compte
→ Tu peux personnaliser le sous-domaine : mon-parcours-martial.netlify.app

B2

🔄 Netlify + GitHub — Déploiement Automatique

Le combo parfait : Une fois que tu as GitHub (Partie A), tu peux connecter Netlify à ton repo. Résultat : chaque fois que tu fais un git push, Netlify redéploie automatiquement ton site en moins d'une minute. C'est ce qu'on appelle le CI/CD — très utilisé en entreprise.

1

Connecter GitHub à Netlify

Sur Netlify → "Add new site" → "Import an existing project" → "Deploy with GitHub"

2

Sélectionner le repo

Choisir fab-martial/MartialApp → laisser les paramètres par défaut (pas de build command, publish directory = /) → "Deploy site"

3

Le workflow pro est en place

Ton workflow désormais

# Tu modifies une page HTML sur ton Mac

# Puis dans le terminal :

git add .

git commit -m "Mise à jour programme Phase 2"

git push

# ↓ Netlify détecte automatiquement le push

# ↓ Rebuilde et déploie en ~30 secondes

# ↓ Ton site est mis à jour partout 🚀

          C'est le même workflow que des équipes chez Netflix, Airbnb, et des milliers de startups. En apprenant ça pour ton site martial arts, tu apprends la base du dev moderne.
        

C

🔐 Connexion sécurisée — 100% Gratuit

Objectif : Protéger l'accès à ton site par identifiant/mot de passe, avec un nom de domaine gratuit, un hébergement gratuit, et un système d'authentification gratuit. Coût total : 0€.

📊 Le stack 100% gratuit

🌐 Hébergement : GitHub Pages (illimité, gratuit) ou Cloudflare Pages (illimité, gratuit)
🔗 Nom de domaine : Cloudflare Registrar (~$10/an) OU sous-domaine gratuit (.github.io, .pages.dev, .netlify.app) OU nic.eu.org (.eu.org gratuit)
🔐 Authentification : Cloudflare Access (Zero Trust, gratuit 50 users) OU Auth JavaScript côté client
📜 SSL/HTTPS : Automatique et gratuit sur toutes ces plateformes

1

Méthode A : Auth JavaScript côté client (le plus simple)

Ajoute un écran de login directement dans tes pages HTML. Aucun serveur requis. Fonctionne sur GitHub Pages, Netlify, Cloudflare Pages. Le mot de passe est hashé en SHA-256.

⚠️ Sécurité : Cette méthode protège contre les visiteurs occasionnels mais n'est pas inviolable (le code JS est visible). Parfait pour un usage perso / famille. Pour une vraie sécurité pro, utilise la Méthode B (Cloudflare Access).

Ajouter en haut de chaque page HTML (après <body>)

<!-- ═══ ÉCRAN DE CONNEXION ═══ -->
<div id="auth-gate" style="position:fixed;inset:0;z-index:9999;background:#07080c;
  display:flex;align-items:center;justify-content:center;flex-direction:column;">
  <div style="text-align:center;max-width:350px;padding:2rem;">
    <div style="font-size:3rem;margin-bottom:1rem;">⚔️</div>
    <h2 style="color:#fff;margin-bottom:0.5rem;font-size:1.5rem;">Accès protégé</h2>
    <p style="color:#606870;font-size:0.85rem;margin-bottom:1.5rem;">
      Entre le mot de passe pour accéder au site
    </p>
    <input id="auth-pw" type="password" placeholder="Mot de passe"
      style="width:100%;padding:0.8rem 1rem;background:#0d1117;border:1px solid
      rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-size:1rem;
      outline:none;margin-bottom:0.8rem;"
      onkeydown="if(event.key==='Enter')checkAuth()">
    <button onclick="checkAuth()" style="width:100%;padding:0.8rem;
      background:rgba(80,120,255,0.15);border:1px solid rgba(80,120,255,0.4);
      color:#5080ff;border-radius:8px;font-size:0.9rem;font-weight:700;
      cursor:pointer;">Entrer</button>
    <p id="auth-err" style="color:#c05050;font-size:0.8rem;
      margin-top:0.8rem;display:none;">Mot de passe incorrect</p>
  </div>
</div>
<script>
// Hash SHA-256 de ton mot de passe
// Pour générer : ouvre la console JS → 
// crypto.subtle.digest('SHA-256',new TextEncoder().encode('tonmdp'))
//   .then(h=>console.log([...new Uint8Array(h)].map(b=>b.toString(16).padStart(2,'0')).join('')))
const HASH = 'REMPLACE_PAR_TON_HASH_SHA256';
async function checkAuth() {
  const pw = document.getElementById('auth-pw').value;
  const buf = await crypto.subtle.digest('SHA-256',
    new TextEncoder().encode(pw));
  const hash = [...new Uint8Array(buf)]
    .map(b => b.toString(16).padStart(2,'0')).join('');
  if (hash === HASH) {
    document.getElementById('auth-gate').style.display = 'none';
    sessionStorage.setItem('auth', '1');
  } else {
    document.getElementById('auth-err').style.display = 'block';
  }
}
// Auto-login si déjà authentifié dans cette session
if (sessionStorage.getItem('auth') === '1')
  document.getElementById('auth-gate').style.display = 'none';
</script>

        Comment générer ton hash SHA-256 :

        ① Ouvre ton navigateur → F12 → Console

        ② Tape : crypto.subtle.digest('SHA-256',new TextEncoder().encode('tonmotdepasse')).then(h=>console.log([...new Uint8Array(h)].map(b=>b.toString(16).padStart(2,'0')).join('')))

        ③ Copie le hash affiché → remplace REMPLACE_PAR_TON_HASH_SHA256 dans le code

2

Méthode B : Cloudflare Access (Zero Trust — recommandé)

La vraie sécurité, 100% gratuit. Cloudflare intercepte les requêtes AVANT qu'elles n'atteignent ton site. Pas de code JS à modifier. Supporte email OTP (one-time password), Google login, GitHub login.

☁️ Prérequis : Héberge ton site sur Cloudflare Pages (gratuit, illimité)

① Va sur pages.cloudflare.com → connecte ton GitHub
② Sélectionne ton repo MartialApp → Deploy
③ URL obtenue : martialapp.pages.dev (gratuit, illimité) — ✅ Déjà déployé !

Configurer l'authentification :
④ Cloudflare Dashboard → Zero Trust → Access → Applications
⑤ Add an Application → Self-hosted
⑥ Application domain : martialapp.pages.dev
⑦ Policy : Allow → Emails ending in → @gmail.com (ou emails spécifiques)
⑧ Authentication : One-time PIN (email OTP) — gratuit

✅ Désormais, quiconque visite ton site doit d'abord entrer son email et recevoir un code par mail !

        Avantages Cloudflare Access :

        • Gratuit jusqu'à 50 utilisateurs

        • Pas de code à modifier dans ton site

        • Supporte : Email OTP, Google, GitHub, Facebook, SAML

        • Protection au niveau DNS (impossible à contourner côté client)

        • Logs de connexion détaillés

3

Méthode C : Domaine personnalisé avec Cloudflare Registrar

Si tu veux un vrai nom de domaine personnalisé (ex: MartialApp.com) :

🌐 Option 1 — Cloudflare Registrar (recommandé) :
→ Cloudflare Dashboard → Registrar → Register Domain
→ Cherche un domaine : MartialApp.com (~$10/an)
→ Enregistre-le directement chez Cloudflare
→ Les nameservers sont automatiquement configurés
→ Ajoute un enregistrement CNAME : @ → MartialApp.pages.dev

Option 2 — Domaine gratuit .eu.org :
→ Va sur nic.eu.org
→ Choisis un nom : MartialApp.eu.org (gratuit, permanent)
→ Enregistre-le
→ Connecte à Cloudflare (même processus que ci-dessus)

✅ Résultat : https://MartialApp.com (ou .eu.org) — domaine + SSL + auth !

💡 Comparaison :
• Cloudflare Registrar : ~$10/an, tous les TLD populaires, gestion facile
• nic.eu.org : Gratuit, domaine .eu.org, plus fiable que Freenom
• Freenom : ⚠️ Fermé depuis 2023, ne plus utiliser

4

Comparatif des solutions gratuites

Solution	Sécurité	Facilité	Coût
JS côté client (SHA-256)	Basique	Très facile	0€
Cloudflare Access + Pages	Pro	Moyen	0€
GitHub Private repo	Caché mais pas protégé	Facile	0€
NAS UGREEN (local)	Total	Technique	0€ (matériel déjà possédé)

✅ Recommandation : Cloudflare Pages + Cloudflare Access = le combo ultime gratuit. Hébergement illimité + auth pro + SSL + CDN mondial. Et pour le local : ton NAS UGREEN avec VPN WireGuard (voir le tuto NAS).

04

🔐 Cloudflare Pages + Access — Hébergement + Auth Gratuit

La meilleure option 100% gratuite : Hébergement illimité + authentification sécurisée (OTP par email) + CDN mondial + SSL auto. Zéro code à modifier dans ton site.

1

Créer un compte Cloudflare

Va sur dash.cloudflare.com/sign-up et crée un compte gratuit avec ton email.

2

Connecter ton repo GitHub

Dans le dashboard Cloudflare → Workers & Pages → Pages → Create a project → Connect to Git
Sélectionne ton repo Kaito1947/MartialApp et autorise Cloudflare.

3

Configurer le build (optionnel)

Laisse les champs vides (ton site est statique, pas de build nécessaire).
Clique sur Save and Deploy. Cloudflare va déployer automatiquement en ~2 minutes.

4

Ajouter l'authentification (Cloudflare Access)

Étape 1 : Va dans Zero Trust (dans le menu Cloudflare)
Étape 2 : Access → Applications → Add an application
Étape 3 : Choisis Self-hosted
Étape 4 : Remplis :

Configuration Access
Application name:Mon Parcours Martial
Subdomain:MartialApp (ou ce que tu veux)
Domain:pages.dev (auto-rempli)
Application URL:https://martialapp.pages.dev (ton URL Pages)
        

5

Ajouter les utilisateurs autorisés

Policies → Add a policy
Policy name: Allow authorized users
Rules: Choisis Email et ajoute les emails autorisés (ex: ton email, celui d'un ami, etc.)

6

C'est prêt ! 🎉

Quand quelqu'un accède à ton site, il reçoit un code OTP par email (pas de mot de passe à gérer).
Il rentre le code et accède au site. Sécurisé, simple, gratuit.

      ✅ Avantages Cloudflare Pages + Access :
      ✅ Hébergement illimité (bandwidth, builds, déploiements)
✅ Authentification gratuite jusqu'à 50 utilisateurs
✅ SSL/HTTPS automatique
✅ CDN mondial (rapide partout)
✅ Déploiement auto à chaque `git push`
✅ Zéro modification du code HTML
✅ OTP par email (plus sûr que les mots de passe)

    

      💡 Domaine personnalisé : Si tu veux une URL comme MartialApp.fab.com au lieu de MartialApp-xxx.pages.dev, tu peux ajouter un domaine Cloudflare (gratuit si tu utilises les nameservers Cloudflare). Voir la section Bonus ci-dessous.
    

BONUS

🎓 Prochaines Étapes — Développer ses Skills

📖 Comprendre Git en profondeur

Maintenant que tu as les bases, ces ressources gratuites complètent la formation :

learngitbranching.js.org — Le meilleur tuto Git interactif (visuel, en français)
docs.github.com/fr — Documentation officielle GitHub en français
git --help dans le terminal — aide intégrée

🌐 Avoir un vrai nom de domaine

Si tu veux une URL personnalisée comme fab-martial.com à la place de fab-martial.github.io :

OVH (français) — ~8€/an pour un .fr ou .com
Namecheap — souvent 5-7€/an
GitHub Pages et Netlify supportent tous les deux les domaines personnalisés gratuitement

🔒 Rendre le site privé (accès par mot de passe)

Si tu veux partager uniquement à des proches sans que ce soit public sur Google :

Netlify → Site settings → Identity → Password protection (plan gratuit limité)
Alternative simple : GitHub repo privé + partage de lien direct aux personnes choisies
Alternative gratuite : Netlify team plan ou tiiny.host avec mot de passe

🚀 Et après — Si la dev t'accroche

HTML/CSS avancé — Tu as déjà un excellent niveau (ces pages le prouvent)
JavaScript — Ajouter de l'interactivité (timer Tabata dans le programme ? 😊)
VS Code + Extensions — Prettier, Live Server, GitLens
React/Vue — Les frameworks frontend modernes (si tu veux aller plus loin)

Mettre ce siteen ligne