Louer un hébergement consiste à louer un espace disque quelque part dans le « cloud » sur lequel vous pourrez mettre vos fichiers, et qui sera accessible depuis une adresse web (parfois juste une adresse IP).
Ces offres d’hébergement peuvent varier énormément en prix, de quelques euros par mois à plusieurs centaines d’euros selon l’espace disque loué et le trafic généré.
Dans votre cas vous n’avez pas forcément besoin de beaucoup d’espace, et je vous propose donc de passer par alwaysdata, qui vous offre une option 100mo gratuits à vie.
Le nom de domaine est loué auprès d’un registraire[1] et coûte généralement moins de 20€/an (sauf si vous commencez à aller chercher des extensions folles du genre .pizza ou .xxx).
Certains hébergeurs proposent la location du nom de domaine et l’hébergement en même temps (ovh par exemple), mais d’expérience c’est mieux de séparer les deux, cela permet de changer plus facilement d’hébergeur si besoin. L’offre gratuite d’alwaysdata ne comprends pas de location de nom de domaine.
Je vous propose donc d’utiliser Gandi.net.
Ne créez pas vos comptes alwaysdata et gandi depuis la connexion internet d’Estienne, car par le passé ça a crée des problèmes de ban : comme vous avez tous la même IP, certains sites vous prennent pour des bots qui veulent créer des comptes gratuits/pas cher pour héberger du contenu illégal, et bannissent l’IP de l’école. Faites vos comptes depuis chez vous, ou au pire en partage de connexion mobile.
Pour votre nom de domaine, ne mettez pas de caractères accentués. Certains extensions le permettent parfois (le .fr et le .ca notamment), mais c’est extrêmement mal supporté par tout un tas de logiciels et de sites, et votre beau hé-ho.com sera souvent affiché xn--h-ho-bpa.com (pour ceux que ça intéresse ça s’appelle du punycode[2], et c’est très mal vu car souvent associé au phishing.
Limitez-vous donc aux lettres non-accentuées bas de casse, et au tiret :
prenom-nom.fr : okprenomnom.com : okprénom-nom.fr : non
Rendez-vous sur le site alwaysdata.com et cliquez sur l’offre 100Mo « Free for life » ou « Gratuit à vie ».
Créez votre profil en renseignant une adresse personnelle et un mot de passe. N’oubliez pas de cocher la case d’acceptation des CGU.
Choisissez le plan 100Mo gratuit, un nom de projet (je vous conseille d’utiliser le même que celui que vous prévoyez d’utiliser pour votre nom de domaine : par exemple pour arnaudjuracek.fr, j’aurais renseigné comme nom arnaudjuracek).
Indiquez un mot de passe qui vous servira à transférer des fichiers sur votre site, je vous conseille pour plus de simplicité d’utiliser le même que celui que vous avez renseigné pour créer votre profil.
C’est bon pour l’instant, passons maintenant à la location du nom de domaine sur Gandi.
Rendez-vous sur gandi.net et entrez le nom de domaine que vous souhaitez enregistrer (dans la capture d’écran il s’agit de xynossi).
Gandi va vous proposer un certain nombre d’extension de nom de domaine possible, avec une indication de prix à l’année. Choisissez celle qui vous convient.
Sélectionnez la durée de location de votre nom de domaine, et validez le paiement. La durée minimale est d’un an, et Gandi vous enverra des emails pour vous notifier de l’expiration de votre nom de domaine et pour vous proposer de renouveler.
Alwaysdata vous offre gracieusement 100mo de stockage sur leur serveur.
Vous pouvez y placer tous les fichiers que vous voulez pour y avoir accès plus tard et bien sûr également les fichiers nécéssaire au fonctionnement de votre site (tout votre dossier portfolio).
Pour se faire il va vous falloir un client FTP (File Transfert Protocol), c’est-à-dire un logiciel qui va vous permettre de vous connecter à votre serveur et d’y placer des fichiers.
J’utilise personnellement FileZilla, qui est gratuit et disponible sur macOs et Windows.
Une fois le logiciel téléchargé, installé et ouvert, allez dans « Fichiers → Gestionnaire de sites… » pour ajouter votre serveur FTP.
Il vous faudra renseigner les champs hôte (l’adresse FTP de votre serveur), identifiant et mot de passe.
Vous trouverez les infos nécessaires sur votre espace personnel sur le site d’alwaysdata dans la rubrique « Accès distant → FTP », l’hôte FTP devrait être une adresse de la forme ftp-VOTRENOM.alwaysdata.net, et les identifiants votrenom et le mdp identique à celui que vous utilisez pour vous connecter à alwaysdata.
Une fois les champs remplis dans FileZilla, cliquez sur le bouton connexion et vous devriez arriver à une fenêtre qui ressemble à cela :
La partie à gauche correspond aux fichiers sur votre ordinateur, et la partie à droite aux fichiers sur votre serveur FTP. Les serveurs d’alwaysdata contiennent par défaut deux dossiers, admin et www (oubliez admin, ce n’est pas important pour ce tuto).
Tout ce que vous mettrez dans www sera par contre accessible depuis internet : pour mettre votre site en ligne, il vous suffira donc d’y placer le contenu de votre dossier portfolio.
Attention, ne mettez pas portfolio dans www, mais seulement son contenu : vous devriez donc avoir www/index.html, c’est ce qu’attend alwaysdata pour pouvoir afficher votre site sur internet.
À chaque fois que vous voudrez faire une mise à jour sur votre site, vous n’aurez qu’à écraser les fichiers déjà existants sur votre serveur avec vos nouveaux fichiers, et le tour est joué.
Si vous avez suivi ce tuto jusque là, vous devriez déjà pouvoir accéder à votre site depuis l’adresse qu’alwaysdata vous donne. Pour la trouver, retournez sur votre page d’administration alwaysdata dans « Sites », normalement vous devriez avoir un « Site par défaut » ou quelque chose du genre, avec une adresse du type votre-nom.alwaysdata.net.
Pour pouvoir utiliser votre nom de domaine, suivez ce tutoriel alwaysdata. Côté Gandi, il vous faudra aller dans votre espace, cliquer sur « DOMAIN » dans la barre latérale, puis sur votre nom de domaine et enfin sur l’onglet « nameservers » et ajouter les deux adresses DNS d’alwaysdata :
dns1.alwaysdata.comdns2.alwaysdata.comUne fois tout cela fait, vous pourrez éditer dans alwaysdata votre « Site par défaut » pour rajouter votre nom de domaine (vous aurez donc mon-nom.alwaysdata.net et mon-nom.fr dans la liste d’adresses).
Important, dans l’onglet SSL lorsque vous éditez votre site, cliquez sur « Forcer le HTTPS » pour avoir un site en https et non en http.
Attention, la connexion entre votre serveur et votre nom de domaine n’est pas instannée, et il se peut que plusieurs jours soient nécessaires avant de pouvoir accès à votre site depuis votre nom de domaine.
Registraire de nom de domaine, Wikipedia ↩︎