Le local et l'enseigne
Ouvrir une boutique, c'est louer un local (l'hébergement) et poser une enseigne avec un nom (le nom de domaine). On peut changer de local et garder le même nom : il suffit de mettre à jour l'annuaire, le DNS.
M04 · E. Héberger un site
Mettre un site en ligne : hébergeur, nom de domaine et DNS
Choisir un hébergeur selon le besoin, comparer offres gratuites et payantes, réserver un nom de domaine et comprendre comment le DNS relie ce nom au serveur.
1Situer
Votre portfolio de stagiaire est prêt : trois pages, vos projets, votre CV. Pour l'envoyer aux recruteurs, il doit être en ligne, avec une adresse facile à retenir comme prenom-nom.ma ou prenom.dev. Il faut deux choses différentes : un hébergement, qui garde les fichiers, et un nom de domaine, qui donne l'adresse.
2Comprendre
Le recruteur tape salma-idrissi.ma dans son navigateur. Mais sur Internet, les machines se trouvent par leur adresse IP.
1 / 6
Mettre un site en ligne demande deux services distincts, que l’on peut acheter au même endroit ou séparément.
1. L’hébergement
L’hébergeur fournit un serveur allumé en permanence, relié à Internet, qui garde vos fichiers et répond aux visiteurs.
| Type | Pour qui | Prix indicatif |
|---|---|---|
| statique gratuit (GitHub Pages, Netlify, Cloudflare Pages) | portfolio, documentation, site vitrine simple | gratuit |
| mutualisé | petite entreprise, avec e-mails et PHP | quelques centaines de DH par an |
| VPS ou cloud | applications, fort trafic | selon la puissance |
Critères de choix : espace disque, bande passante, HTTPS inclus (certificat), e-mails, sauvegardes, support en français ou en arabe, emplacement des serveurs, conditions de la version gratuite.
2. Le nom de domaine
Le nom de domaine (prenom-nom.ma) se loue pour un an ou plus auprès d’un registrar. Le .ma est géré par l’ANRT et réservé via des prestataires agréés. Choisissez un nom court, facile à épeler, sans accents. Pensez à renouveler : un domaine expiré peut être racheté par quelqu’un d’autre.
3. Le DNS relie les deux
Quand un visiteur tape l’adresse, son ordinateur demande au DNS l’IP du serveur, puis envoie la requête HTTP à cette IP.
| Enregistrement | Rôle | Exemple |
|---|---|---|
A | nom vers une adresse IPv4 | prenom-nom.ma A 203.0.113.10 |
CNAME | nom vers un autre nom | www CNAME prenom-nom.ma |
MX | serveur de messagerie | MX mail.hebergeur.ma |
Après une modification, la propagation peut prendre jusqu’à 48 heures.
4. La mise en ligne
On envoie les fichiers par FTP, par le gestionnaire de fichiers de l’hébergeur, ou avec Git (GitHub Pages, Netlify). On vérifie l’adresse en HTTPS, sur ordinateur et sur téléphone.
L'annuaire téléphonique d'Internet
Vous cherchez « Pharmacie Atlas » dans l'annuaire et vous obtenez son numéro. Le DNS fait pareil : il transforme le nom www.prenom-nom.ma en adresse IP du serveur.
www.prenom-nom.ma -> 185.199.108.153
Publicité
3Manipuler
Le nom de domaine et l'hébergement sont souvent confondus. Classez chaque élément, puis cliquez sur « Vérifier ».
prenom-nom.ma, réservé pour un an
1 Go d'espace disque pour stocker les fichiers du site
Le registrar auprès de qui on réserve l'adresse
L'accès FTP pour envoyer index.html
L'enregistrement DNS de type A qui pointe vers une IP
Le serveur web qui répond aux visiteurs
Le renouvellement chaque année, sinon l'adresse peut être reprise
La bande passante mensuelle incluse dans l'offre
4Pratiquer
Exercice 1 · Choisir une offre
Pour chaque besoin, proposez un type d'hébergement : (1) le portfolio statique d'un stagiaire ; (2) le site vitrine d'un riad, avec une adresse e-mail contact@leriad.ma ; (3) une boutique en ligne avec base de données.
Voir le corrigé
1. Hébergement statique gratuit : GitHub Pages, Netlify, Cloudflare Pages 2. Hébergement mutualisé payant avec nom de domaine et e-mails inclus 3. Hébergement payant qui accepte PHP ou Node.js et une base de données (mutualisé performant, VPS ou cloud)
Exercice 2 · Publier sur GitHub Pages
Listez les étapes pour publier votre portfolio sur GitHub Pages.
Voir le corrigé
1. Créer un compte GitHub et un dépôt (par exemple portfolio) 2. Envoyer les fichiers (index.html à la racine) 3. Settings > Pages > choisir la branche main 4. Le site est en ligne à l'adresse https://pseudo.github.io/portfolio 5. (facultatif) relier un nom de domaine dans Settings > Pages > Custom domain
Exercice 3 · Relier le domaine
Vous avez acheté prenom.dev et votre site est hébergé sur un serveur d'adresse 203.0.113.10. Que faut-il configurer, et où ?
Voir le corrigé
Dans la zone DNS du domaine, chez le registrar : prenom.dev A 203.0.113.10 www.prenom.dev CNAME prenom.dev La propagation peut prendre de quelques minutes à 48 heures.
Publicité