Votre site Webflow est prêt, et il est temps de le mettre en ligne ! Ce guide va vous accompagner étape par étape dans le processus de mise en ligne, que vous migriez depuis un autre CMS ou que vous lanciez un tout nouveau site.
Quelques notions essentielles à connaître
Avant de commencer, voici quelques définitions simples :
- Nom de domaine : c’est l’adresse de votre site web (ex.
monsite.com) - Hébergement : Le serveur où sont stockés les fichiers de votre site. Avec Webflow, l'hébergement est inclus et géré automatiquement
- Hébergeur DNS (gestionnaire de domaine) : Le service qui gère les réglages DNS de votre nom de domaine, donc qui indique où trouver votre site (ex. OVH ou Cloudflare)
- DNS (Domain Name System) : ce sont des réglages techniques qui indiquent vers quel site votre domaine doit diriger les visiteurs. Imaginez les DNS comme un annuaire téléphonique pour internet. Quand quelqu'un tape votre nom de domaine, les DNS indiquent où trouver votre site. Donc pour mettre votre site Webflow en ligne, nous allons simplement mettre à jour cet "annuaire" pour qu'il pointe vers Webflow.
- Propagation DNS : le temps nécessaire pour que ces changements soient visibles
- SSL (Secure Sockets Layer) : C'est un protocole de sécurité qui chiffre les données échangées entre le navigateur de vos visiteurs et votre site web. Le certificat SSL permet d'avoir "https://" au lieu de “http://” et le petit cadenas de sécurité dans la barre d'adresse 🔒
Cas n°1 : Mise en ligne d’un nouveau site sur Webflow
Dans ce cas, vous n’avez pas encore de site existant et probablement pas encore de nom de domaine.
Étape 1 : Création de votre site Webflow
La première étape consiste à concevoir entièrement le site dans Webflow. Au fur et à mesure de l’intégration des différentes pages du site, il peut être publié sur l’environnement de pré-production de Webflow afin de visualiser le rendu final. Cette version de test permet de valider le design, l’ergonomie et les fonctionnalités du site (navigation, formulaires, animations) avant toute mise en ligne publique.
Une fois le site validé visuellement, les paramètres SEO (titres, descriptions, structure des pages) ainsi que les outils de tracking (mesure d’audience, conversions) peuvent être configurés.
La dernière étape consiste à choisir le plan Webflow qui convient le mieux à votre projet. Si vous hésitez entre plusieurs plans, nous avons créé un article dédié pour vous aider à faire le bon choix.
Étape 2 : Achat du nom de domaine
Lorsque le site est validé, il est nécessaire d’acheter un nom de domaine personnalisé (ex: monsite.fr) auprès d’un hébergeur de domaine (comme OVH) afin de publier le site sur une URL professionnelle.
Il est possible de mettre en ligne un site uniquement via le sous-domaine Webflow utilisé en phase de pré-production (par exemple monsite.webflow.io). Toutefois, l’utilisation d’un nom de domaine personnalisé est fortement recommandée : elle renforce le professionnalisme et la crédibilité du projet et améliore le référencement naturel (SEO).
Il existe de nombreux hébergeurs de noms de domaine. Parmi les plus courants, on peut citer OVH, Gandi, IONOS, Namecheap ou encore GoDaddy. Le choix de l’hébergeur n’a pas d’impact direct sur Webflow: l’important est simplement de pouvoir gérer facilement les paramètres DNS du domaine.
Conseil : Achetez seulement le nom de domaine, pas d'hébergement ni d'emails pour l'instant. Webflow fournit déjà l'hébergement !
Étape 3 : Ajout des noms de domaines dans Webflow
Une fois le nom de domaine acheté, celui-ci doit être ajouté dans les paramètres d’hébergement de Webflow. Pour ce faire, aller dans les paramètres du projet → onglet Publication → Production → Ajouter les noms de domaines.
Exemple : si vous ajoutez les noms de domaines www.monsite.com et monsite.com, l'un sera défini comme domaine par défaut (généralement www.monsite.com), et l'autre redirigera automatiquement vers celui-ci.
Étape 4 : Configuration des DNS pour Webflow
Webflow génère alors automatiquement les enregistrements DNS nécessaires pour connecter le domaine au site. Ces enregistrements doivent être renseignés chez l’hébergeur du nom de domaine (par exemple OVH).
Connectez-vous à votre hébergeur de domaine, puis dans la section Zone DNS, ajoutez les enregistrements de types A et CNAME générés par Webflow. Cette étape permet d’établir le lien technique entre le nom de domaine et le site Webflow, et conditionne la suite du processus de mise en ligne.
Étape 5 : Vérification des domaines
Une fois que les DNS du domaine sont configurés pour pointer vers Webflow, revenir sur Webflow et cliquer sur “Vérifier les domaines” pour vérifier que la connexion a bien été établie. Si la connexion ne s’établit pas du premier coup, attendre quelques minutes puis réessayer.
Étape 6 : Activer le certificat SSL
Une fois votre domaine vérifié, Webflow génère automatiquement un certificat SSL (cela peut prendre quelques minutes).
Activez ensuite l'option "Force HTTPS redirect" dans les paramètres d'hébergement pour que tous les visiteurs utilisent automatiquement la version sécurisée de votre site.
Étape 7 : Publication du site
Une fois la connexion établie, vous pouvez publier votre site en ligne. Attention : les DNS peuvent mettre plusieurs heures à se propager (jusqu’à 48h) donc il est possible qu’il y ait un moment de latence avant que le site soit accessible partout dans le monde.
Cas n°2 : Mise en ligne suite à une migration de CMS
Vous avez déjà un site en ligne et vous souhaitez le migrer sur Webflow. Dans le cadre de cet article, nous allons prendre l’exemple d’une migration de Wordpress vers Webflow avec un hébergement sur OVH car c’est le cas auquel nous faisons face le plus couramment. D'ailleurs, pour vous aider dans le migration de vote site, en tant qu'agence Webflow nous serons ravis de vous accompagner.
Étape 1 : Création de votre site Webflow
La première étape consiste à concevoir entièrement le site dans Webflow et à migrer le contenu du site existant sur le nouveau site. Au fur et à mesure de l’intégration des différentes pages du site, il peut être publié sur l’environnement de pré-production de Webflow afin de visualiser le rendu final. Cette version de test permet de valider le design, l’ergonomie et les fonctionnalités du site (navigation, formulaires, animations) avant toute mise en ligne publique.
Une fois le site validé visuellement, les paramètres SEO (titres, descriptions, structure des pages) ainsi que les outils de tracking (mesure d’audience, conversions) peuvent être configurés.
Le site WordPress reste en ligne pendant toute cette phase de création, il n’y a donc aucun impact pour vos visiteurs à ce stade.
La dernière étape consiste à choisir le plan Webflow qui convient le mieux à votre projet. Si vous hésitez entre plusieurs plans, nous avons créé un article dédié pour vous aider à faire le bon choix.
Étape 2 : Ajout des noms de domaines dans Webflow
Lorsque le site est validé, il faut ajouter votre/vos noms de domaines dans les paramètres d’hébergement de Webflow. Pour ce faire, aller dans les paramètres du projet → onglet Publication → Production → Ajouter les noms de domaine.
Étape 3 : Configuration des DNS pour Webflow
Webflow génère alors automatiquement les enregistrements DNS nécessaires pour connecter le domaine au site.
Connectez-vous à votre compte OVH, puis dans la section Zone DNS, remplacez les enregistrements de types A et CNAME actuels (liés à Wordpress) par les enregistrements DNS générés par Webflow. Cette action indique à Internet que votre site se trouve maintenant sur Webflow.
Conseil : avant de remplacer les DNS liés à Wordpress, faites une capture d’écran de tous les enregistrements. Cette action est purement sécuritaire et permet de faire un retour en arrière dans le cas où la migration des DNS vers Webflow ne fonctionnerait pas.
Note : Si vous avez des adresses email professionnelles (contact@monsite.com), ne touchez pas aux enregistrements de type MX. Ces enregistrements gèrent vos emails et doivent rester intacts.
Étape 4 : Vérification du domaine dans Webflow
Webflow détecte automatiquement les nouveaux réglages DNS. Retournez dans Webflow et cliquez sur “Verify domain” pour voir si la connexion a bien été établie. Cette vérification peut prendre quelques minutes à quelques heures, cela dépend de la propagation DNS.
Étape 5 : Activer le certificat SSL
Une fois votre domaine vérifié, Webflow génère automatiquement un certificat SSL (cela peut prendre quelques minutes).
Quand c'est fait, activez l'option "Force HTTPS redirect" pour que tous les visiteurs utilisent automatiquement la version sécurisée de votre site.
Étape 6 : Configurer les redirections
Si votre site WordPress avait des URLs différentes de votre nouveau site Webflow, vous devez créer des redirections pour :
- Éviter les erreurs 404 (page introuvable)
- Préserver votre référencement Google
Pour ce faire, se rendre dans les paramètres du site Webflow, onglet Publication, Section Redirections 301.
Étape 7 : Mise en ligne du site Webflow
Une fois les redirections 301 faites, vous pouvez publier le site en ligne.
La propagation des DNS peut prendre quelques heures (jusqu’à 48h). En effet, les changements ne sont pas immédiats partout, certains visiteurs voient encore l’ancien site WordPress, d’autres voient déjà le nouveau site Webflow. Cette période de transition est tout à fait normale (et sans risque!)
Conseil : Faites la mise en ligne en dehors des heures de pointe (tôt le matin ou tard le soir) pour minimiser l'impact.
Étape 8 : Tester votre site
Une fois la propagation terminée, vérifiez que tout fonctionne :
- Votre site s'affiche sur monsite.com
- Votre site s'affiche sur www.monsite.com
- Le petit cadenas de sécurité (HTTPS) est présent
- Vos redirections fonctionnent correctement
Étape 9 : Fin de la transition
Lorsque la propagation est terminée et que tous les visiteurs voient le site Webflow, vérifiez dans votre zone DNS OVH qu'il ne reste aucun ancien enregistrement WordPress inutile qui pourrait interférer avec ceux de Webflow. L’ancien site WordPress peut à présent être désactivé ou supprimé.
Les points importants à retenir
- La mise en ligne dépend uniquement des DNS
- La propagation DNS est la seule étape qui peut prendre du temps
- La publication Webflow est instantanée
- Aucun réglage particulier n’est nécessaire dans WordPress
- Dans le cas d'une migration, votre site reste accessible pendant la propagation DNS. Il peut y avoir quelques minutes d'indisponibilité pendant la transition, mais c'est généralement très bref.
Conclusion
Que vous migriez un site WordPress vers Webflow ou que vous créiez un nouveau site, la mise en ligne suit toujours le même principe : faire pointer votre nom de domaine vers Webflow et attendre la propagation DNS. C’est une étape technique mais sans risque lorsqu’elle est bien préparée.
Bon lancement ! 🚀
.svg)
