Transférer un site en ligne avec Cyberduck

La microressource précédente a expliqué ce qu'est un hébergement et ce qui le sépare du mode local. Celle-ci fait le trajet en entier, geste par geste : un dossier sur votre disque, un logiciel de transfert, et la même page qui s'affiche depuis n'importe quel navigateur du monde. Suivez-la sur votre poste — l'important est de voir où passent les fichiers.

1. Le trajet que nous allons parcourir

Trois lieux, deux déplacements. Tout le module 1.3 tient dans ce schéma :

Un client FTP ne fait rien d'autre que copier des fichiers, comme vous le feriez d'un dossier à une clé USB. La seule différence est que la destination se trouve à l'autre bout d'internet et qu'elle demande un mot de passe.

2. Installer Cyberduck

Nous utiliserons Cyberduck : il est gratuit, open source, existe en version Windows et macOS, et son interface tient en une fenêtre — ce qui en fait un bon outil de démonstration.

1. Télécharger

   Rendez-vous sur cyberduck.io et prenez la version correspondant à votre système. Le site propose un don au téléchargement : il est facultatif, le logiciel fonctionne sans.

2. Installer et ouvrir

   Installation classique, suivant/suivant. À l'ouverture, la fenêtre est vide : c'est normal, aucune connexion n'est encore enregistrée.

3. Les identifiants de connexion

Ces trois informations viennent du Manager Infomaniak, l'espace d'administration de votre hébergement : connectez-vous sur manager.infomaniak.com, ouvrez votre hébergement et cherchez la section FTP/SSH. C'est là que se créent les comptes FTP et que se lisent leurs identifiants. Ils suivent toujours le même moule :

Les zones en pointillé sont à remplacer par vos valeurs. Pour Claire, dont l'hébergement porte l'identifiant abc123, cela donne :

Serveur          abc123.ftp.infomaniak.com
Utilisateur      abc123.ftp_claire
Mot de passe     Claire@ADIUT75

Le mot de passe suit ici une convention de classe — Prénom avec sa majuscule, @, puis ADIUT75, identique pour tout le monde — uniquement pour que chacun retrouve le sien pendant la formation.

4. Ouvrir la connexion dans Cyberduck

1. Nouvelle connexion

   Cliquez sur Ouvrir la connexion (icône en haut à gauche). Une fenêtre de réglages apparaît.

2. Choisir le protocole

   Dans la liste déroulante du haut, sélectionnez FTP-SSL (Explicit AUTH TLS) plutôt que FTP tout court : la connexion est alors chiffrée, votre mot de passe ne circule pas en clair. Le port se remplit tout seul. Si votre hébergement propose du SFTP (port 22), il est préférable encore : c'est le même principe, sur un canal entièrement chiffré.

3. Remplir les trois champs

   Serveur, nom d'utilisateur, mot de passe : recopiez les valeurs du tableau ci-dessus. Cochez Enregistrer le mot de passe pour ne pas le retaper à chaque fois.

4. Se connecter

   Cliquez sur Connexion. Si un avertissement de certificat s'affiche, acceptez-le. La fenêtre affiche alors le contenu du serveur : vous êtes chez vous, à distance.

5. Déposer les fichiers

À la connexion, Cyberduck affiche directement la racine de votre sous-domaine : ce que vous déposez là est exactement ce que le visiteur verra. Pas de dossier intermédiaire à ouvrir, pas de niveau à chercher.

Racine du sous-domaine   ← vous y êtes déjà
├── index.html
└── css/
    └── style.css

1. Glisser-déposer

   Ouvrez le dossier de votre projet dans l'explorateur, sélectionnez index.html et le dossier css, et faites-les glisser dans la fenêtre Cyberduck. Une barre de progression apparaît.

2. Respecter l'arborescence

   Déposez les dossiers, pas seulement leur contenu : si style.css atterrit à côté de index.html au lieu d'être dans css/, le lien href="css/style.css" de la page ne trouvera rien et le site s'affichera sans aucune mise en forme.

6. Vérifier dans le navigateur

Le transfert terminé, ouvrez l'adresse de votre site. La page doit s'afficher exactement comme en local. Trois réflexes valent d'être pris tout de suite :

• Forcer le rechargement

  Ctrl+F5 : le navigateur garde en mémoire l'ancienne version des fichiers. Sans ça, vous croirez que votre modification n'est pas partie.

• Tester la navigation

  Cliquez tous les liens de la page. Un lien qui marchait en local peut casser en ligne : le serveur, lui, distingue les majuscules des minuscules.

• Contrôler le cadenas

  L'adresse doit commencer par https:// et non http://. Le « s » signifie que les échanges entre le visiteur et le serveur sont chiffrés. Les hébergeurs fournissent aujourd'hui le certificat gratuitement, souvent activé par défaut : si le cadenas manque, cherchez l'option SSL dans le Manager.

• Vérifier sur un autre appareil

  Ouvrez l'adresse depuis votre téléphone. C'est la preuve que le site est bien public, et non affiché depuis le cache de votre ordinateur.

7. Quand ça ne marche pas