Téléverser les fichiers vers "/"
This commit is contained in:
commit
ab77d1dd72
160
cour-ftp.html
Normal file
160
cour-ftp.html
Normal file
@ -0,0 +1,160 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
.page { padding: 1rem 0; font-family: var(--font-sans); }
|
||||
.header { display: flex; align-items: center; gap: 12px; padding-bottom: 1rem; border-bottom: 2px solid var(--color-border-primary); margin-bottom: 1.5rem; }
|
||||
.header-icon { width: 42px; height: 42px; background: #E6F1FB; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.header-icon i { font-size: 22px; color: #185FA5; }
|
||||
.header h1 { font-size: 20px; font-weight: 500; color: var(--color-text-primary); }
|
||||
.header p { font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; }
|
||||
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; margin-left: 8px; background: #E6F1FB; color: #185FA5; vertical-align: middle; }
|
||||
|
||||
.card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.25rem; margin-bottom: 12px; }
|
||||
.card-title { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
|
||||
.card-title i { font-size: 16px; }
|
||||
|
||||
.analogy { background: #EAF3DE; border-radius: var(--border-radius-lg); padding: 1rem 1.25rem; margin-bottom: 12px; display: flex; gap: 12px; align-items: flex-start; }
|
||||
.analogy i { font-size: 26px; color: #639922; flex-shrink: 0; margin-top: 2px; }
|
||||
.analogy-text { font-size: 14px; color: #3B6D11; line-height: 1.6; }
|
||||
.analogy-text strong { color: #27500A; }
|
||||
|
||||
.step-list { list-style: none; }
|
||||
.step-item { display: flex; gap: 12px; padding: 9px 0; border-bottom: 0.5px solid var(--color-border-tertiary); align-items: flex-start; }
|
||||
.step-item:last-child { border-bottom: none; }
|
||||
.step-num { width: 26px; height: 26px; border-radius: 50%; background: #185FA5; color: #fff; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
|
||||
.step-text { font-size: 14px; color: var(--color-text-primary); line-height: 1.6; }
|
||||
.step-text code { font-family: var(--font-mono); font-size: 12px; background: var(--color-background-secondary); padding: 1px 6px; border-radius: 4px; }
|
||||
.step-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
|
||||
|
||||
.tip { background: #EAF3DE; border-left: 3px solid #639922; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 13px; color: #3B6D11; margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; }
|
||||
.tip i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
|
||||
.warn { background: #FAEEDA; border-left: 3px solid #BA7517; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 13px; color: #854F0B; margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; }
|
||||
.warn i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
|
||||
|
||||
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
|
||||
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 0.5px solid var(--color-border-tertiary); font-size: 14px; }
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-label { color: var(--color-text-secondary); }
|
||||
.info-val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; background: var(--color-background-secondary); padding: 2px 8px; border-radius: 4px; color: var(--color-text-primary); }
|
||||
.info-val.blue { background: #E6F1FB; color: #185FA5; }
|
||||
.info-val.green { background: #EAF3DE; color: #3B6D11; }
|
||||
|
||||
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 6px; }
|
||||
.vocab-item { border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; padding: 10px 12px; }
|
||||
.vocab-term { font-size: 13px; font-weight: 500; color: var(--color-text-primary); font-family: var(--font-mono); }
|
||||
.vocab-def { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.5; }
|
||||
|
||||
.schema { background: var(--color-background-secondary); border-radius: 10px; padding: 1rem; margin: 8px 0; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
|
||||
.schema-box { background: var(--color-background-primary); border: 0.5px solid var(--color-border-secondary); border-radius: 8px; padding: 8px 14px; text-align: center; font-size: 13px; }
|
||||
.schema-box .label { font-weight: 500; color: var(--color-text-primary); }
|
||||
.schema-box .sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
|
||||
.arrow { font-size: 20px; color: var(--color-text-secondary); padding: 0 8px; display: flex; align-items: center; }
|
||||
.schema-box.blue { background: #E6F1FB; border-color: #B5D4F4; }
|
||||
.schema-box.blue .label { color: #185FA5; }
|
||||
.schema-box.green { background: #EAF3DE; border-color: #C0DD97; }
|
||||
.schema-box.green .label { color: #3B6D11; }
|
||||
</style>
|
||||
<div class="page">
|
||||
|
||||
<div class="header">
|
||||
<div class="header-icon"><i class="ti ti-server-2" aria-hidden="true"></i></div>
|
||||
<div>
|
||||
<h1>Le FTP, c'est quoi ? <span class="badge">o2switch</span></h1>
|
||||
<p>Fiche débutants — Envoyer ses fichiers sur le serveur</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="analogy">
|
||||
<i class="ti ti-bulb" aria-hidden="true"></i>
|
||||
<div class="analogy-text">
|
||||
<strong>L'analogie simple :</strong> imaginez votre serveur comme une <strong>armoire à dossiers dans un bureau distant</strong>. Le FTP, c'est le <strong>chariot</strong> qui vous permet d'apporter ou de récupérer des dossiers depuis chez vous, sans vous déplacer. Votre logiciel FTP (FileZilla) est la personne qui pousse ce chariot.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-question-mark" aria-hidden="true"></i> À quoi ça sert concrètement ?</div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><div class="step-num" style="background:#639922;">✓</div><div class="step-text">Envoyer les fichiers de votre site sur le serveur o2switch<div class="step-sub">Votre site ne devient visible en ligne qu'une fois les fichiers déposés sur le serveur</div></div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#639922;">✓</div><div class="step-text">Modifier ou remplacer un fichier existant<div class="step-sub">Par exemple, corriger une image ou mettre à jour une page HTML</div></div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#639922;">✓</div><div class="step-text">Récupérer une sauvegarde de vos fichiers<div class="step-sub">Télécharger vos fichiers depuis le serveur vers votre ordinateur</div></div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#639922;">✓</div><div class="step-text">Installer ou réparer une extension WordPress<div class="step-sub">Accès direct aux fichiers même si l'admin WordPress ne répond plus</div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-route" aria-hidden="true"></i> Comment ça fonctionne ?</div>
|
||||
<div class="schema">
|
||||
<div class="schema-box blue"><div class="label"><i class="ti ti-device-laptop" aria-hidden="true"></i> Votre ordi</div><div class="sub">vos fichiers locaux</div></div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="schema-box"><div class="label"><i class="ti ti-app-window" aria-hidden="true"></i> FileZilla</div><div class="sub">le logiciel FTP</div></div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="schema-box"><div class="label"><i class="ti ti-lock" aria-hidden="true"></i> Internet<br>(SFTP chiffré)</div><div class="sub">connexion sécurisée</div></div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="schema-box green"><div class="label"><i class="ti ti-server-2" aria-hidden="true"></i> Serveur o2switch</div><div class="sub">public_html/</div></div>
|
||||
</div>
|
||||
<div class="tip"><i class="ti ti-info-circle" aria-hidden="true"></i><span>On utilise toujours <strong>SFTP</strong> (et non FTP simple) car la connexion est chiffrée — vos mots de passe ne transitent pas en clair sur internet.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-settings" aria-hidden="true"></i> Vos paramètres de connexion o2switch</div>
|
||||
<div class="grid2" style="margin-top:8px; margin-bottom:0;">
|
||||
<div>
|
||||
<div class="info-row"><span class="info-label">Adresse du serveur</span><span class="info-val blue">ftp.votredomaine.fr</span></div>
|
||||
<div class="info-row"><span class="info-label">Port</span><span class="info-val blue">22</span></div>
|
||||
<div class="info-row"><span class="info-label">Protocole</span><span class="info-val green">SFTP</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="info-row"><span class="info-label">Identifiant</span><span class="info-val">votre login cPanel</span></div>
|
||||
<div class="info-row"><span class="info-label">Mot de passe</span><span class="info-val">votre mdp cPanel</span></div>
|
||||
<div class="info-row"><span class="info-label">Dossier du site</span><span class="info-val blue">public_html/</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn" style="margin-top:10px;"><i class="ti ti-alert-triangle" aria-hidden="true"></i><span>Ces identifiants sont les mêmes que ceux de votre espace client o2switch (cPanel). Vous les trouvez dans l'e-mail de bienvenue o2switch.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-list-check" aria-hidden="true"></i> Se connecter avec FileZilla — pas à pas</div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><div class="step-num">1</div><div class="step-text">Télécharger et installer FileZilla (gratuit) sur <code>filezilla-project.org</code><div class="step-sub">Choisir "FileZilla Client", pas le Server</div></div></li>
|
||||
<li class="step-item"><div class="step-num">2</div><div class="step-text">Ouvrir FileZilla → menu <code>Fichier</code> → <code>Gestionnaire de sites</code> → bouton <code>Nouveau site</code></div></li>
|
||||
<li class="step-item"><div class="step-num">3</div><div class="step-text">Choisir le protocole <code>SFTP – SSH File Transfer Protocol</code> dans le menu déroulant</div></li>
|
||||
<li class="step-item"><div class="step-num">4</div><div class="step-text">Remplir les champs : hôte, port <code>22</code>, identifiant et mot de passe<div class="step-sub">Laisser "Type d'authentification" sur <strong>Normale</strong></div></div></li>
|
||||
<li class="step-item"><div class="step-num">5</div><div class="step-text">Cliquer <code>Connexion</code> — si une fenêtre s'ouvre avec une "clé d'hôte", cliquer <code>OK / Faire confiance</code><div class="step-sub">C'est normal lors de la première connexion, c'est le serveur qui se présente</div></div></li>
|
||||
<li class="step-item"><div class="step-num">6</div><div class="step-text">Le panneau de droite affiche les fichiers du serveur — naviguer jusqu'à <code>public_html/</code><div class="step-sub">Le panneau de gauche = votre ordinateur. Le panneau de droite = le serveur.</div></div></li>
|
||||
<li class="step-item"><div class="step-num">7</div><div class="step-text">Glisser-déposer vos fichiers du panneau gauche (votre ordi) vers le panneau droit (serveur)<div class="step-sub">Le transfert démarre automatiquement — la barre en bas indique la progression</div></div></li>
|
||||
</ul>
|
||||
<div class="tip"><i class="ti ti-bulb" aria-hidden="true"></i><span>Astuce : faire un clic droit sur un fichier du serveur → <strong>Afficher / Modifier</strong> pour l'ouvrir directement dans votre éditeur de texte et le sauvegarder automatiquement.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-folder-open" aria-hidden="true"></i> Où mettre ses fichiers ?</div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><div class="step-num" style="background:#185FA5;">📁</div><div class="step-text"><code>public_html/</code> — votre site principal<div class="step-sub">Tout ce qui est ici est accessible via votre nom de domaine (ex : monsite.fr)</div></div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#185FA5;">📁</div><div class="step-text"><code>public_html/wp-content/themes/</code> — thèmes WordPress<div class="step-sub">Pour installer ou réparer un thème manuellement</div></div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#185FA5;">📁</div><div class="step-text"><code>public_html/wp-content/plugins/</code> — extensions WordPress<div class="step-sub">Pour installer ou désactiver une extension (renommer son dossier suffit à la désactiver)</div></div></li>
|
||||
</ul>
|
||||
<div class="warn"><i class="ti ti-alert-triangle" aria-hidden="true"></i><span>Ne modifiez jamais de fichiers en dehors de <code>public_html/</code> si vous ne savez pas à quoi ils servent — les autres dossiers sont liés au système du serveur.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-mood-confuzed" aria-hidden="true"></i> Problèmes fréquents chez les débutants</div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><div class="step-num" style="background:#BA7517;">?</div><div class="step-text">La connexion ne s'établit pas<div class="step-sub">→ Vérifier que le protocole est bien SFTP (et non FTP) et que le port est 22</div></div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#BA7517;">?</div><div class="step-text">Les fichiers sont envoyés mais le site ne change pas<div class="step-sub">→ Vider le cache du navigateur (Ctrl+Maj+R) ou attendre quelques secondes</div></div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#BA7517;">?</div><div class="step-text">Je ne trouve pas <code>public_html/</code><div class="step-sub">→ Après connexion, naviguer vers le dossier racine : clic droit → "Aller au répertoire personnel"</div></div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#BA7517;">?</div><div class="step-text">Le transfert s'interrompt ou est lent<div class="step-sub">→ Réduire le nombre de transferts simultanés dans Édition → Paramètres → Transferts</div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-vocabulary" aria-hidden="true"></i> Vocabulaire essentiel</div>
|
||||
<div class="vocab-grid">
|
||||
<div class="vocab-item"><div class="vocab-term">FTP / SFTP</div><div class="vocab-def">Protocole de transfert de fichiers. SFTP = version sécurisée, toujours à préférer</div></div>
|
||||
<div class="vocab-item"><div class="vocab-term">Serveur / Hôte</div><div class="vocab-def">L'ordinateur distant chez o2switch qui héberge votre site</div></div>
|
||||
<div class="vocab-item"><div class="vocab-term">public_html</div><div class="vocab-def">Le dossier de votre site web, accessible depuis internet</div></div>
|
||||
<div class="vocab-item"><div class="vocab-term">Port</div><div class="vocab-def">La "porte" de communication utilisée. SFTP = port 22</div></div>
|
||||
<div class="vocab-item"><div class="vocab-term">Upload</div><div class="vocab-def">Envoyer un fichier de votre ordi vers le serveur</div></div>
|
||||
<div class="vocab-item"><div class="vocab-term">Download</div><div class="vocab-def">Récupérer un fichier du serveur vers votre ordi</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
186
fiche_ftp_o2switch.html
Normal file
186
fiche_ftp_o2switch.html
Normal file
@ -0,0 +1,186 @@
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: var(--font-sans); }
|
||||
.page { padding: 1rem 0; }
|
||||
.header { border-bottom: 2px solid var(--color-border-primary); padding-bottom: 1rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 12px; }
|
||||
.header-icon { width: 40px; height: 40px; background: #E6F1FB; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.header-icon i { font-size: 22px; color: #185FA5; }
|
||||
.header h1 { font-size: 20px; font-weight: 500; color: var(--color-text-primary); }
|
||||
.header p { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
|
||||
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; margin-left: 8px; background: #E6F1FB; color: #185FA5; vertical-align: middle; }
|
||||
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
|
||||
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
|
||||
.card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.25rem; }
|
||||
.card-title { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
|
||||
.card-title i { font-size: 15px; }
|
||||
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 0.5px solid var(--color-border-tertiary); font-size: 14px; }
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-label { color: var(--color-text-secondary); }
|
||||
.info-val { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--color-text-primary); background: var(--color-background-secondary); padding: 2px 8px; border-radius: 4px; }
|
||||
.info-val.port { color: #185FA5; background: #E6F1FB; }
|
||||
.info-val.yes { color: #3B6D11; background: #EAF3DE; }
|
||||
.info-val.warn { color: #854F0B; background: #FAEEDA; }
|
||||
.step-list { list-style: none; }
|
||||
.step-item { display: flex; gap: 10px; padding: 7px 0; border-bottom: 0.5px solid var(--color-border-tertiary); font-size: 14px; align-items: flex-start; }
|
||||
.step-item:last-child { border-bottom: none; }
|
||||
.step-num { width: 22px; height: 22px; border-radius: 50%; background: #185FA5; color: #fff; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
|
||||
.step-text { color: var(--color-text-primary); line-height: 1.5; }
|
||||
.step-text code { font-family: var(--font-mono); font-size: 12px; background: var(--color-background-secondary); padding: 1px 5px; border-radius: 3px; color: var(--color-text-primary); }
|
||||
.tip { background: #EAF3DE; border-left: 3px solid #639922; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 13px; color: #3B6D11; margin-top: 4px; }
|
||||
.warn-box { background: #FAEEDA; border-left: 3px solid #BA7517; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 13px; color: #854F0B; margin-top: 4px; }
|
||||
.meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1rem; }
|
||||
.meta-pill { font-size: 12px; padding: 4px 10px; border-radius: 20px; border: 0.5px solid var(--color-border-secondary); color: var(--color-text-secondary); }
|
||||
.section-sep { height: 1px; background: var(--color-border-tertiary); margin: 1.25rem 0; }
|
||||
.full-card { margin-bottom: 12px; }
|
||||
.logiciel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 6px; }
|
||||
.logiciel-item { border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
|
||||
.logiciel-name { font-weight: 500; color: var(--color-text-primary); }
|
||||
.logiciel-note { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
|
||||
.cmd-block { background: var(--color-background-secondary); border-radius: 6px; padding: 8px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--color-text-primary); margin-top: 6px; line-height: 1.8; }
|
||||
.cmd-comment { color: var(--color-text-secondary); }
|
||||
</style>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<div class="header">
|
||||
<div class="header-icon"><i class="ti ti-server-2" aria-hidden="true"></i></div>
|
||||
<div>
|
||||
<h1>FTP & intégration serveur <span class="badge">o2switch</span></h1>
|
||||
<p>Fiche récapitulative — Transfert de fichiers & gestion d'hébergement</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid2">
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-info-circle" aria-hidden="true"></i> C'est quoi le FTP ?</div>
|
||||
<p style="font-size:14px; color:var(--color-text-secondary); line-height:1.6;">Le <strong style="color:var(--color-text-primary)">File Transfer Protocol</strong> est un protocole permettant d'envoyer, récupérer et gérer des fichiers entre votre ordinateur et un serveur distant. C'est la méthode standard pour déployer un site web.</p>
|
||||
<div class="meta-row">
|
||||
<span class="meta-pill">Port 21 (FTP)</span>
|
||||
<span class="meta-pill">Port 22 (SFTP)</span>
|
||||
<span class="meta-pill">Protocole TCP</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-lock" aria-hidden="true"></i> FTP vs SFTP vs FTPS</div>
|
||||
<div class="info-row"><span class="info-label">FTP</span><span class="info-val warn">Non chiffré</span></div>
|
||||
<div class="info-row"><span class="info-label">SFTP (SSH)</span><span class="info-val yes">Chiffré — recommandé</span></div>
|
||||
<div class="info-row"><span class="info-label">FTPS (TLS)</span><span class="info-val yes">Chiffré</span></div>
|
||||
<div class="warn-box" style="margin-top:8px;">o2switch recommande SFTP ou FTPS — le FTP simple n'est <strong>pas sécurisé</strong>.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card full-card">
|
||||
<div class="card-title"><i class="ti ti-settings" aria-hidden="true"></i> Paramètres de connexion o2switch</div>
|
||||
<div class="grid2" style="margin-top:8px; margin-bottom:0;">
|
||||
<div>
|
||||
<div class="info-row"><span class="info-label">Hôte / Serveur</span><span class="info-val">ftp.votredomaine.fr</span></div>
|
||||
<div class="info-row"><span class="info-label">Alternative</span><span class="info-val">votreip.o2switch.net</span></div>
|
||||
<div class="info-row"><span class="info-label">Port FTP</span><span class="info-val port">21</span></div>
|
||||
<div class="info-row"><span class="info-label">Port SFTP</span><span class="info-val port">22</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="info-row"><span class="info-label">Identifiant</span><span class="info-val">compte cPanel</span></div>
|
||||
<div class="info-row"><span class="info-label">Mot de passe</span><span class="info-val">mot de passe cPanel</span></div>
|
||||
<div class="info-row"><span class="info-label">Mode transfert</span><span class="info-val yes">Passif (PASV)</span></div>
|
||||
<div class="info-row"><span class="info-label">Chiffrement</span><span class="info-val yes">SFTP ou TLS explicite</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip">Le dossier racine de votre site principal est <code style="font-family:var(--font-mono); font-size:12px; background:rgba(99,153,34,0.15); padding:1px 5px; border-radius:3px;">public_html/</code></div>
|
||||
</div>
|
||||
|
||||
<div class="grid2">
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-apps" aria-hidden="true"></i> Logiciels FTP recommandés</div>
|
||||
<div class="logiciel-grid">
|
||||
<div class="logiciel-item">
|
||||
<div class="logiciel-name">FileZilla</div>
|
||||
<div class="logiciel-note">Gratuit — Windows / Mac / Linux</div>
|
||||
</div>
|
||||
<div class="logiciel-item">
|
||||
<div class="logiciel-name">Cyberduck</div>
|
||||
<div class="logiciel-note">Gratuit — Mac / Windows</div>
|
||||
</div>
|
||||
<div class="logiciel-item">
|
||||
<div class="logiciel-name">WinSCP</div>
|
||||
<div class="logiciel-note">Gratuit — Windows uniquement</div>
|
||||
</div>
|
||||
<div class="logiciel-item">
|
||||
<div class="logiciel-name">VS Code</div>
|
||||
<div class="logiciel-note">Extension SFTP intégrée</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-folder-open" aria-hidden="true"></i> Arborescence o2switch</div>
|
||||
<div class="cmd-block">
|
||||
<span class="cmd-comment"># Répertoires principaux</span>
|
||||
/home/cpanel_user/
|
||||
├── public_html/ <span class="cmd-comment"># Site principal</span>
|
||||
├── mail/ <span class="cmd-comment"># Emails</span>
|
||||
├── logs/ <span class="cmd-comment"># Journaux</span>
|
||||
└── tmp/ <span class="cmd-comment"># Fichiers temporaires</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-sep"></div>
|
||||
|
||||
<div class="card full-card">
|
||||
<div class="card-title"><i class="ti ti-list-check" aria-hidden="true"></i> Étapes de connexion avec FileZilla</div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><div class="step-num">1</div><div class="step-text">Ouvrir FileZilla → menu <code>Fichier</code> → <code>Gestionnaire de sites</code> → cliquer <code>Nouveau site</code></div></li>
|
||||
<li class="step-item"><div class="step-num">2</div><div class="step-text">Choisir le protocole <code>SFTP</code>, saisir l'hôte <code>ftp.votredomaine.fr</code>, port <code>22</code></div></li>
|
||||
<li class="step-item"><div class="step-num">3</div><div class="step-text">Type d'authentification : <code>Normale</code> — saisir identifiant et mot de passe cPanel</div></li>
|
||||
<li class="step-item"><div class="step-num">4</div><div class="step-text">Cliquer <code>Connexion</code> — accepter l'empreinte du serveur si demandé</div></li>
|
||||
<li class="step-item"><div class="step-num">5</div><div class="step-text">Naviguer jusqu'à <code>public_html/</code> dans le panneau droit (serveur distant)</div></li>
|
||||
<li class="step-item"><div class="step-num">6</div><div class="step-text">Glisser-déposer les fichiers du panneau gauche (local) vers le panneau droit (serveur)</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grid3">
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-user-plus" aria-hidden="true"></i> Créer un compte FTP</div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><div class="step-num">1</div><div class="step-text">cPanel → section <code>Fichiers</code> → <code>Comptes FTP</code></div></li>
|
||||
<li class="step-item"><div class="step-num">2</div><div class="step-text">Saisir identifiant, mot de passe et répertoire assigné</div></li>
|
||||
<li class="step-item"><div class="step-num">3</div><div class="step-text">Cliquer <code>Créer un compte FTP</code></div></li>
|
||||
</ul>
|
||||
<div class="tip">Utile pour donner accès à un prestataire sans partager le mot de passe cPanel.</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-file-upload" aria-hidden="true"></i> Upload WordPress</div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><div class="step-num">1</div><div class="step-text">Placer les fichiers dans <code>public_html/</code></div></li>
|
||||
<li class="step-item"><div class="step-num">2</div><div class="step-text">Thèmes → <code>wp-content/themes/</code></div></li>
|
||||
<li class="step-item"><div class="step-num">3</div><div class="step-text">Extensions → <code>wp-content/plugins/</code></div></li>
|
||||
</ul>
|
||||
<div class="tip">Pour réparer un site cassé, renommer un plugin en FTP suffit à le désactiver.</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title"><i class="ti ti-alert-triangle" aria-hidden="true"></i> Erreurs fréquentes</div>
|
||||
<ul class="step-list">
|
||||
<li class="step-item"><div class="step-num" style="background:#BA7517;">!</div><div class="step-text">Connexion refusée → vérifier le port et le mode passif</div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#BA7517;">!</div><div class="step-text">Timeout → activer le mode <code>PASV</code> dans FileZilla</div></li>
|
||||
<li class="step-item"><div class="step-num" style="background:#BA7517;">!</div><div class="step-text">Droits refusés → vérifier les permissions (755 dossiers / 644 fichiers)</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card full-card" style="margin-top:4px;">
|
||||
<div class="card-title"><i class="ti ti-shield-check" aria-hidden="true"></i> Bonnes pratiques de sécurité</div>
|
||||
<div class="grid2" style="margin-top:8px; margin-bottom:0;">
|
||||
<div>
|
||||
<div class="info-row"><span class="info-label">Toujours utiliser SFTP</span><span class="info-val yes">Chiffrement SSH</span></div>
|
||||
<div class="info-row"><span class="info-label">Permissions fichiers</span><span class="info-val">644</span></div>
|
||||
<div class="info-row"><span class="info-label">Permissions dossiers</span><span class="info-val">755</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="info-row"><span class="info-label">Supprimer comptes FTP inutilisés</span><span class="info-val yes">Bonne pratique</span></div>
|
||||
<div class="info-row"><span class="info-label">Ne jamais partager le mdp cPanel</span><span class="info-val yes">Créer un sous-compte</span></div>
|
||||
<div class="info-row"><span class="info-label">Sauvegarder avant upload</span><span class="info-val yes">Systématique</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user