Maintenant que nous avons appris à créer nos premières pages HTML et à les mettre en forme à l'aide du CSS, il est temps de les mettre en ligne afin qu'elles soient accessibles au plus grand nombre. Pour mettre en ligne notre premier site Internet, nous allons avoir besoin de deux choses :
- Un serveur Web, qui est un ordinateur connecté en permanence à Internet et qui dispose de logiciels spécifiques qui lui permettent de répondre aux requêtes faites par les navigateurs.
- Un nom de domaine qui permettra aux utilisateurs de mémoriser l'adresse du site plus facilement.
Heureusement, il n'est pas forcément utile de se lancer de suite dans l'apprentissage de l'administration système. On peut se reposer sur l'utilisation d'un hébergeur pour mettre en ligne notre site Internet. Ce sont des sociétés spécialisées qui se chargent pour vous de la configuration et qui vont vous offrir un accès simplifié aux serveurs afin que vous puissiez mettre en ligne votre site Internet avec peu de compétences techniques.
Quelle offre choisir ?
Si vous essayez de vous rendre sur les sites de différents hébergeurs, vous allez très rapidement vous rendre compte qu'ils proposent de nombreuses offres. Ces types d'hébergements correspondent à des situations spécifiques et des besoins différents. Dans notre cas, l'offre idéale pour débuter est l'offre mutualisée.
Dans ce cas, l'hébergeur “découpe” un serveur pour qu'il accueille plusieurs sites Internet. Il vous fournira ensuite un accès à l'espace qui correspond à votre site Internet. C'est une offre qui est en général très peu coûteuse et qui ne nécessite aucune configuration de votre part. Le prix peut varier d'un hébergeur à l'autre et dépend des services additionnels qui peuvent vous être offerts, comme le nombre de noms de domaine inclus ou encore la gestion ou non des emails.
Quelques hébergeurs
Je ne m'aventurerai pas à comparer ici les différents hébergeurs qui existent sur Internet. L'expérience peut varier grandement d'une personne à l'autre suivant les problèmes que vous rencontrez. En revanche, voici une liste de quelques hébergeurs que j'ai eu l'occasion de tester et pour lesquels je suis plutôt satisfait.
Infomaniak
Infomaniak est un hébergeur basé en Suisse qui propose de nombreux types d'hébergement. Il offre un support réactif, une interface d'administration agréable et un attachement particulier à l'économie durable (ils compensent à 200 % les émissions de CO2 générées par l'entreprise et utilisent exclusivement de l'énergie renouvelable certifiée).
Planet Hoster
Planethoster , avec son offre World , propose un hébergement mutualisé flexible à partir de 6 € par mois. Il a la particularité de vous laisser la main sur les ressources à allouer à vos sites (il est par exemple possible d'améliorer la quantité de RAM, le nombre de processeurs et la vitesse du disque dur). Vous pouvez ensuite séparer ces ressources sur les différents sites que vous hébergez sur le même compte. Au niveau de la localisation, Planet Hoster dispose de 2 datacenters situés à Paris et Montréal et conviendra donc avant tout pour des sites avec un public Français ou Canadien. Enfin, en termes de service, l'offre inclut un nom de domaine offert, la mise en place de certificats SSL (pour le HTTPS), un système de sauvegarde et des emails illimités.
Hosteur
Hosteur dispose de plusieurs datacenters basés en France (Sophia Antipolis et Aix-en-Provence) et en Suisse (Lausanne). L'offre d'hébergement mutualisé commence à partir de 1€ HT par mois pour un domaine .fr et 1.99€ pour les autres extensions et inclut la gestion de 10 comptes emails.
Pour les novices dans le domaine du web design, l'hébergeur propose pour 1€ HT de plus par mois, un outil intuitif de construction de sites : Le Site Builder.
Vous pourrez aussi utiliser cette offre pour créer un site dynamique avec le support de PHP 7.2 et la gestion de 2 basebases de données MySQL. L'hébergement respecte la norme ISO 27001 (2013) afin de garantir la protection des données de ses clients.
OVH
OVH est un hébergeur français qui dispose de plusieurs datacenters (Roubaix, Paris, Strasbourg…) et qui propose en général des prix intéressants. En revanche, l'interface d'administration client est aujourd'hui un peu datée et les offres ne proposent pas forcément toutes le même niveau de fonctionnalité (SSH à partir de l'hébergement pro seulement).
AlwaysData
AlwaysData est un hébergeur qui a l'avantage d'avoir une offre gratuite (bien pour essayer l'hébergeur, elle reste très limitée et n'inclut pas le nom de domaine). Je n'ai pas eu l'occasion de tester l'interface client, car je ne l'utilise pas directement (certains de mes clients utilisent cet hébergeur). Le datacenter se situe à Paris.
Téléverser son site
Quel que soit l'hébergeur que vous allez sélectionner, la méthode qui va vous permettre d'envoyer vos fichiers sur le serveur sera la même. L'envoi des fichiers se fait au travers des protocoles FTP ou SFTP. Pour vous connecter à votre serveur, il vous faudra utiliser un logiciel spécifique capable d'utiliser ces protocoles. Il en existe une multitude sur Internet, mais vous pouvez utiliser le logiciel filezilla qui est un logiciel gratuit et multi plateformes (Windows, Mac & Linux).
Pour vous connectez à votre serveur, il faudra aussi vous munir de vos identifiants de connexion. Ils vous sont automatiquement fournis par votre hébergeur ou vous pouvez les créer depuis l'interface d'administration de votre hébergement (cela dépend de l'hébergeur que vous avez sélectionné). Une fois connecté, vous pourrez déposer vos fichiers HTML, CSS et vos images.
La structure des liens
Lorsque vous mettez en ligne votre site, l'hébergeur configurera un dossier spécifique qui correspondra à votre nom de domaine. Ce dossier constitue donc la racine de votre site et les chemins commençant par un “/” utiliseront donc ce dossier comme référence. Par exemple :
-
le nom de domaine
mondomaine.frpointe vers le dossier/site/web -
On veut mettre le lien vers une image qui se situe dans le dossier
/site/web/images/chat.jpg -
Le chemin absolu à mettre sur nos liens dans l'attribut
hrefsera donc/images/chat.jpg
