Mise en ligne d’un site web

Lorsque vous créez une page HTML sur votre ordinateur, vous pouvez immédiatement la consulter dans un navigateur web. Cependant, cette page n’est pas automatiquement accessible aux autres internautes.

Pour rendre un site web accessible sur Internet, il faut placer ses fichiers sur un serveur web. Cette opération s’appelle la mise en ligne ou le déploiement du site.

Dans ce cours, nous allons découvrir comment fonctionne cette mise en ligne, quels sont les services proposés par les hébergeurs et comment gérer les fichiers d’un site une fois celui-ci publié.

Travailler localement

Lorsque vous créez un site web statique en HTML et CSS, vous travaillez généralement sur votre propre ordinateur. Les fichiers qui composent le site sont enregistrés dans un dossier de votre disque dur.

Vous pouvez ouvrir une page HTML dans votre navigateur pour visualiser le résultat de votre travail.

Par exemple, l’adresse affichée dans le navigateur peut être :

file:///C:/Users/Julien/Desktop/monsite/index.html

Le préfixe file:/// indique que le navigateur ouvre un fichier présent sur l’ordinateur, sans avoir besoin de le télécharger depuis un serveur web.

Le site fonctionne alors localement : vous pouvez le consulter et le modifier, mais les autres internautes ne peuvent pas y accéder simplement en saisissant cette adresse. En effet, elle désigne un emplacement sur votre propre ordinateur.

Consulter un site en ligne

Lorsqu’un site web est en ligne, ses fichiers sont hébergés sur un serveur web, c’est-à-dire un ordinateur qui peut répondre aux demandes des internautes.

Lorsque vous saisissez une URL dans votre navigateur, celui-ci communique avec le serveur web correspondant afin de récupérer les ressources nécessaires à l’affichage de la page.

Par exemple : https://www.site.fr/page.html

Le navigateur demande au serveur le fichier page.html. Après réception du document HTML, il peut également demander d’autres ressources, comme des images, des feuilles de style CSS ou des fichiers JavaScript.

Le navigateur joue le rôle de client web, tandis que l’ordinateur qui héberge le site joue le rôle de serveur web.

Ces échanges utilisent principalement les protocoles HTTP et HTTPS.

Mettre un site en ligne

Pour rendre votre site accessible sur Internet, vous devez transférer ses fichiers depuis votre ordinateur vers un serveur distant.

Ce transfert peut être effectué à l’aide d’un logiciel spécialisé appelé client FTP, comme FileZilla. Ce logiciel permet de se connecter à un serveur distant, de parcourir ses dossiers et de transférer des fichiers entre votre ordinateur et le serveur.

Une fois les fichiers placés dans le bon dossier, le serveur web peut les mettre à disposition des visiteurs.

Deux accès différents au même site

Il est essentiel de distinguer deux opérations :

Consulter un site consiste à récupérer les ressources mises à disposition par le serveur afin de les afficher dans un navigateur. Cette opération utilise les protocoles HTTP ou HTTPS.

Gérer les fichiers d’un site consiste à envoyer, télécharger, remplacer, renommer ou supprimer des fichiers sur le serveur. Cette opération nécessite un accès autorisé, par exemple avec FTP, FTPS ou SFTP.

Ces opérations ne doivent pas être confondues :

• Le client web (Firefox, Chrome, etc.) sert à consulter les pages.
• Le client de transfert (FileZilla, par exemple) sert à manipuler les fichiers présents sur le serveur.

Ces deux clients peuvent communiquer avec le même ordinateur distant, mais ils n’utilisent pas nécessairement les mêmes protocoles ni les mêmes services.

FTP, FTPS et SFTP

Plusieurs protocoles peuvent permettre le transfert de fichiers :

• FTP (File Transfer Protocol) : protocole historique de transfert de fichiers. Dans sa forme classique, il ne chiffre pas les échanges.
• FTPS : version de FTP utilisant TLS pour sécuriser la connexion.
• SFTP (SSH File Transfer Protocol) : protocole de transfert de fichiers sécurisé qui fonctionne au-dessus de SSH.

Malgré la ressemblance de leurs noms, FTPS et SFTP sont deux protocoles différents.

Pour transférer des fichiers sur Internet, il est préférable d’utiliser SFTP ou FTPS plutôt que FTP classique, afin de protéger notamment les identifiants de connexion.

Le dossier racine d’un site

Un site web est généralement constitué de plusieurs fichiers et dossiers :

• Des fichiers HTML contenant la structure des pages.
• Des fichiers CSS définissant leur présentation.
• Des images et autres ressources.
• Éventuellement des fichiers JavaScript.

Ces éléments doivent être organisés dans un dossier principal, appelé ici dossier racine du site.

Par exemple :

Lors du développement, ce dossier se trouve sur votre ordinateur : c’est le dossier racine local.

Une fois le site mis en ligne, ses fichiers sont placés dans un dossier du serveur prévu pour accueillir les ressources publiées : c’est le dossier racine distant.

Selon l’hébergeur, ce dossier peut porter différents noms, par exemple www, public_html ou htdocs.

Il faut veiller à transférer les fichiers au bon emplacement. Un fichier présent sur le serveur, mais situé en dehors du répertoire publié par le serveur web, ne sera pas nécessairement accessible aux visiteurs.

Le rôle du fichier index.html

Le fichier index.html occupe souvent une place particulière dans un site statique.

Lorsqu’un visiteur saisit l’adresse : https://www.site.fr

Le serveur web est généralement configuré pour envoyer automatiquement le fichier index.html présent à la racine du site, sans qu’il soit nécessaire de préciser son nom dans l’URL.

Ce comportement dépend de la configuration du serveur et peut également concerner d’autres fichiers, comme index.php.

Le serveur est obligatoire ?!

Pour qu’un site soit accessible sur Internet, il faut disposer d’un serveur web capable de répondre aux demandes des visiteurs.

Il est techniquement possible d’héberger un site sur son propre ordinateur, à condition notamment :

• D’installer et de configurer un logiciel serveur web, comme Apache ou Nginx.
• De rendre ce serveur accessible depuis Internet.
• De maintenir l’ordinateur en fonctionnement 24 h/24 pour que le site reste en ligne.
• D’assurer sa sécurité et sa maintenance.

Des environnements comme WAMP ou MAMP permettent d’installer facilement les outils nécessaires au fonctionnement de sites utilisant notamment PHP et une base de données. Ils sont principalement utilisés pour le développement local.

Cependant, héberger soi-même un site accessible publiquement demande des compétences techniques et une infrastructure adaptée.

La solution la plus courante consiste donc à faire appel à un hébergeur web.

Qu’est-ce qu’un hébergeur web ?

Un hébergeur web est une entreprise qui met à disposition les ressources informatiques nécessaires au fonctionnement d’un site Internet.

En échange d’un abonnement, elle permet notamment de stocker les fichiers du site sur des serveurs connectés à Internet.

L’objectif est de rendre le site accessible en permanence, sans que vous ayez besoin de laisser votre propre ordinateur allumé.

Parmi les hébergeurs français connus, on peut citer OVHcloud, o2switch ou alwaysdata.

Hébergement mutualisé et hébergement dédié

Deux grandes approches peuvent être distinguées.

L’hébergement mutualisé consiste à partager les ressources d’un serveur entre plusieurs sites ou plusieurs clients. C’est une solution généralement économique et adaptée à de nombreux petits sites.

L’hébergement dédié consiste à louer un serveur entier pour son propre usage. Cette solution offre davantage de contrôle et de ressources, mais demande généralement plus de compétences techniques et coûte davantage.

Il existe également des solutions intermédiaires ou différentes, comme les serveurs privés virtuels (VPS) et les hébergements cloud.

Les services proposés par les hébergeurs

En plus de l’espace de stockage permettant de mettre en ligne un site web, les hébergeurs proposent souvent plusieurs services complémentaires :

• Des bases de données : possibilité de créer et de gérer des bases de données.
• La gestion des noms de domaine : possibilité d’associer un nom de domaine à l’hébergement et, parfois, de l’enregistrer directement auprès de l’hébergeur.
• Des boîtes de messagerie : création d’adresses électroniques associées au domaine, comme contact@monsite.fr.
• Des outils de maintenance : sauvegardes, gestion des fichiers, etc.
• La gestion des certificats TLS : possibilité de sécuriser les connexions au site avec HTTPS.
• Des outils d’installation : installation simplifiée de systèmes de gestion de contenu (CMS), comme WordPress, Joomla ou Drupal.

Choisir un hébergeur, c’est un peu comme choisir son opérateur de téléphonie : on compare les offres pour trouver le meilleur compromis entre ses besoins et les tarifs proposés.

Combien coûte un hébergement ?

Le prix d’un hébergement dépend de nombreux critères : espace de stockage, puissance du serveur, trafic autorisé, services inclus, niveau d’assistance et garanties proposées.

Certaines offres gratuites ou à faible coût peuvent suffire pour de petits projets, tandis que des sites professionnels peuvent nécessiter des solutions nettement plus coûteuses.

Consultez les grilles tarifaires des hébergeurs pour comparer les formules proposées :

• OVH : https://www.ovhcloud.com/fr/web-hosting/
• O2Switch : https://www.o2switch.fr/hebergement-illimite/
• Alwaysdata : https://www.alwaysdata.com/fr/offers/

Quelques cas pratiques

Publier et mettre à jour les fichiers d’un site

Scénario : vous créez une page web pour la mettre en ligne, mais cette page sera modifiée par la suite.

La mise en ligne se déroule en plusieurs étapes :

1. Vous créez le fichier localement.
2. Vous le transférez dans le dossier approprié du serveur.
3. Les internautes peuvent consulter cette première version.
4. Vous modifiez ensuite le fichier sur votre ordinateur.
5. Vous transférez de nouveau le fichier pour remplacer la version présente sur le serveur.
6. Le serveur dispose alors de la nouvelle version du document.

Modifier un fichier sur votre ordinateur ne modifie pas automatiquement sa version en ligne. Tant que vous ne transférez pas le fichier modifié, les visiteurs continuent d’accéder à la version précédente.

Il existe bien sûr des outils permettant d’automatiser ces transferts, mais le principe reste le même : les fichiers utilisés par le serveur doivent être mis à jour.

Les difficultés du travail collaboratif

Scénario : Deux étudiants travaillent sur le même site web et souhaitent modifier les mêmes fichiers.

Lorsque plusieurs personnes travaillent sur un même site, la gestion des fichiers devient plus délicate.

Prenons l’exemple d’Élodie et Basile, qui travaillent sur le fichier index.html.

1. Élodie crée une première version du fichier et la met en ligne.
2. Basile télécharge cette version sur son ordinateur pour travailler dessus.
3. Pendant ce temps, Élodie modifie le fichier et transfère une deuxième version sur le serveur.
4. Basile travaille à partir de la première version qu’il avait téléchargée.
5. Basile termine ses modifications et envoie son fichier
6. Basile a remplacé la version 2 mise en ligne par Élodie.

Les modifications d’Élodie peuvent alors être perdues, même si Basile n’avait pas l’intention de les supprimer.

Ce problème apparaît lorsque plusieurs personnes travaillent sur des copies différentes d’un même fichier, sans coordonner leurs modifications.

Pour éviter ce problème :

• Élodie et Basile doivent se prévenir avant chaque modification de fichier.
• Ils doivent toujours récupérer la dernière version des fichiers sur le serveur avant de travailler.
• Il faut conserver une copie de sauvegarde en cas d’erreur de manipulation.

Un serveur FTP ne constitue donc pas, à lui seul, un outil de travail collaboratif : il permet de transférer les fichiers, mais ne garantit pas la bonne coordination des modifications.

Attention au cache du navigateur !

Scénario : vous modifiez la mise en page d’un site web et transférez les fichiers mis à jour sur le serveur. Pourtant, lorsque vous consultez à nouveau le site, rien n’a changé !

Lorsque vous consultez une page web, votre navigateur peut conserver temporairement certaines ressources téléchargées, comme les images, les feuilles CSS ou les fichiers JavaScript.

Ce mécanisme s’appelle le cache du navigateur. Son principal intérêt est d’éviter de télécharger plusieurs fois des fichiers qui n’ont pas changé. Cela peut accélérer l’affichage des pages et réduire les échanges avec le serveur.

Pourquoi le cache peut-il poser problème ?

Imaginons que vous ayez modifié votre feuille CSS et transféré la nouvelle version sur votre serveur. Lorsque vous consultez à nouveau le site, vous constatez que les changements ne sont pas visibles.

Cela ne signifie pas nécessairement que le transfert a échoué !

Votre navigateur utilise peut-être une ancienne version de la feuille CSS, encore présente dans son cache. Selon les règles de mise en cache, le navigateur peut en effet réutiliser une ressource déjà téléchargée au lieu d’en récupérer immédiatement une nouvelle version.

Comment afficher la version actualisée ?

Vous pouvez commencer par recharger la page avec le bouton d’actualisation du navigateur. Si le problème persiste, il est possible d’effectuer un rechargement forcé, généralement avec Ctrl + F5 ou Ctrl + Maj + R sous Windows, selon le navigateur.

Vous pouvez également utiliser les outils de développement du navigateur pour désactiver temporairement le cache pendant vos tests.

Sauf mention contraire*, l’article Mise en ligne d’un site web et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.