ConceptionJFG

Guide avancé

Mettre ton site en ligne, pas à pas

Ton site est prêt dans le Studio. On va le sortir de ton écran pour que le monde entier puisse le voir : l’héberger, brancher ton nom de domaine, et même te donner une adresse courriel à ton nom. Suis simplement les étapes en gras. Le reste, c’est pour ceux qui veulent creuser.

Exporte ton site du Studio

Dans le Studio, ouvre le menu « Exporter » et choisis « Télécharger le site (ZIP) ». Tu obtiens un seul fichier qui contient tout ton site.

Garde ce fichier à portée de main sur ton bureau : c’est lui qu’on va déposer chez un hébergeur à l’étape suivante.

💡 Avant d’exporter, renseigne l’« Adresse du site » dans l’onglet Page : tes métadonnées seront plus propres.

Le menu « Exporter » du Studio, ouvert sur « Télécharger le site (ZIP) ».
Ce que contient le ZIP (et comment le tester avant)

Le ZIP contient des fichiers HTML (une page = un fichier), un dossier de styles et tes images. Rien à installer : c’est un site « statique », prêt à servir tel quel.

Tu veux jeter un œil avant de publier ? Décompresse le ZIP et double-clique sur « index.html » : ton site s’ouvre dans ton navigateur, directement depuis ton ordinateur.

Dépose ton site chez Netlify

Va sur Netlify Drop, une page qui héberge ton site gratuitement. Glisse ton fichier ZIP directement dans la zone indiquée à l’écran.

Quelques secondes plus tard, ton site est en ligne à une adresse temporaire (du genre « nom-au-hasard.netlify.app »). Oui, c’est déjà fait : ton site existe pour vrai sur le web.

💡 Aucun compte technique requis pour tester. Crée un compte gratuit seulement quand tu voudras garder le site et brancher ton domaine.

La zone de dépôt de Netlify Drop, avec le fichier ZIP glissé au centre.
D’autres hébergeurs (Cloudflare, Vercel, GitHub, cPanel)

Netlify est le plus simple, mais ton site ZIP fonctionne aussi ailleurs. Voici les options les plus courantes et à qui elles conviennent :

Pour qui : Débuter, sans se casser la tête

  • Glisser-déposer, zéro configuration
  • HTTPS automatique
  • Généreux gratuitement

Marque Netlify dans l’adresse temporaire

Pour qui : Vitesse et gros trafic

  • Réseau mondial très rapide
  • Trafic illimité gratuit
  • Idéal si ton domaine est déjà chez Cloudflare

Interface un peu plus technique

Vercel

Gratuit pour commencer

Pour qui : Projets qui grandiront

  • Déploiement soigné
  • Excellent pour les sites évolutifs

Pensé pour les développeurs

Pour qui : Ceux qui utilisent déjà GitHub

  • Gratuit et stable
  • Bien pour un site simple

Il faut connaître Git

Hébergeur classique (cPanel)

Payant (déjà en cours souvent)

Pour qui : Si tu as déjà un forfait d’hébergement

  • Réutilise ce que tu paies déjà
  • Adresse courriel souvent incluse

Téléversement manuel des fichiers (FTP)

Teste ton adresse temporaire

Copie l’adresse que Netlify t’a donnée et ouvre-la, surtout sur ton téléphone. Clique tous tes liens, vérifie tes images, lis tes textes.

C’est le moment idéal pour corriger de petites choses dans le Studio, ré-exporter, et re-déposer. Personne ne connaît encore cette adresse : tu es tranquille pour peaufiner.

Le site ouvert sur un téléphone, à l’adresse temporaire de Netlify.

Achète ton nom de domaine

Le « tonentreprise.com », c’est ton adresse à toi. Va sur Namecheap, tape le nom que tu veux, et vois s’il est libre. S’il l’est, ajoute-le au panier et paie, quelques dollars par année.

Choisis de préférence un « .com » (connu partout) ou un « .ca » (bien pour le Québec). Note la date de renouvellement : un domaine, ça se garde en le renouvelant chaque année.

💡 Active l’option de confidentialité (souvent gratuite) pour que tes coordonnées personnelles restent privées.

La recherche Namecheap montrant un domaine disponible, prêt à ajouter au panier.
D’autres endroits où acheter un domaine

Namecheap est simple et honnête sur les prix, mais tu as le choix. Attention surtout au prix de renouvellement, souvent plus élevé que la première année :

Namecheap

≈ 10–15 $/an

Pour qui : La plupart des gens

  • Prix clairs
  • Confidentialité gratuite
  • Interface simple

Ventes additionnelles à décliner

Pour qui : Le meilleur prix, sans marge

  • Prix coûtant, aucune majoration
  • Confidentialité incluse

Il faut un compte Cloudflare

OVHcloud

≈ 12–20 $/an

Pour qui : Entreprises d’ici (support en français)

  • Présence au Canada
  • Support en français

Interface plus dense

Pour qui : Ceux qui veulent le plus simple

  • Interface très soignée
  • Confidentialité incluse

Un peu plus cher

Branche ton domaine à ton site

Dans Netlify, ouvre « Domain settings » et ajoute ton domaine. Netlify t’affiche alors quelques valeurs à copier.

Retourne chez Namecheap, dans la section DNS de ton domaine, et colle ces valeurs. Sauvegarde. C’est le seul moment un brin technique, mais c’est du copier-coller guidé, pas de la magie noire.

💡 Un doute sur une valeur ? Recopie-la exactement comme Netlify l’affiche, sans rien ajouter.

Côte à côte : les valeurs DNS fournies par Netlify et le formulaire DNS de Namecheap.
C’est quoi le DNS ? (A, CNAME, nameservers)

Le DNS, c’est l’annuaire du web : il dit « ce nom de domaine mène vers ce serveur ». Tu croiseras trois mots :

  • Enregistrement A : pointe ton domaine « nu » (tonentreprise.com) vers une adresse IP.
  • Enregistrement CNAME : pointe un sous-domaine (www.tonentreprise.com) vers une autre adresse.
  • Nameservers : l’option « tout confier ». Tu remplaces les serveurs de noms chez Namecheap par ceux de Netlify, et Netlify gère le reste.
Ça ne marche pas ? Le dépannage rapide
  • Attends : un changement DNS peut prendre de quelques minutes à quelques heures.
  • Vérifie qu’il n’y a pas de vieil enregistrement en double qui pointe ailleurs.
  • Recopie la valeur sans espace avant/après.
  • Teste la propagation sur whatsmydns.net en tapant ton domaine.

Active le petit cadenas (HTTPS)

Le cadenas dans la barre d’adresse, c’est le certificat de sécurité (HTTPS). Chez Netlify, il s’active tout seul une fois ton domaine branché, souvent en quelques minutes.

Si tu ne le vois pas encore, patiente un peu, puis, dans Netlify, clique sur « Verify DNS configuration » puis « Provision certificate ». C’est gratuit et automatique.

La barre d’adresse du navigateur avec le cadenas HTTPS bien visible.
Avec ou sans « www » : choisis-en un

Tu veux que « tonentreprise.com » et « www.tonentreprise.com » mènent au même endroit. Dans Netlify, définis une version « principale » ; l’autre y sera automatiquement redirigée. Une seule adresse officielle, c’est mieux pour le référencement.

Patiente, puis vérifie tout

Après avoir branché le domaine, laisse au réseau le temps de se mettre à jour, de quelques minutes à quelques heures. Ne panique pas si ça ne marche pas dans la seconde.

Une fois en ligne à ton adresse, refais le tour : sur ton téléphone et sur un autre appareil, clique tous les liens, et confirme que le cadenas est bien là.

whatsmydns.net affichant la propagation du domaine à travers le monde.

Un courriel à ton nom de domaine

« [email protected] » fait tout de suite plus sérieux qu’une adresse Gmail. Le plus simple pour commencer : une redirection gratuite. Chez Namecheap, crée une redirection qui envoie « [email protected] » vers ta boîte Gmail habituelle.

Tu veux aussi écrire depuis cette adresse (pas seulement recevoir) ? Passe à une vraie boîte : Zoho Mail offre une option gratuite pour un domaine, sinon Google Workspace est le standard.

💡 Une redirection, c’est gratuit et instantané pour recevoir. Une vraie boîte te permet d’envoyer depuis ton adresse pro.

Le panneau de redirection courriel de Namecheap, avec une adresse au domaine.
Comparer les options de courriel

Du plus simple au plus complet. Pour envoyer depuis ton adresse, il faudra ajouter quelques enregistrements « MX » chez ton registraire, et le service te guide pas à pas.

Redirection (registraire)

Gratuit

Pour qui : Juste recevoir, tout de suite

  • Gratuit
  • Mise en place en 2 minutes

Ne permet pas d’envoyer depuis l’adresse

Zoho Mail

Gratuit à modeste

Pour qui : Une vraie boîte, sans frais

  • Option gratuite pour un domaine
  • Envoi et réception

Marque moins connue

Google Workspace

≈ 8–9 $/mois

Pour qui : Ceux qui vivent dans Gmail

  • Gmail avec ton domaine
  • Agenda, Drive inclus

Abonnement mensuel par personne

Microsoft 365

≈ 8 $/mois

Pour qui : Ceux qui utilisent Outlook / Office

  • Outlook avec ton domaine
  • Word, Excel inclus

Abonnement mensuel par personne

Fastmail

≈ 5 $/mois

Pour qui : Simplicité et respect de la vie privée

  • Rapide et sans pub
  • Bon support des domaines

Payant dès le départ

Et après ?

Ton site est en ligne, à ton nom, avec un cadenas et une adresse courriel pro. Bravo. Voici quelques prochains pas, quand tu voudras :

Aller plus loin quand tu seras prêt
  • Mesurer tes visiteurs avec un outil d’analyse respectueux de la vie privée.
  • Ajouter un formulaire de contact (Netlify en offre un intégré).
  • Garder une copie de ton projet (l’export JSON du Studio).
  • Noter les dates de renouvellement du domaine dans ton agenda.

Tu préfères que je m’en occupe ?

Si l’étape du domaine te donne des sueurs froides, ou si tu veux simplement que quelqu’un règle la mise en ligne une bonne fois pour toutes, c’est exactement le genre de chose que je fais en vingt minutes. Écris-moi et on met ton site en ligne ensemble.