Catégories
FCS FCS2-cours

Utiliser Filezilla

Dans ce cours, nous allons voir comment utiliser le logiciel Filezilla pour transférer le dossier d’un site simple, de notre poste de travail (en local) sur le(s) serveur(s) d’Alwaysdata.

Lors du cours précédent (Utiliser les services gratuits d’Alwaysdata), vous avez ouvert un compte gratuit chez l’hébergeur Alwaysdata. Je vous ai indiqué comment récupérer les paramètres de connexion FTP dont vous allez avoir besoin. Assurez-vous de les avoir à portée de main !

Rappel

Vous disposez maintenant de toutes les données de paramétrage pour pouvoir mettre votre site en ligne en utilisant le client FTP Filezilla.

➜ Si ce logiciel n’est pas installé sur votre poste de travail, je vous invite à l’installer dès maintenant, en veillant à installer Filezilla-client depuis l’adresse https://filezilla-project.org/download.php?type=client.

Attention, soyez très vigilants : l’adresse filezilla.org (sans le ”-project”…) est un site malveillant ! N’essayez même pas d’y aller !

Les tutos

Je ne vais pas réinventer le fil à couper le beurre, il existe de nombreux tutos en ligne pour apprendre à utiliser Filezilla. Voici ma sélection.

Les vidéos

L’installation de Filezilla

Dans la vidéo ci-dessous, l’auteur va droit au but, installe Filezilla et transfère un fichier PSD dans un dossier nommé “public_html”. Pour aller plus loin, nous sommes invités à regarder une autre vidéo… sur laquelle il envisage de nous montrer comment installer WordPress ! Ben non, cela ne nous concerne pas (… pas maintenant du moins) mais, pour tout ce qui nous est présenté, du début jusqu’au transfert du fichier PSD, je valide !

L’utilisation de Filezilla

Dans la vidéo suivante, tout commence bien puis l’auteur s’emmêle un peu les pinceaux avec les ports 21 et 22 et les protocoles ftp et sftp… mais pour la suite c’est impeccable. Le dossier public côté serveur est un dossier “www” (comme chez Alwaysdata)… cela nous va donc parfaitement. Validé !

L’auteur de la vidéo ci dessus (Fabien Numelion) propose sur sa chaîne YouTube d’autres vidéos susceptibles de vous intéresser…

Les tutos écrits (et illustrés)

J’ai repéré il y a déjà longtemps un article qui expose les choses de manière détaillée. Filezilla a relooké légèrement son interface depuis le moment où cet article a été rédigé mais les boutons et les fenêtres n’ont pas changé de place…

Vous pouvez donc lire Comment ça marche Filezilla ?. Pour les curieux ou ceux qui souhaitent se rafraîchir la mémoire sur un point ou deux, il y a des liens vers d’autres articles comme C’est quoi un serveur FTP ?. On est en plein dans le sujet !

La pratique

Concrètement, il va falloir transférer dans le dossier “www” situé sur le serveur d’alwaysdata le dossier complet de votre site personnalisé situé en attendant sur votre poste de travail. En utilisant Filezilla comme cela vous a été montré et expliqué plus haut, tout devrait marcher comme sur des roulettes !

Précautions à prendre

Avant de vous lancer, vous allez faire attention à quelques petites choses…

Le fichier index.html

Il est impératif, pour que votre site s’affiche dans la fenêtre du navigateur de vos futurs lecteurs en saisissant une simple URL, que le dossier de votre site contienne un fichier nommé “index.html”. C’est la page d’accueil… même si elle est la seule page du site. Si le fichier html que vous voulez montrer au reste du monde porte un autre nom, renommez-le “index.html” !

Si vous le nommez autrement, il sera nécessaire de saisir le nom du fichier à la fin de l’url d’accès au dossier du site.

Les images dans le dossier img

Inutile de transférer sur le serveur d’Alwaysdata des images de maquette qui n’ont pas été utilisé dans la page HTML. Veillez à ce que vos images soient correctement compressées. Vos images doivent être à la dimension maximale de leur utilisation dans le site (affiché sur grand écran)… pas plus ! Compressées au format jpeg (qualité élevée ou 60%), vos photos ne surchargeront pas votre espace d’hébergement.

Si vous chargez excessivement l’espace mis gratuitement à votre disposition (100 Mo maximum), vous ne pourrez pas héberger votre portfolio et le CMS avec lequel nous travaillerons au niveau 3 de la formation !

Le nom du dossier

L’url permettant d’accéder à votre compte est de la forme nomducompte.alwaysdata.net. Quand vous aurez transféré votre dossier de site, pour accéder au fichier “index.html” il faudra saisir une adresse sous la forme nomducompte.alwaysdata.net/nom-du-dossier.

L’adresse de votre site se termine par le nom que vous allez donner au dossier qui contient le fichier “index.html” et les dossiers dépendants (le dossier “css”, le dossier “img”, etc.).

Nommez votre dossier de site sans mettre de majuscule ou de chiffre au début du nom, sans lettres accentuées ni espaces. Utilisez de préférence les tirets hauts (tirets du 6) pour séparer les mots. Soyez concis et explicites !

➜ Une fois ces précautions prises, vous pouvez transférer le dossier correctement nommé de votre poste de travail vers le dossier “www” (dans le dossier… pas à côté du dossier “www”).

Test de bon fonctionnement

Si tout s’est bien passé, vous devriez accéder à votre site en saisissant dans votre navigateur l’adresse nomducompte.alwaysdata.net/nom-du-dossier.

En transmettez-moi cette adresse, je pourrai voir votre site, comme tous ceux à qui vous communiquerez la même adresse !

➜ Transférez un autre dossier de page Web, nommé convenablement (avec son fichier “index.html” à l’intérieur)… Modifiez ensuite le nom du dossier à la fin de l’url précédente : vous devriez accéder à votre deuxième site Web !

Voilà qui vous ouvre de nouvelles perspectives pour l’avenir 😉

Par Yves Goguely

Formateur au GRETA Clermont-Auvergne