Migrer de Webflow vers Astro : la méthode testée sur nos deux sites

Besoin de parler avec un expert ?

Contactez un expert

Migrer de Webflow vers Astro : la méthode testée sur nos deux sites

Temps de lecture : 13 min

Migrer un site Webflow vers Astro consiste à récupérer le contenu (export CSV des collections CMS) et le design (export du code), puis à reconstruire le site en code en gardant exactement les mêmes URL. La migration se gagne ou se perd sur le SEO de la bascule (redirections, canonical, images rapatriées) et sur une question que presque personne ne pose au départ : qui modifiera le site une fois sorti de l'éditeur visuel ?

Chez Noxcod, on l'a fait deux fois, sur nos propres sites. Le site marketing de Tala, notre produit d'agents vocaux, est passé de Webflow à Astro en une semaine environ. Puis noxcod.com, construit pendant des années sur Webflow, a suivi le même chemin avec un blog bien plus gros. Nous racontons ici la méthode qu'on applique désormais pour une migration d'un site Webflow vers du code, avec les erreurs qu'on a commises en route. Si vous hésitez encore sur l'intérêt de partir, commencez plutôt par un audit de votre site et de ce que l'IA peut y reprendre : la réponse dépend beaucoup de qui édite le site chez vous.

Pourquoi passer d'un site Webflow à Astro ?

Parce qu'un site marketing ou un blog n'a presque rien de dynamique, et qu'Astro est fait pour servir ce genre de pages : du HTML généré à l'avance, que n'importe quel hébergeur statique distribue pour presque rien. La documentation officielle présente Astro comme le framework web des sites orientés contenu (blogs, sites marketing, e-commerce), avec zéro JavaScript envoyé au navigateur par défaut.

Le deuxième argument, ce sont les collections de contenu. Dans Astro, une collection de contenu regroupe des données de même forme, stockées dans des fichiers Markdown ou JSON du projet, ou chargées depuis un CMS ou une base. On décrit la forme attendue (un titre, une image, une date) et Astro signale toute entrée qui ne la respecte pas. Pour quelqu'un qui vient du CMS de Webflow, la logique est familière : une collection, des champs, un gabarit de page. La différence, c'est que tout vit dans un dépôt de code, versionné, que l'on peut relire ligne à ligne.

Le troisième argument est celui qui nous a fait basculer. Un site en code se modifie par des agents de code IA. Webflow le voit aussi : selon l'annonce publiée sur le blog d'Astro, Webflow a fait un don de 150 000 $ au projet Astro et a choisi Astro pour les applications générées par son IA. Tout site Webflow n'a pas vocation à partir, mais l'argument « on n'a pas de développeur » pèse beaucoup moins lourd qu'il y a deux ans.

Que peut-on exporter de Webflow, et qu'est-ce qui ne suit pas ?

Webflow exporte deux choses séparément : le code statique du site (HTML, CSS, JavaScript, images) et le contenu de chaque collection CMS au format CSV (ou par l'API CMS, par script). Tout ce qui tourne sur les serveurs de Webflow reste chez Webflow.

L'export du code n'est pas offert à tout le monde. D'après l'aide officielle de Webflow, il n'existe que sur les plans Workspace payants, pas sur les plans Site. Au 14 octobre 2026, la page tarifs de Webflow inclut l'export de code dans les plans Workspace payants, dès le plan Freelancer à 16 $ par mois, ou le plan Core destiné aux équipes à 19 $ par mois, en facturation annuelle. La même page d'aide liste ce qui ne part pas dans l'archive : le contenu CMS, les comptes utilisateurs, les données e-commerce, les composants de code et les contenus traduits. Sur un site exporté, les listes de collections affichent leur état vide, la recherche interne ne fonctionne plus, les formulaires non plus, et les pages protégées par mot de passe ne le sont plus.

Le contenu des collections se récupère à part, collection par collection, avec le bouton d'export CSV. Webflow précise aussi dans son annonce de l'export CSV que les champs image et fichier sont exportés sous forme d'URL qui pointent vers le projet d'origine. Si vous supprimez le projet, ces liens cassent définitivement, et c'est vrai aussi pour les images insérées dans le texte riche. Autrement dit, tant que vous n'avez pas rapatrié vos images, vous ne pouvez pas fermer Webflow.

ÉlémentCe que Webflow livreCe qu'il faut faire côté Astro
Pages et designHTML, CSS, JS (plan Workspace payant)Reconstruire en composants, l'export sert de référence
Collections CMSUn CSV par collectionConvertir en fichiers JSON ou Markdown, ou importer dans un CMS headless
ImagesDes URL vers le CDN WebflowTélécharger, héberger ailleurs, réécrire les URL
Formulaires et rechercheRien qui fonctionne hors WebflowRebrancher sur un service ou un petit backend
E-commerce, comptesDonnées en CSV, logique absenteProjet à part entière, à chiffrer séparément

Les animations ne figurent pas dans la liste de ce qui disparaît. Ne gardez que celles qui servent : un script généré que personne chez vous n'a écrit coûte cher à maintenir.

Comment migrer un site Webflow vers Astro, étape par étape ?

Dans cet ordre : inventaire des URL, données, images, design, formulaires, redirections, puis bascule DNS. L'ordre compte, parce que chaque étape s'appuie sur la liste d'URL établie à la première.

On commence par le sitemap. Webflow génère automatiquement un sitemap XML, une fonction listée sur sa page tarifs. On le télécharge, on en tire une liste propre, et on y ajoute les URL qui reçoivent du trafic dans Search Console sans figurer dans le sitemap (anciennes routes, anciennes catégories, versions anglaises abandonnées). Cette liste devient le contrat de la migration : chaque ligne doit soit exister à l'identique sur le nouveau site, soit rediriger en 301 vers une page qui existe. Sur noxcod.com, on a gardé le format de Webflow, sans barre oblique finale. Astro le permet très bien avec deux réglages documentés dans sa référence de configuration : générer un fichier page.html par route et n'accepter que les URL sans barre oblique finale.

Viennent ensuite les données. Chaque collection Webflow (pour nous : agences, outils, projets, formations, équipe, FAQ) a été exportée en CSV puis convertie par un script en fichiers JSON dans le dépôt. Le blog, beaucoup plus volumineux, est parti dans un CMS headless, une base de contenu séparée du site que les pages interrogent au moment de la construction. Sur le site de Tala, même logique : articles exportés en CSV, importés par script dans le backend du produit.

Les images suivent juste après. Un script parcourt chaque article, télécharge chaque image depuis le CDN de Webflow, la dépose dans notre propre stockage (Cloudflare R2 pour noxcod.com) et réécrit l'URL dans le corps du texte. C'est le travail le plus ingrat de la migration, et le plus facile à oublier, puisque tout s'affiche correctement tant que Webflow héberge encore les fichiers.

Pour le design, on n'a rien deviné. L'export HTML et CSS de Webflow a servi de référence : on relisait la vraie marge, la vraie couleur, la vraie taille de police dans le fichier exporté avant de reconstruire chaque composant. On a aussi gardé le CSS de Webflow tel quel pour aller vite. Ça nous a fait gagner des jours au début et coûté des heures ensuite. Le CSS exporté de notre site posait par exemple une hauteur de ligne absolue sur le corps de la page, héritée partout, qui rognait le haut et le bas de nos grands titres en dégradé. Prévoyez de le remplacer.

Les formulaires s'inventorient un par un avant la bascule, puisqu'aucun ne fonctionnera hors Webflow : chacun doit être rebranché sur un service de formulaires, une petite fonction serveur ou votre CRM. Les redirections s'écrivent ensuite dans un fichier _redirects que Cloudflare Pages lit à chaque déploiement. On termine par la bascule DNS du domaine vers le nouvel hébergement, avec la liste d'URL sous la main pour tout vérifier dans l'heure qui suit.

La bascule SEO d'un site Webflow vers Astro

Six contrôles, appliqués sur noxcod.com et sur le site de Tala. Critère de sortie : chaque URL de l'ancien site répond 200, ou 301 vers une page qui répond 200.

1. Inventaire des URL

sitemap.xml et pages qui reçoivent du trafic dans Search Console.

Avant
2. Mêmes URL

Même format, sans barre oblique finale.

Avant
3. Redirections 301 ordonnées

Règles précises d'abord, jokers ensuite, aucune chaîne.

Bascule
4. Canonical vérifiées

Chaque page pointe vers elle-même, jamais vers une URL redirigée.

Bascule
5. Images rapatriées

Hors du CDN Webflow, URL réécrites.

Bascule
6. Sitemap soumis

Nouveau sitemap dans Search Console, domaine technique redirigé.

Après

Sources : documentation Cloudflare Pages (redirections), documentation Astro. Noxcod.

Quelles erreurs SEO guettent la bascule ?

Les erreurs qui coûtent du référencement à la bascule sont presque toutes des erreurs de redirection, et on en a commis plusieurs. Elles se détectent toutes avec un script qui teste chaque URL de l'ancien site.

Premier piège, l'ordre des règles. La documentation des redirections Cloudflare Pages est claire : quand plusieurs règles visent la même source, c'est la plus haute dans le fichier qui s'applique, et les redirections statiques doivent précéder les dynamiques. Une règle joker placée trop haut avale donc toutes les règles précises écrites en dessous. La même page rappelle qu'une redirection sans code explicite part en 302, une redirection temporaire : écrivez 301 sur chaque ligne. On a aussi constaté que Cloudflare ne raccourcit pas les chaînes : si A redirige vers B et que B redirige vers C, le navigateur et le robot de Google font deux allers-retours. Chaque règle doit viser directement la destination finale.

Deuxième piège, le joker qui conserve la fin de l'URL. Une règle du type « tout ce qui commence par l'ancienne catégorie part vers la nouvelle catégorie, avec la même fin » paraît élégante. Elle envoie pourtant une partie des visiteurs vers des pages qui n'existent pas, dès que les slugs ont changé entre les deux sites. On l'a découvert en testant chaque destination, pas en relisant le fichier.

Troisième piège, la canonical de la page d'accueil. La nôtre déclarait /index comme adresse officielle, alors que /index redirige vers la racine du site. Google recevait donc une consigne contradictoire sur la page la plus importante du site.

Quatrième piège, le domaine technique. Cloudflare Pages sert aussi le site sur une adresse en pages.dev, qui duplique tout le contenu. Le fichier _redirects ne gère pas les redirections de domaine, Cloudflare le documente noir sur blanc. La documentation propose de passer par les redirections en masse ; on l'a fait avec un petit worker. Dernier piège, plus sournois : quand on a remplacé une image en gardant son nom de fichier, Cloudflare a continué de servir l'ancienne pendant des jours. Chez nous, une image modifiée prend désormais un nouveau nom. Pour le reste des bonnes pratiques, notre article sur le SEO d'un site no-code reste valable après la migration.

Qui édite le site une fois sorti de Webflow ?

Trois réponses sont possibles : des fichiers dans le dépôt modifiés par un développeur, un CMS headless avec une interface pour l'équipe marketing, ou des agents de code IA qui travaillent directement dans le dépôt. C'est cette décision, plus que la technique, qui dit si la migration était une bonne idée.

Les fichiers JSON ou Markdown dans le dépôt conviennent aux contenus qui bougent peu, comme les pages de services, l'équipe ou la FAQ. Le CMS headless convient au blog et à tout ce qu'une personne non technique doit publier seule. Astro sait lire les deux, puisque ses collections acceptent des fichiers locaux comme des sources distantes. La troisième voie est celle qu'on a choisie pour noxcod.com. Le site est édité par des agents IA (Claude Code), et une chaîne d'agents met en ligne un article de blog chaque nuit, sans qu'une personne ouvre un éditeur. Si le sujet vous intéresse, nous avons détaillé comment utiliser Claude Code au quotidien.

C'est là que le calcul se renverse. Face à un éditeur visuel, un site en code avait un défaut majeur : chaque modification demandait un développeur. Avec un agent qui lit le dépôt, comprend la structure et ouvre une modification relisible, ce défaut disparaît en grande partie, et les avantages du code restent, à commencer par l'historique complet de chaque modification et le retour arrière en une commande.

Un piège nous a appris à trancher cette question tôt. Le script de migration des données est un aller simple. Une fois le site en production modifié directement dans les fichiers JSON, relancer le script depuis l'export Webflow figé aurait effacé tout ce qui avait été créé depuis. On l'a mesuré : des pages en ligne supprimées, des titres SEO revenus en arrière. Le script est désormais verrouillé. Après la bascule, la source de vérité change de camp. Décidez-le explicitement et rendez l'ancien chemin impossible à emprunter par erreur, y compris par un agent.

Combien coûte l'hébergement d'un site Astro comparé à Webflow ?

Pour un site statique, l'hébergement sur l'offre gratuite de Cloudflare Pages ne coûte rien tant qu'on reste sous ses limites, alors qu'un site Webflow avec CMS se paie chaque mois, plus les sièges d'édition.

Côté Webflow, au 14 octobre 2026, la page tarifs officielle affiche le plan Site Basic à 15 $ par mois en facturation annuelle, pour un site sans CMS, et le plan Premium, qui inclut le CMS, à partir de 25 $ par mois facturés à l'année. Les prix sont en dollars, par site, taxes en sus. Chaque espace de travail inclut un siège complet ; au-delà, un siège complet est affiché à 39 $ par mois et un siège limité à l'édition de contenu à 15 $ par mois, en facturation annuelle. Le détail par plan est dans notre article sur le coût réel d'un site Webflow.

Côté Cloudflare, la documentation indique que les requêtes vers les fichiers statiques sont gratuites et illimitées, sur l'offre gratuite comme sur les offres payantes. Les limites de l'offre gratuite portent ailleurs : 500 constructions du site par mois, 20 000 fichiers par site, 25 Mio par fichier, et un fichier _redirects plafonné à 2 000 redirections statiques plus 100 dynamiques. Un agent qui met un article en ligne chaque nuit reste très loin de ce plafond, même en comptant les autres mises à jour du site.

L'hébergement n'est pourtant pas le vrai poste de dépense. Le coût d'une migration, c'est le travail de la bascule (inventaire, données, images, redirections) et, ensuite, le temps de celui qui édite. Si personne ne sait modifier le site après le départ de Webflow, les économies d'hébergement ne compensent rien.

Quand vaut-il mieux rester sur Webflow ?

Restez sur Webflow si votre équipe marketing modifie le site visuellement chaque semaine sans développeur, et qu'elle n'a aucune envie de changer de façon de travailler. Dans ce cas, migrer ne vous apporte presque rien et vous retire l'outil que vos équipes maîtrisent.

Webflow reste un très bon éditeur visuel, et nous le disons après y avoir construit notre propre site pendant des années (notre guide de Webflow le détaille). Une équipe qui lance des pages de campagne, teste des variantes et ajuste ses visuels tous les jours y gagne une autonomie réelle. Un CMS headless ou un agent lui ajouterait une étape. Même verdict si votre site est géré par une agence Webflow qui connaît vos gabarits par cœur : changer de technologie sans changer de mode de travail revient à payer une migration pour retrouver le même fonctionnement.

Notre recommandation est tranchée. Si votre site dépend des comptes utilisateurs ou de l'e-commerce de Webflow, ne le traitez pas comme une migration de site vitrine : c'est une application à reconstruire, avec un vrai projet de développement sur mesure derrière. Et si votre seul motif est le prix de l'hébergement, refaites le calcul en incluant le temps d'édition.

À l'inverse, partez si le site est surtout du contenu, si vous voulez qu'il s'édite par des agents IA, ou si vous en avez assez de payer un abonnement par site, et des sièges dès la deuxième personne, pour corriger une virgule. C'est notre cas, et on ne regrette pas. Pour l'application Tala elle-même, on a mené un chantier d'une autre ampleur, raconté dans la migration de l'application Tala depuis Bubble.

Questions fréquentes

Peut-on exporter un site Webflow gratuitement ?

Le code, non. L'aide officielle de Webflow réserve l'export HTML, CSS et JavaScript aux plans Workspace payants, et les plans Site ne l'incluent pas. Au 14 octobre 2026, le plan Workspace Core destiné aux équipes, qui l'inclut, est par exemple affiché à 19 $ par mois en facturation annuelle. Le contenu des collections s'exporte séparément en CSV depuis le CMS. Pour une migration vers Astro, ces deux exports suffisent, à condition de rapatrier les images avant de fermer le projet.

Le SEO baisse-t-il après une migration de Webflow vers Astro ?

Il n'a guère de raison de baisser si chaque ancienne URL répond à l'identique ou redirige en 301 vers une page qui existe. Les pertes viennent presque toujours de redirections mal ordonnées, de chaînes de redirections, d'une canonical qui pointe vers une URL redirigée ou d'un domaine technique laissé ouvert. Testez toutes les URL de l'ancien sitemap après la bascule, puis soumettez le nouveau sitemap dans Search Console et surveillez les pages en erreur.

Combien de temps prend une migration de Webflow vers Astro ?

Pour un site vitrine avec un blog, comptez en jours plutôt qu'en mois : le site de Tala a été reconstruit en une semaine environ. La durée dépend surtout du nombre de collections, du volume d'images à rapatrier, des formulaires à rebrancher et de la quantité d'anciennes URL à rediriger. Un site avec e-commerce ou espace membre relève d'un autre projet, beaucoup plus long, qu'il faut chiffrer à part.

Faut-il garder son abonnement Webflow après la migration ?

Gardez au moins le projet tant que vos images ne sont pas rapatriées. Webflow indique que les images et fichiers exportés en CSV restent des liens vers le projet d'origine, et qu'ils cassent définitivement si ce projet est supprimé. Une fois toutes les URL réécrites vers votre propre stockage et le domaine basculé, vous pouvez rétrograder ou fermer, en conservant une copie des exports CSV et du code.

Astro peut-il remplacer le CMS de Webflow ?

Oui, de deux façons. Les collections de contenu d'Astro lisent des fichiers JSON ou Markdown rangés dans le dépôt, ce qui convient aux contenus stables et aux sites édités par des développeurs ou des agents IA. Elles peuvent aussi charger les données d'un CMS headless, qui offre une interface de saisie à une équipe non technique. Le choix dépend de qui publie, pas d'Astro.

Votre site Webflow peut-il passer en code sans perdre son SEO ?

On regarde vos URL, vos collections et la façon dont votre équipe édite le site aujourd'hui, puis on vous dit si la migration vers Astro vaut le coup et dans quel ordre la mener.

Planifier un appel
Par
L'équipe Noxcod

Noxcod

On cadre votre produit avant de le construire

Application métier, SaaS, agent IA ou automatisation : on vous aide à choisir la bonne stack, le bon périmètre et les prochaines étapes.

Stack Périmètre Plan d'action