Aller au menu - Aller au contenu

Icône Envoyez votre site sur le web

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 31/12/2010
Difficulté : Facile Facile Durée d'étude : 1 heure Creative Commons BY-NC-SA
133 390 visites depuis 7 jours, dont 452 sur ce chapitre classé 2/786
Votre site est tout beau, tout propre, tout prêt... Mais comme il est sur votre disque dur, personne d'autre ne va pouvoir en profiter !

Vous aimeriez donc l'envoyer sur le web, mais... bien sûr vous ne savez pas comment faire :p
Nous allons découvrir dans cette annexe tout ce qu'il faut savoir pour envoyer son site sur le web. Dans l'ordre :
  1. Nous découvrirons comment réserver un nom de domaine
  2. Puis nous verrons ce qu'est un hébergeur et comment cela fonctionne
  3. Enfin, une fois notre hébergeur choisi, nous verrons comment utiliser un client FTP pour enfin pouvoir transférer les fichiers sur le net :)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Le nom de domaine

Savez-vous ce qu'est un nom de domaine ?
Il s'agit en fait d'une adresse sur le Web : siteduzero.com est par exemple un nom de domaine.

Un nom de domaine est constitué de 2 parties :

siteduzero.com


  • En rouge, le nom de domaine proprement dit. Il s'agit d'un nom que l'on peut généralement choisir librement, du tant que personne ne l'a réservé avant nous. Il peut contenir des lettres et des chiffres, mais pas de symboles particuliers (comme le ç français, le é, le è, les espaces, etc).
  • En bleu, l'extension (aussi appelée tld). Il existe grosso modo une extension par pays (.fr pour la France, .be pour la Belgique, .ca pour le Canada). Toutefois, il y a aussi des extensions utilisées au niveau international comme .com, .net, .org. Elles étaient au départ réservées aux sites commerciaux, aux organisations, etc... mais cela fait longtemps que tout le monde peut les réserver. D'ailleurs, .com est très probablement l'extension la plus utilisée sur le Web.

En général, un site web voit son adresse précédée par "www", comme par exemple "www.siteduzero.com". Cela ne fait pas partie du nom de domaine : en fait, "www" est ce qu'on appelle un sous-domaine, et on peut en théorie en créer autant qu'on veut une fois qu'on est propriétaire du nom de domaine :)
Le "www" a été adopté par tous les webmasters, c'est une sorte de convention, mais elle n'est absolument pas obligatoire.

Réserver un nom de domaine



Moi aussi je veux un nom de domaine pour mon site ! Comment dois-je faire ?

Alors j'ai une bonne et une mauvaise nouvelle :p
Comme d'hab, on va commencer par la mauvaise :

  • La mauvaise : ce n'est pas gratuit...
  • La bonne : ... ce n'est vraiment pas cher du tout :)

En effet, un nom de domaine coûte entre 7 et 12 € pour un an.
Le prix peut varier en fonction de l'extension. Ainsi, l'extension .info est généralement proposée à plus bas prix et peut s'avérer être une alternative intéressante. Mais si vous voulez une adresse plus "courante", il faudra plutôt viser une extension de type ".com", ou encore ".fr".

Pour réserver un nom de domaine, 2 solutions :

  • Passer par un registrar spécialisé. C'est un organisme qui sert d'intermédiaire entre l'ICANN (l'organisation qui gère les noms de domaine au niveau international, tel les .com) et vous. 1&1, OVH et Gandi sont de célèbres registrars français.
  • Encore mieux : vous pouvez commander le nom de domaine en même temps que l'hébergement (c'est ce que je vous conseille). Comme ça vous faites d'une pierre deux coups, vu que vous aurez de toute façon besoin de l'hébergement et du nom de domaine.


Pour plus d'info sur l'ICANN, je vous invite à lire cette page en français de leur site qui détaille un peu plus leur rôle sur le Web. C'est que c'est un sacré boulot de gérer la plupart des noms de domaine du Web !


Dans ce chapitre, nous allons voir comment commander un nom de domaine en même temps que l'hébergement, c'est de loin la solution la plus simple et la moins coûteuse pour vous.
Retour en haut

L'hébergeur

Intéressons-nous maintenant à l'hébergeur.

Qu'est-ce qu'un hébergeur et pourquoi aurais-je besoin de lui ?


Sur Internet, tous les sites web sont stockés sur des ordinateurs particuliers appelés "Serveurs". Ce sont des ordinateurs généralement très puissants qui restent tout le temps allumés. Ils contiennent les pages des sites web et les délivrent aux internautes qui les demandent, à toute heure du jour et de la nuit.

Voici à quoi ressemble par exemple un serveur :

Image utilisateur
Un serveur


Un serveur ne possède pas d'écran car, la plupart du temps, il tourne tout seul sans avoir besoin qu'on fasse quoi que ce soit dessus. Comme vous le voyez, les serveurs sont très plats : c'est un format spécial de serveur (appelé "1U"). Cela permet de les empiler dans des baies (une sorte d'armoire climatisée pour serveurs ^^ ).

Voici à quoi ressemble une baie :

Baie de serveurs
Une baie de serveurs


Comme vous le voyez, il y a un écran pour toute la baie. C'est suffisant car on ne branche l'écran sur un serveur que si celui-ci rencontre un problème. La plupart du temps, heureusement, le serveur travaille sans broncher :p

Le rôle de l'hébergeur



L'hébergeur est une entreprise qui se charge de gérer des baies de serveurs. Elle s'assure du bon fonctionnement des serveurs 24h/24 7j/7. En effet, si l'un d'eux tombe en panne, tous les sites présents sur la machine deviennent inaccessibles (et ça fait des clients mécontents :D ).

Ces baies se situent dans des lieux particuliers appelés datacenters. Les datacenters sont donc des "entrepôts à serveurs" en quelque sorte, et leur accès est très protégé.

Image utilisateur
Un datacenter. On voit ici plusieurs baies de serveurs.


Il est aussi possible en théorie d'héberger un site sur son propre ordinateur. Toutefois, c'est complexe, il vaut mieux avoir des connaissances en Linux, l'ordinateur doit être assez puissant, tourner jour et nuit et... surtout... la connexion doit être à très très haut débit (surtout en upload, la vitesse d'envoi des fichiers compte énormément). Les particuliers n'ont en règle générale pas une connexion suffisamment puissante pour héberger des sites, tandis que les datacenters oui : ils sont câblés en fibre optique (ça peut aller à une vitesse de plusieurs Gbps ! :D )


Bref, gérer un serveur soi-même est complexe, et la plupart du temps les particuliers et les entreprises font appel à un hébergeur dont c'est le métier.

Trouver un hébergeur



Les hébergeurs, contrairement aux registrars, sont très très nombreux. Il y en a de tous types, à tous les prix. Il y a un vocabulaire à connaître pour vous repérer dans leurs offres :

  • Hébergement mutualisé : si vous optez pour une offre d'hébergement mutualisée, votre site sera placé sur un serveur gérant plusieurs sites à la fois (peut-être une centaine, peut-être plus). C'est l'offre la moins chère et c'est celle que je vous recommande de viser si vous démarrez votre site web.
  • Hébergement dédié virtuel : cette fois, le serveur ne gère que très peu de sites (généralement moins d'une dizaine). Cette offre est généralement adaptés aux sites qui ne peuvent plus tenir sur un hébergement mutualisé car ils ont trop de trafic (trop de visiteurs), mais qui ne peuvent pas se payer un hébergement dédié (voir ci-dessous).
  • Hébergement dédié (on parle aussi de "serveur dédié") : c'est le nec plus ultra. Le serveur gère uniquement votre site et aucun autre. Attention, cela coûte assez cher et il vaut mieux avoir des connaissances en Linux pour administrer le serveur à distance.
    Par exemple, le Site du Zéro est lui-même sur un hébergement dédié, car son trafic est très important.

Mais où puis-je trouver un hébergeur ?

Oh ça c'est très simple :D
Une recherche dans Google de "hébergeur web" vous donnera plusieurs millions de résultats. Vous n'aurez que l'embarras du choix.

Logo PlanetHoster
Si je puis me permettre un conseil, je vous recommande de jeter un œil à l'hébergeur PlanetHoster qui propose des services d'hébergement de qualité. Ils font d'ailleurs des réductions pour tous les visiteurs du Site du Zéro ! :)

1&1
Si les offres de PlanetHoster ne vous conviennent pas, vous pouvez regarder chez l'hébergeur 1&1 (un concurrent :D ) ou encore MavenHosting, qui proposent d'autres offres pour les particuliers et entreprises.

La suite de ce chapitre vous détaille la procédure pour héberger votre site chez PlanetHoster, mais sachez que cela fonctionne quasiment de la même manière avec 1&1 et MavenHosting.

Revenons à PlanetHoster. L'hébergeur propose plusieurs offres d'hébergement mutualisé :

Hébergements de PlanetHoster


PlanetHoster fait des réductions spéciales pour les visiteurs du Site du Zéro sur tous ces plans via un code promotionnel :
  • 5% de remise pour le plan essentiel
  • 15% de remise pour les plans performance et illimité

Ces remises sont valables si vous rentrez un code promotionnel (j'en reparle un peu plus bas) pour une commande annuelle de l'un de ces plans.


  • Plan essentiel : 10 Go d'espace disque et 250 Go de trafic.
  • Plan performance : 50 Go d'espace disque et trafic illimité.
  • Plan illimité : espace disque et trafic illimités.

Ces offres sont en fait très similaires, elles diffèrent seulement au niveau de l'espace de stockage et du trafic.

Mais qu'est-ce qu'ils appellent le "trafic" ? o_O

Le trafic, c'est la quantité de données envoyées par mois aux visiteurs de votre site. Par exemple, si vous avez une image de 1 Mo sur votre site et qu'elle est chargée 500 fois dans le mois par vos visiteurs, alors vous créerez un trafic de 500 Mo.
En pratique, il faut savoir que les navigateurs des visiteurs mettent en cache les images, ce qui leur évite d'avoir à recharger plusieurs fois une même image. Cela diminue d'autant plus le trafic nécessaire.

Si vous avez beaucoup de visiteurs (donc beaucoup de trafic), il faudra choisir un plan qui autorise plus de trafic.

Commander un hébergement pour votre site web


Après avoir cliqué sur n'importe quel bouton "Commander", nous arrivons sur la page suivante :

Choix du nom de domaine PlanetHoster


Nous avons ici trois informations :
  • Choisissez un produit : indique quel plan vous avez choisi. Vous pouvez en changer directement via cet encart ;
  • Résumé : ce cadre, comme son nom l'indique, résume votre commande avec le plan choisi ainsi que le prix à payer ;
  • Nom de domaine : cette partie vous permet de choisir le nom de domaine de votre site web. Nous allons y venir.

Le champ de texte se trouvant dans le cadre Résumé vous permet de rentrer un code promotionnel :
  • SiteDuZero-Perso : si vous commandez un plan essentiel (à 2,99€ / mois)
  • SiteDuZero : si vous commandez n'importe quel autre plan

Par exemple pour le code SiteDuZero-Perso :

Code promotionnel chez PlanetHoster


Validez, et vous aurez alors une réduction sur le montant total du pack d'hébergement ! :D
Merci qui ?


Le champ de texte se trouvant sous Nom de domaine vous invite à saisir… votre nom de domaine. Le site de PlanetHoster va alors se charger de vérifier si le domaine est disponible. Si c'est bon, vous pouvez passer à la suite. :)
Sinon, il faudra choisir un autre nom de domaine car quand le domaine est déjà pris vous ne pouvez pas faire grand chose. :(

Ensuite, le site vous demande si vous désirez qu'il enregistre ce domaine ou si vous désirez l'enregistrer séparément.

Choix d'un nom de domaine chez PlanetHoster


Obtenir un "vrai" nom de domaine (.fr, .com, .net, .org...) est habituellement payant chez les hébergeurs. Néanmoins, si vous achetez un hébergement d'un an chez Planethoster, le nom de domaine est offert (il est compris dans l'hébergement).


Il ne vous reste plus qu'à renseigner vos coordonnées et finaliser l'achat par carte bancaire ou Paypal.
Une fois les formalités et le paiement effectués, vous êtes redirigé vers PlanetHoster, qui vous confirme la bonne prise en compte de votre commande.
Vous devriez recevoir un peu plus tard un e-mail vous indiquant toutes les informations nécessaires pour mettre en place votre site. Conservez-les précieusement, vous en aurez besoin.

Lorsque vous aurez reçu par email vos identifiants pour vous connecter au serveur de votre hébergeur, vous pouvez passer à l'étape suivante : envoyer votre site web sur le serveur de votre hébergeur !
Retour en haut

Utiliser un client FTP

Installer un client FTP




FTP signifie File Transfer Protocol et, pour faire court et simple, c'est le moyen que l'on utilise pour envoyer nos fichiers.
Il existe des logiciels permettant d'utiliser le FTP pour transférer vos fichiers sur Internet.

Image utilisateur
Bien entendu, des logiciels FTP il en existe des centaines, gratuits, payants, français, anglais etc...
Pour que nous soyons sur la même longueur d'ondes, je vais vous proposer celui que j'utilise qui est gratuit et en français : FileZilla.
Ce logiciel n'a rien à avoir avec Mozilla, si ce n'est qu'il se termine lui aussi par "zilla". N'allez donc pas croire que je vous force à utiliser des logiciels d'un même éditeur, c'est tout à fait faux
D'ailleurs, vous pouvez utiliser n'importe quel autre logiciel FTP si ça vous chante, ça ne me dérange absolument pas.

Quoiqu'il en soit, je vais vous montrer quelle est la marche à suivre avec FileZilla.
Première étape : ... le télécharger bien entendu ;)

Télécharger FileZilla (3,9 Mo)

Je vous fais confiance pour l'installation, elle est toute simple et vous ne devriez pas avoir de problème ;)
Lancez le logiciel, et vous devriez voir ceci :

Image utilisateur

A première vue, ça a l'air un peu compliqué (à première vue seulement). En fait, le principe est très simple.
Il y a 4 grandes zones dans la fenêtre à connaître :
  1. En haut, vous verrez apparaître les messages qu'envoie et reçoit le logiciel. Si vous avez un peu de chance, vous verrez même la machine vous dire Bonjour" (si si je vous jure ;)) En général, cette zone ne nous intéresse pas vraiment, sauf s'il y a des messages d'erreur... et comme ils sont écrits en rouge, vous devriez pas les louper :p
  2. A gauche, c'est votre disque dur. Dans la partie du haut vous avez les dossiers, et dans la partie du bas la liste des fichiers du dossier actuel.
  3. A droite, c'est la liste des fichiers envoyés sur Internet. Pour le moment il n'y a rien, car on ne s'est pas "connecté", mais ça va venir ne vous en faites pas.
  4. Enfin, en bas, vous verrez apparaître les fichiers en cours d'envoi (et le pourcentage d'envoi).


La première étape va être de se "connecter" au serveur de votre hébergeur.


Configurer le client FTP



Quel que soit l'hébergeur que vous avez choisi, cela fonctionne toujours de la même manière. On va vous fournir 3 informations qui sont indispensables pour que FileZilla puisse se connecter au serveur :
  • L'IP : c'est "l'adresse" du serveur. Le plus souvent, on vous donnera quelque chose du genre ftp.mon-site.com, mais il peut aussi s'agir d'une suite de nombres comme 122.65.203.27
  • Le login : c'est votre identifiant, on vous l'a probablement demandé. Vous avez peut-être mis votre pseudo, ou le nom de votre site. Mon login pourrait par exemple être mateo21.
  • Le mot de passe : soit on vous a demandé un mot de passe, soit (c'est plus probable) on vous en a attribué un d'office (un truc imprononçable du genre crf45u7h)
Si vous avez ces 3 informations, vous êtes le roi du monde :D (du moins, vous allez pouvoir continuer ce tutoriel ^^ )
Si vous ne les avez pas, il faut que vous les cherchiez c'est indispensable. On vous les a probablement envoyées par mail. Sinon, n'hésitez pas à les demander à votre hébergeur (IP / Login / Mot de passe).

Maintenant que nous sommes en possession de ces informations, nous allons les donner à FileZilla qui en a besoin pour se connecter au serveur.

Cliquez sur la petite icône en haut à gauche (pas sur la petite flèche à droite, mais sur l'image) : Image utilisateur

Une fenêtre s'ouvre. Cliquez sur "Nouveau site" et donnez-lui le nom que vous voulez (par exemple Site du Zér0). A droite, vous allez devoir indiquer les 3 informations dont je viens de vous parler, comme ceci :

Image utilisateur

Vous pouvez distinguer en haut l'hôte (c'est là qu'il faut indiquer l'adresse ip, du genre ftp.attitude-nature.com).
Pour pouvoir entrer le login / mot de passe, cochez Type d'authentification : Normal
Ici le login est attitudeU et le mot de passe est... caché (vous croyiez quand même pas que j'allais vous le donner ?! :p)

Cliquez sur "Connexion" et le tour est (presque) joué.


Transférer les fichiers



A ce stade, 2 possibilités :
  • Soit la connexion a réussi, et vous voyez apparaître en haut des messages en vert comme "Connecté". Dans ce cas, la zone de droite de la fenêtre de FileZilla devrait s'activer et vous verrez les fichiers qui se trouvent déjà sur le serveur (il se peut qu'il y en ait quelques-uns déjà présents).
  • Soit ça a planté, vous avez plein de messages écrits en rouge et là bah... Il n'y a pas 36 solutions : vous vous êtes plantés en tapant l'IP ou le login ou le mot de passe. Un de ces éléments est incorrect, veillez à les redemander à votre hébergeur car s'ils sont bons ça doit marcher.



Si la connexion a réussi, alors ce que vous avez à faire est très simple : dans la partie de gauche, cherchez où se trouvent sur votre disque dur vos fichier .html et .css (mais aussi vos images .jpg, .png, .gif etc...).
Double-cliquez sur le fichier que vous voulez transférer à gauche. Au bout de quelques secondes, il apparaîtra à droite, ce qui voudra dire qu'il a été correctement envoyé sur le serveur, donc qu'il est accessible sur Internet !!! :D
Vous pouvez envoyer n'importe quel type de fichier. Bien entendu, généralement on envoie des fichiers .html, .css et des images, mais vous pouvez aussi très bien envoyer des .pdf, des programmes, des zip etc etc...
Voici par exemple ce que ça donne quand on a transféré un fichier "index.html" :

Image utilisateur

Il apparaît à droite, ce qui veut dire qu'il est maintenant disponible sur le serveur :)
Veuillez noter qu'il faut que votre page d'accueil s'appelle "index.php". C'est la page qui sera chargée lorsqu'un nouveau visiteur arrivera sur votre site.
Vous pouvez aussi transférer des dossiers entiers d'un seul coup : il suffit de faire glisser-déplacer le dossier depuis la partie de gauche jusqu'à la partie de droite de la fenêtre.

Allez, avouez qu'une fois configuré, c'est pas bien compliqué ^^
Retour en haut

Accéder à la base de données de l'hébergeur

L'envoi des fichiers .php se fait via un logiciel FTP comme nous venons de le voir. Ceux-ci fonctionneront sans aucun problème si vous avez choisi un hébergeur qui supporte PHP (et je vous rassure, c'est le cas de la très grande majorité d'entre eux ;) ).
Il vous suffit, après envoi du fichier .php, de vous rendre par exemple sur : www.monsite.com/mapage.php (la page de votre site en ligne) et celle-ci s'exécutera comme sur votre PC. Les serveurs de l'hébergeur font eux aussi tourner Apache et PHP, comme vous sur votre machine avec WAMP.

Mais comment ça fonctionne pour la base de données ? Comment je peux envoyer ma base de données sur Internet ?


Bonne question. En fait, votre hébergeur vous propose déjà une base de données MySQL. Celle-ci est le plus souvent déjà créée.
Normalement, votre hébergeur doit vous donner le moyen d'y accéder (par e-mail ou sur leur panel web).

Vous avez besoin de ces informations :
  • L'adresse IP du serveur MySQL
  • Votre login MySQL
  • Votre mot de passe MySQL
  • Le nom de la base de données, si elle a déjà été créée
  • L'adresse du phpMyAdmin qui vous permet de gérer votre base en ligne

Généralement, les hébergeurs ne vous proposent qu'une ou deux bases de données. Ce n'est pas vraiment une limitation car une base de données suffit à stocker toutes les informations dont on a besoin. Avoir plusieurs bases permet juste de mieux découper les informations, un peu comme les dossiers sur votre ordinateur.


Servez-vous des 4 premières informations (IP, login, mot de passe, nom de la base) pour adapter votre code PHP afin qu'il puisse se connecter à la base de données de l'hébergeur :

Code : PHP
1
2
3
<?php
$bdd = new PDO('mysql:host=sql.hebergeur.com;dbname=mabase', 'pierre.durand', 's3cr3t');
?>


Maintenant que c'est fait, vos scripts ont accès à la base de données de l'hébergeur... Mais celle-ci est encore vide ! Il faut utiliser le phpMyAdmin qu'ils mettent à votre disposition pour y recréer les tables.

Pour cela, vous devez suivre ces étapes :

  1. Sur votre machine, via WAMP, accédez à votre phpMyAdmin local. Utilisez-le pour exporter toutes vos tables, comme nous avons appris à le faire. Cela va créer un fichier .sql sur votre disque dur qui contiendra vos tables.

    Image utilisateur


  2. Rendez-vous ensuite sur l'adresse du phpMyAdmin de votre hébergeur. Une fois là-bas, utilisez la fonctionnalité d'importation pour y importer le fichier .sql qui se trouve sur votre disque dur.

    Image utilisateur


  3. Patientez un peu... Et vos tables sont maintenant chargées sur le serveur MySQL de l'hébergeur ! :)
Retour en haut
C'est à peu près tout ce que vous avez besoin de savoir.
Bien entendu, vous ne pouviez pas deviner tout seul tout ceci. C'est d'ailleurs pour cela que j'ai rédigé cette annexe, car bon nombre de débutants sont perdus et ne comprennent pas l'intérêt des registrars, hébergeurs, serveurs et compagnie ^^

Allez, au boulot, vous avez des fichiers à transférer je crois ;)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
Envoyez votre site sur le Web
Icône
Comprendre le fonctionnement de Windows Azure
Icône
Créer son serveur FTP
Icône
Outils et environnement de développement
Retour en haut
12 commentaires pour "Envoyez votre site sur le web"
Note moyenne : 3.61 / 4 (2518 votes)
Pseudo Commentaire
Hors ligne majid200 # Posté le 02/03/2012 à 09:58:23

Avis : Bon

slt
et si on pas de fizila on fais quoi
Hors ligne abou_nouas696 # Posté le 12/03/2012 à 18:43:46
Générosité... partage

héberger chez planshosting,c trés bien, 24/7/365 Support(1Hour Support Response)
25% de réduction chez hostgator
code promo: usawebhost
 
Hors ligne abou_nouas696 # Posté le 20/04/2012 à 04:32:06
Générosité... partage

trés bon tuto; merci
25% de réduction chez hostgator
code promo: usawebhost
 
Hors ligne jado # Posté le 21/04/2012 à 12:11:17

Études : IUT Havre

 et si je ne veux pas que mon site apparaisse du coup sur l'internet, parce qu'il y a des codes qui ne fonctionnent pas encore mais que je veux tester étant en ligne, y a-t- il moyen de cacher le site au public mais continuer mes tests en ligne?
Hors ligne griviere42 # Posté le 22/04/2012 à 10:20:39
Avatar

 Citation : jado
et si je ne veux pas que mon site apparaisse du coup sur l'internet, parce qu'il y a des codes qui ne fonctionnent pas encore mais que je veux tester étant en ligne, y a-t- il moyen de cacher le site au public mais continuer mes tests en ligne?


Ce que tu peux faire, c'est créer un dossier que tu protège en .htaccess comme expliqué dans ce tuto et tu y fais tes test. Personne pourra voir ce que tu y fais. Et après tu enlève la protection et tu mets tes fichiers où tu veux
Windows publie tte une suite de logiciel gratuits!
Citation
Il y a 3 grands mensonges en informatique :
ça marche, c'est compatible et ça sort bientôt
 

Voir tous les commentaires