Publier votre site web

L’objectif aujourd’hui va être de publier un site internet, simple et statique, comme un site dit « vitrine », sur le web. Nous n’expliquerons pas comment faire un site internet, mais bien comment le publier sur internet.

Une fois que vous avez fini d’écrire le code des pages qui composent votre site web, et d’organiser les fichiers qui y sont liés, vous devez tout mettre en ligne pour que les gens puissent y accéder, le trouver, et l’utiliser en toute sécurité.

Nous aurons besoin de choisir un hébergeur.
Rappelons ce qu’est un hébergeur : c’est une personne qui est en charge d’un serveur, nous laissant profiter d’un espace de stockage pour y placer tous les fichiers de notre site, images, pages HTML, CSS et autres… ainsi, grâce à ce serveur, les utilisateurs pourront consulter le site avec tous les éléments qui le composent. Il existe plusieurs hébergeurs, gratuit ou payant.

Quelles sont les options ?

Un hébergement et un nom de domaine

Si vous souhaitez contrôler totalement votre site Web publié, vous allez probablement devoir dépenser un peu d’argent pour obtenir :

• Un espace d’hébergement – espace disque loué sur le serveur Web d’une société d’hébergement. Vous placez les fichiers de votre site Web sur cet espace et le serveur Web fournit le contenu aux utilisateurs Web qui le demandent.
• Un nom de domaine – l’adresse unique où les internautes peuvent trouver votre site Web, tel que http://www.ecv.fr ou http://www.google.com . Vous louez votre nom de domaine pendant un certain nombre d’années à un “registrar” de domaine .

De nombreux sites Web professionnels sont en ligne de cette façon.

Le nom de domaine

Vous savez déjà ce qu’est un nom de domaine. Il s’agit d’une adresse sur le Web :   ecv.fr  est par exemple un nom de domaine.

• Dans le cas présent, « ecv » est le nom de domaine proprement dit. Il s’agit d’un nom que l’on peut en général choisir librement, tant que personne ne l’a réservé avant nous. Il peut contenir des lettres et des chiffres, et depuis 2012, certains caractères accentués (comme le « ç » français, le « é » ou le « è »).
• Le « .fr » est l’extension (aussi appelée « TLD », de l’anglais top-level domain). Il existe grosso modo une extension par pays (.fr pour la France, .be pour la Belgique, .ca pour le Canada, etc.). 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,… 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.ecv.fr. 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 est présent sur la plupart des sites web, 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. Comme d’habitude, 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 euros par 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, deux solutions :

• Passer par un registrar spécialisé. C’est un organisme qui sert d’intermédiaire entre l’ICANN (l’organisation qui gère l’ensemble des noms de domaine au niveau international) et vous. 1&1 IONOS, 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). De cette manière, 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.

De plus, ces noms ne peuvent pas être achetés à vie, seulement loués pendant une période donnée (pouvant aller jusqu’à 10 ans).

C’est un organisme américain, l’ICANN, qui gère les noms de domaine de premier niveau (TLD) comme .com, .net, .fr…
Il délègue la gestion technique de ces TLD à différents opérateurs appelés registry : c’est l’AFNIC qui gère les domaines .fr et .re par exemple.
Enfin chaque registry délègue à plusieurs registrar la vente des noms de domaine. Ceux-ci sont très nombreux. En France, citons Gandi, OVH, 1&1, Nerim…

Vous devez donc prendre contact avec un registrar pour acheter votre nom de domaine. Le registrar se chargera d’inscrire votre nom de domaine sur les serveurs DNS du registry (l’AFNIC en France) qui aura donc connaissance de votre nom de domaine.

L’hébergeur

Sur Internet, tous les sites web sont stockés sur des ordinateurs particuliers appelés serveurs (figure suivante). 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.

Un serveur ne possède pas d’écran car, la plupart du temps, il tourne tout seul sans qu’il y ait besoin de faire 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, c’est-à-dire une sorte d’armoire climatisée pour serveurs (figure suivante).

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.

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 cela fait des clients mécontents).

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

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é, 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ée aux sites qui d’un côté ne peuvent plus tenir sur un hébergement mutualisé car ils ont trop de trafic (trop de visiteurs), mais qui par ailleurs 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.
• Hébergement cloud : de plus en plus en vogue, cela consiste à envoyer notre site sur des serveurs virtuels. En fait, c’est l’équivalent d’un hébergement dédié virtuel, mais avec tout un tas de services autour pour nous permettre de gérer plus facilement le réseau, les bases de données, etc. C’est la tendance pour de plus en plus de moyens et gros sites. Parmi les hébergeurs cloud, on peut citer Amazon Web Services, Google Cloud, Microsoft Azure, etc. Ce type d’hébergement est en revanche un peu trop complexe pour nous qui débutons dans la création de sites web. Je recommande plutôt un hébergement mutualisé dans notre cas.

Conseils pour trouver un hébergement et des domaines

Je ne vais pas faire la promotion de telle ou telle société d’hébergement ou tel ou tel bureaux d’enregistrement de noms de domaine ici. Pour trouver des sociétés d’hébergement et des bureaux d’enregistrement, il suffit de rechercher “hébergement Web” et “noms de domaine”. Tous les bureaux d’enregistrement disposeront d’une fonctionnalité vous permettant de vérifier si le nom de domaine que vous souhaitez est disponible ou si quelqu’un d’autre l’a déjà enregistré.

Votre fournisseur de services Internet à domicile ou au bureau peut fournir un hébergement limité pour un petit site Web. Les fonctionnalités disponibles seront limitées, mais il conviendra peut-être parfaitement pour vos premières expériences – contactez-les et demandez !

Je cite tout de même :
– un outil que je trouve pratique pour vérifier la disponibilité d’un ou plusieurs noms de domaines : gandi
– un hébergeur français, de qualité et à des coûts intéressants, c’est d’ailleur le plus gtros hébergeur français : ovh

Envoyer les fichiers

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.

Vous aurez besoin d’un programme FTP pour transférer réellement les fichiers de votre site Web, que vous avez localement sur votre ordinateur, sur le serveur. Les programmes FTP varient considérablement, mais vous devez généralement vous connecter à votre serveur Web en utilisant les informations fournies par votre hébergeur (par exemple : nom d’hôte, nom d’utilisateur, mot de passe). Ensuite, le programme vous montre vos fichiers locaux et les fichiers du serveur Web dans deux fenêtres, afin que vous puissiez les transférer en avant et en arrière .

Nous utiliserons le client FTP Filezilla qui est gratuit, simple et open source.
Ce logiciel n’a rien à voir avec Mozilla, si ce n’est qu’il se termine lui aussi par « zilla ».

Il va falloir télécharger Filezilla client, puisque nous voulons transférer des fichiers sur un serveur. Prenez la version correspondant à votre système d’exploitation (Windows, Mac OS X ou Linux).

À première vue, cela semble un peu compliqué (à première vue seulement). En fait, le principe est très simple.
Il y a quatre grandes zones à connaître dans la fenê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 en rouge…
2. À 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. À droite, c’est la liste des fichiers envoyés sur le serveur sur Internet. Pour le moment il n’y a rien car on ne s’est pas connecté, mais cela 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 trois 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 une information du typeftp.mon-site.com, mais il peut aussi s’agir d’une suite de nombres comme122.65.203.27.
• Le login : c’est votre identifiant, on vous probablement demandé de le choisir. Vous avez peut-être mis votre pseudo, ou le nom de votre site. Mon login pourrait par exemple êtremateo21.
• Le mot de passe : soit on vous a demandé de choisir un mot de passe, soit (c’est plus probable) on vous en a attribué un d’office (un truc imprononçable du genrecrf45u7h).

Cliquez sur la petite icône en haut à gauche (pas sur la petite flèche à droite, mais bien sur l’image), représentée à la figure suivante.

Une fenêtre s’ouvre. Cliquez sur Nouveau site et donnez-lui le nom que vous voulez (par exemple « Mon site »). À droite, vous allez devoir indiquer les trois informations dont je viens de vous parler, comme sur la figure suivante.

Transférer les fichiers

À ce stade, deux possibilités :

• Soit la connexion a réussi : vous voyez alors 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 déjà quelques-uns).
• Soit cela a planté, vous avez plein de messages écrits en rouge et là, eh bien… il n’y a pas trente-six solutions : vous vous êtes trompé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 cela 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 fichiers.htmlet.css(mais aussi vos images.jpg,.png,.gif, etc.).
À gauche, faites un double-clic sur le fichier que vous voulez transférer. Au bout de quelques secondes, il apparaîtra à droite, ce qui voudra dire qu’il a été correctement envoyé sur le serveur, et donc qu’il est accessible sur Internet !

Vous pouvez aussi transférer des dossiers entiers d’un seul coup : il suffit de faire un glisser-déposer du dossier depuis la partie de gauche (ou directement de la fenêtre de votre système d’exploitation) jusqu’à la partie de droite de la fenêtre de FileZilla.

Une fois configuré, vous pouvez voir que l’envoi de fichiers est très simple.

Mise en pratique

Créez une page HTML type “Hello world!” ou récupérez une page web (ou un site statique complet) que vous avez déjà construite.

Munissez-vous d’un logiciel “client FTP”, comme FileZilla par exemple, à installer si nécessaire.

Connectez-vous à l’espace d’hébergement que j’ai créé pour l’occasion, à l’aide des paramètres suivants :

Déplacez-vous dans le répertoire qui porte votre nom, et déposez votre page ou votre site dedans.

Votre page ou votre site est maintenant accessible depuis le web, et visible à l’adresse suivante :

Informations

Vous pouvez connaitre la disponibilité d’un nom de domaine en utilisant un “Whois”, qui indexe les propriétaires et certaines informations techniques, administratives et légales des noms de domaines, par exemple whois.domaintools.com ou les services de l’AFNIC pour les “.fr”

Il est possible d’héberger plusieurs sites, en les organisant dans des répertoires distincts, sur un seul espace d’hébergement. On pourrait allors y acceder par une URL du type www.monsite.com/site1/ ; ou configurer un sous-domaine du type : site1.monsite.com

Les correspondances Noms de domaines <-> Hébergement correspondant sont stockées sur des “serveurs de noms de domaines” ou serveurs DNS.

Pour un nom de domaine donné, les correspondances URL <-> répertoire d’hébergement sont gérés nécessairement en deux endroits :

• Le domaine ou le sous domaine doit exister et être déclaré au niveau des serveurs DNS afin de pointer sur le bon hébergement.
• Le domaine ou le sous-domaine doit être configuré sur le serveur web de l’espace d’hébergement afin d’écouter et d’accueillir les requêtes effectuées sur ce domaine ou sous-domaine.

Utiliser un outil en ligne comme GitHub ou Google App Engine

Certains outils vous permettent de publier votre site web en ligne :

• GitHub est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le système de gestion de versions Git. Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n’importe qui dans le monde peut trouver votre code GitHub, l’utiliser, en tirer des leçons, et l’améliorer. GitHub a une fonctionnalité très utile appelée pages GitHub, qui vous permet de présenter du code de site web en direct sur le web.
• Google App Engine est une plateforme puissante qui vous permet de construire et d’exécuter des applications sur l’infrastructure de Google — que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d’héberger un site web statique. Voir How do you host your website on Google App Engine? pour plus d’information.

À la différence de la plupart des hébergements, ces outils sont d’utilisation gratuite, mais vous n’avez accès qu’à un ensemble limité de fonctionnalités.

Publier via GitHub

Maintenant, nous allons voir comment publier facilement votre site via les pages GitHub.

1. Pour commencer, inscrivez-vous sur GitHub et vérifiez votre adresse e-mail.
2. Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.
3. Sur cette page, dans le champ Repository name, entrez username.github.io : username est votre nom d’utilisateur.
   Également, cochez Initialize this repository with a README, puis cliquez sur Create repository.

4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur Commit changes.
   Note : Assurez-vous que votre dossier comporte bien un fichier index.html.
5. Maintenant, naviguez jusqu’à username.github.io pour voir votre site web en ligne. Par exemple, pour le nom d’utilisateur  chrisdavidmills, allez à  chrisdavidmills.github.io.
   Note : Cela peut prendre quelques minutes avant que votre site web soit actif. S’il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.

Mise en pratique

Créez un compte si ce n’est pas déjà fait sur GitHub, ou connectez-vous sinon.

Déployez la page ou le site précédemment utilisé sur GitHub et effectuez la configuration nécessaire pour la publier sur GitHub Pages.

https://reaccess-dev.github.io/ecvb1-test/

Optimiser son hébergement

https

• L’utilité d’un certificat SSL
• Les organismes de certification
• Les certificats auto-signés

.htaccess

Protéger un dossier

Dans le fichier nommé .htaccess, déposé à la racine de votre répertoire web :

AuthName "Page d'administration protégée"
AuthType Basic
AuthUserFile "/exemple/de/chemin/.htpasswd"
Require valid-user

Puis générer un mot de passe dont le contenu sera le contenu généré par un outil du type : https://hostingcanada.org/htpasswd-generator/

Sécuriser son site

Pour vous protéger de certains attaques, ce fichier .htaccess sera aussi très utile.

Rajoutez simplement :

<IfModule mod_headers.c>
  Header always set Content-Language fr
  #Header always set Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.google.com https://cdn.jsdelivr.net https://www.googletagmanager.com https://www.gstatic.com; base-uri 'self';"
  Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains"
  Header always set X-FRAME-OPTIONS "SAMEORIGIN"
  Header always set X-XSS-Protection "1; mode=block"
  Header always set X-Content-Type-Options "nosniff"
</IfModule>

Interdire la liste des fichiers d’un répertoire

Ajoutez simplement cette ligne dans votre fichier .htaccess

Options -Indexes

Optimiser la mise en cache

Ajoutez ces quelques lignes pour activer la mise en cache côté client des ressources statiques du site :

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/js "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-woff2 "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

DefaultLanguage fr

<IfModule mod_headers.c>
  <FilesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|woff|woff2)$">
    Header set Cache-Control "max-age=2592000, public"
  </FilesMatch>
  <FilesMatch "\\.(css)$">
    Header set Cache-Control "max-age=604800, public"
  </FilesMatch>
  <FilesMatch "\\.(js)$">
    Header set Cache-Control "max-age=2592000, public"
  </FilesMatch>
  <FilesMatch "\\.(xml|txt)$">
    Header set Cache-Control "max-age=216000, public, must-revalidate"
  </FilesMatch>
  Header unset ETag
  Header always set Content-Language fr
  Header always set Content-Security-Policy "script-src 'self' 'unsafe-inline'; base-uri 'self';"
  Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains"
  Header always set X-FRAME-OPTIONS "DENY"
  Header always set X-XSS-Protection "1; mode=block"
  Header always set X-Content-Type-Options "nosniff"
</IfModule>

Optimiser avec la compression

Optimiser la vitesse de transfert de vos ressources statiques en les compressant, à l’aide de ces quelques lignes à ajouter dans votre .htaccess :

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|jpg|png|gif)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/javascript.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Redirection d’url / réécriture d’url

RewriteEngine on
RewriteRule ^sacs$ /catalogue.html [R=302,L]

robots.txt

Interdire ou autoriser l’indexation

User-agent: *
Disallow: /img/
Allow: /

Indiquer l’emplacement du sitemap.xml

Sitemap: https://www.domaine.com/sitemap.xml

sitemap.xml

Utilité du sitemap.xml

Un sitemap est un fichier listant des URL du site que l’on souhaite faire crawler (et généralement aussi indexer). Au format sitemaps.org, il doit être déclaré aux moteurs de recherche. Il aide à faire des analyses SEO avancées.

Une fois que les moteurs auront consulté le fichier, si tout se passe bien ils iront explorer (crawler) les URL listées. Et donc si tout se passe (encore) bien, ils devraient indexer les fameuses URL.

Structure et format du fichier

<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
  <loc>https://www.domaine.com/</loc>
  <lastmod>2019-09-16T09:18:57+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://www.domaine.com/nous-contacter</loc>
  <lastmod>2019-09-16T09:18:57+00:00</lastmod>
  <priority>0.80</priority>
</url>
</urlset>