Votre site est prêt mais vous ne savez pas comment le faire monter sur la scène mondiale ? Pas de soucis 😉 Flow Agency vous explique toutes les étapes !
Et peut-être aussi :
Un "down time" de votre site est à prévoir. Il peut varier entre 30 mins et 2 ou 3h, en fonction des personnes (nous vous expliquons cela plus en détails dans la procédure).
Nous commencerons par vous transférer le site webflow vers votre compte, et pour cela nous avons uniquement besoin que vous nous communiquiez l'email de ce compte.
Une fois cela fait, le projet sera visible dans le dashboard de votre compte Webflow et vous pourrez souscrire à une option d'hébergement parmi celles proposées par webflow qui correspond à vos besoins dans les "Project Settings", onglet "Hosting" :
Cette étape est la seule que nous sommes obligés de faire ensemble : tout ce qui suis peut-être faire uniquement par notre équipe ou la votre ! Il suffit d'avoir les identifiants mentionnés dans la section "ce dont vous aurez besoin". Vous pouvez nous communiquez vos identifiants le temps de la manoeuvre pour que nous puissions le faire de manière autonome. Sinon, nous saurons nous accorder avec vos équipes pour le faire de concert !
Tout le monde n'aura pas forcément besoin de cette étape : il se peu que vous soyez déjà le possesseur du nom de domaine sur lequel vous souhaitez héberger le site. Dans ce cas, vous pouvez passer directement à l'étape suivante. Si ce n'est pas le cas, ce n'est pas grave ! Nous allons vous expliquer la marche à suivre, et elle n'est pas très compliquée 😉
Pour commencer, sachez que tous les noms de domaines ne valent pas le même prix ! Ces derniers varient souvent en fonction de la "fin" que vous souhaitez : un ".com" sera souvent plus cher qu'un ".fr", un nom court plus cher qu'un nom long, etc. Nous vous invitons à regarder un peu ceux qui existent pour choisir le votre au mieux, mais sachez que rien n'est définitif : vous pourrez toujours changer le site de nom de domaine plus tard, il suffira d'en racheter un autre !
De nombreux sites proposent d'acheter les noms de domaines et permettent ensuite de les administrer 😊 Vous pourrez toujours migrer le nom de domaine d'un site à un autre, par exemple de Google Domains à OVH Cloud, le nom de domaine vous appartient à vous, où que vous soyez !
Pour cette exemple, nous allons acheter le domaine "picabou.io" sur Google Domains.
Sur le site que vous avez choisit, chercher le nom de domaine que vous souhaitez acquérir :
Vous pouvez voir si le domaine est disponible, son prix, ainsi que quelques avantages qu'il comporte (l'affichage peut varier en fonction du site utilisé, bien entendu). Un nom court est préférable, car plus facilement mémorable ! 😀
Une fois que vous avez ajouté l'élément à votre panier, vous devrez rentrer quelques informations vous concernant et enfin vous pourrez procéder au paiement, tout simplement ! C'est le moment de faire chauffer la carte...😏
Une fois l'achat finalisé, vous aurez accès à l'administration du DNS de votre domaine, et vous allez en entendre parler un peu plus bas car nous allons changer quelques petites choses dedans un peu plus loin. 😉
Comme la précedente, cette étape ne sera nécessaire pour tout le monde. Elle ne l'ai que si le site webflow que vous souhaitez publier vient remplacer un site déjà en ligne sur le même domaine.
Il faut pour commencer enlever tout site publié sur le domaine ciblé. Nous vous conseillons de le faire pour "www.votre-domaine.com" et "votre-domaine.com".
Dans votre DNS, cela peut se présenter sous le forme de "@" ou "www" uniquement, sans "votre-domaine.com" écrit clairement. Assurez-vous de configurer le bon domaine si vous en gérer plusieurs !
Avant de faire toute mofication, nous vous conseillons de sauvegarder les entrées actuelles de votre DNS, afin de pouvoir remettre les choses "comme elles étaient avant" en cas de besoin. Une simple capture d'écran suffit, rapide et emplement suffisant !
Pour identifier ce qui est à enlever, prenez les entrées de type "A", "CNAME" ou "AAAA".
Dans la figure 1 ci dessus, celles en rouge seraient à enlever car de type A, AAAA ou CNAME, les autres non!
A ce moment là, les URL "www.votre-domaine.com" et "votre-domaine.com" devraient afficher une page d'erreur si vous essayer d'aller dessus, mais c'est normal ! Pas de panique, le jeu en vaut la chandelle et bientôt votre nouveau site sera bien en place 😉
Dans votre compte WebFlow, dans les paramètre du projet que vous souhaitez publier, cliquez sur "Add custom domains" et renseignez le ou les domaines que vous voulez pour le site dans webflow (cette option n'étant disponible qu'avec une option d'hébergement payante).
Ce sont normalement le domaine que vous venez de supprimer du DNS, donc "votre-domaine.com".
Dans la figure 2 ci-dessous, vous pouvez voir ce que webflow vous affichera une fois que vous lui aurez renseigné vos nom de domaines. Ce sont en fait les nouvelles entrées DNS à mettre à la place de celles que nous avons supprimées juste avant. Nous nous en occupons dans l'étape 5. 😉
Il faut donc créer deux entrées DNS de type "A" pour "@" ou "votre-domaine.com" et "www" ou "www.votre-domaine.com" avec les adresses IPs données par Webflow. Vous pouvez remarquer qu'il y en a 2 pour que le site soit "high available", et éviter qu'il ne soit pas disponible à cause, par exemple, d'un trop grand nombre de visiteurs. Si votre DNS ne permet pas de mettre deux IP pour la même entrée directement, pas de panique ! Créez simplement deux entrées différentes. 😉
Une fois les entrées de type "A" créées, il faudra créer celle de type "CNAME", comme webflow vous l'indique.
Quand toutes les entrées sont créées, Webflow devrait noter "Connected" à droite des différentes URLs, contrairement à "Issues detected" juste avant. Si le status ne se met pas à jour automatiquement, vous pouvez le raffraichir manuellement.
Vous pourrez ensuite choisir quelle URL sera celle par défaut en cliquant sur le bouton à côté du nom de domaine : "www.votre-domaine.com" ou "votre-domaine.com". Ce sera vers celle-là que l'utilisateur sera redirigé quand il arrivera sur votre site, peut importe ce que lui aura tapé dans son navigateur 😁
C'est grâce à ce système que vous être redirigés vers "www.google.com" lorsque vous tapez uniquement "google.com" !
Si vous avez un problème technique pour effectuer ces changements, contacter directement le support technique de la plate-forme qui gère votre nom de domaine (OVH Cloud, Google Domains, ou autre).
Il faudra ensuite sûrement attendre un peu, le temps que les changements s'opèrent, et vous pourez voir le site en ligne sur la bonne URL ! Cela peut quelques minutes... et jusqu'à quelques heures! Les propagations DNS dépendent de beaucoup de choses, et malheureusement, rien que vous puissiez contrôler...
Comme préciser ci-dessus, il faudra sûrement vous munir de patience (ou de chance) avant de pouvoir terminer cette étape.
Il s'agit tout simplement de vous rendre sur votre site, via l'URL que nous avons mis en place plus tôt, "www.votre-domaine.com" ou "votre-domaine.com", au choix.
Vous pouvez demander à d'autres personnes de regarder, utiliser vos données mobiles sur votre téléphone, vider votre cache ou passer en navigation privée changer de fournisseur d'accès à internet (éviter quand même pour ce dernier, ça ne vaut pas le coup !)... Il y a vraiment beaucoup de paramètres pouvant influencer le temps de mise en place des changements sur l'internet, et (malheureusement) pas de formule magique pour que puissiez avoir la satisfaction d'être le premier à voir le nouveau site bien installé sur son nouveau domaine. 😢
En attendant, vous pouvez vous rendre dans la section "Hosting" des "Project Settings" et vérifier que le SSL est bien activé. Par défaut, il devrait l'être, mais on ne sait jamais. La section se trouve tout en base de la page.
Pour information, le SSL n'est pas "obligatoire" mais depuis quelques années, il est mal vu de ne pas l'avoir sur son site, même si celui-ci ne comporte pas de systèmes d'authentification ou de formulaires. C'est quand il n'y a pas de SSL que vous pouvez voir la mention "Non Sécurisé" à côté du nom de votre site dans la barre de navigation ou même pire, passer par une page "Connexion Non Sécurisée", qui peut en faire fuire plus d'un.
Webflow rend l'activation simple... Autant en profiter !
Toutes fois, si au bout de 2 ou 3h, ni vous, ni personne de votre entourage n'arrive à accéder au nouveau site, il y a certainement eut un problème !
Comme on est sympa, on vous donnes quelques pistes en cas de soucis, mais la liste est loin d'être exhaustive 😉