187 lines
13 KiB
HTML
187 lines
13 KiB
HTML
|
|
<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>
|