Pourquoi migrer de Webflow vers Sanity ?
Quelles sont les vraies limites de Webflow ?
Webflow est excellent pour créer un site beau et fonctionnel sans coder. Mais son système de gestion de contenu (le CMS) a des contraintes qui deviennent vite bloquantes quand ton projet grandit.
La première limite, c'est le plafond de 10 000 éléments par collection. Si tu gères un catalogue produit qui grossit, un blog actif depuis plusieurs années, ou une base de ressources, tu peux t'y heurter plus vite que prévu.
La deuxième, c'est l'impossibilité d'afficher le même contenu sur plusieurs canaux. Ton site Webflow et ton application mobile ne peuvent pas partager la même source de vérité. Tu te retrouves à dupliquer le contenu, avec tous les risques de désynchronisation que ça implique.
La troisième limite, c'est la rigidité des champs. Webflow propose une liste de types de champs prédéfinis. Si tu as besoin d'un champ qui n'existe pas dans cette liste: par exemple un champ "ingrédients" avec des sous-champs, ou une structure de données très spécifique à ton métier: tu es bloqué.
Enfin, il y a la dépendance totale à l'hébergeur. Ton contenu est chez Webflow, sur leurs serveurs, dans leur format. Si tu veux partir un jour, l'extraction n'est pas triviale.
Qu'est-ce que Sanity change concrètement ?
Sanity, c'est comme séparer ta cuisine de ta salle à manger. La cuisine (ton contenu : articles, produits, auteurs, images), c'est Sanity qui la gère. La salle à manger (ce que voient tes visiteurs : le design, la mise en page, l'expérience), c'est ton site ou ton application qui s'en charge.
Concrètement, ça veut dire que le même contenu peut être servi à ton site web, à ton application mobile, à ta newsletter, et à un partenaire qui veut intégrer tes données: sans jamais dupliquer quoi que ce soit.
Les avantages concrets sont réels :
- Multi-canal sans effort : tu écris une fois, tu publies partout.
- Collaboration éditoriale : plusieurs personnes peuvent travailler en même temps dans le Studio Sanity, avec des workflows de validation si besoin.
- Contenu exportable : tes données t'appartiennent, dans un format ouvert, récupérable à tout moment.
- Pas de dépendance : si tu veux changer d'outil dans deux ans, tu pars avec tout ton contenu.
- Structure sur mesure : tu modélises exactement les champs dont tu as besoin, sans compromis.
Pourquoi utiliser Claude Code plutôt qu'un outil comme MigrateKit ?
Ce qu'il faut préparer avant de commencer
De quoi as-tu besoin pour démarrer ?
Voici la liste complète de ce qu'il te faut avant de lancer quoi que ce soit :
- Un compte Webflow avec accès API: disponible sur tous les plans Webflow, y compris le plan gratuit. Tu trouveras l'accès dans les paramètres de ton compte.
- Un compte Sanity: gratuit, à créer sur sanity.io. Le plan gratuit est largement suffisant pour une migration.
- Claude Code installé: c'est un outil qui s'installe comme une application sur ton ordinateur, depuis le terminal. Anthropic fournit les instructions pas à pas dans sa documentation.
- Environ 4 à 8 heures de disponibilité pour un site simple. Pas forcément d'un bloc: tu peux faire ça en plusieurs sessions.
Pourquoi faire l'inventaire de ton contenu Webflow d'abord ?
Avant de déménager, tu fais le tour de tes affaires pour savoir ce qui part, ce qui reste et ce qui se jette. C'est exactement la même logique ici.
Prendre 30 minutes pour cartographier ton contenu Webflow avant de commencer te fera gagner des heures plus tard. Concrètement, il s'agit de lister tes collections (blog, équipe, produits, témoignages…), de noter les types de champs pour chacune (texte simple, texte formaté, image, date, lien vers une autre collection) et d'identifier les relations entre collections : par exemple, un article qui pointe vers un auteur, qui lui-même pointe vers une catégorie.
Ce travail de cartographie te permettra de briefer Claude Code efficacement, et de valider que rien n'a été oublié à la fin de la migration.
Comment briefer Claude Code pour qu'il comprenne ton projet ?
Claude Code fonctionne avec un fichier de contexte qu'on appelle CLAUDE.md. Pense à ce fichier comme l'email de contexte que tu envoies à un freelance avant qu'il commence une mission : tu lui expliques qui tu es, ce que tu veux faire, et les contraintes importantes.
Ce fichier, tu le crées toi-même en texte simple. Tu y écris, par exemple : le nom de ton projet, la liste de tes collections Webflow et leurs champs principaux, ce que tu veux obtenir dans Sanity et les points d'attention (un champ personnalisé important, des images à absolument conserver, des slugs à ne pas modifier pour préserver ton SEO).
Plus ton brief est précis, plus Claude Code sera efficace. Il lira ce fichier au démarrage de chaque session et s'en servira comme boussole pour toutes ses actions.
Les 6 étapes de migration
Étape 1: Exporter ton contenu depuis Webflow
Webflow propose une interface pour accéder à tes données de façon sécurisée, qu'on appelle une API.
Pour que Claude Code puisse accéder à ces données, tu dois lui fournir ta clé API Webflow. Une clé API, c'est un mot de passe d'accès en lecture seule : elle permet de lire ton contenu, mais pas de le modifier. Tu la génères en quelques clics dans les paramètres de ton compte Webflow.
Une fois que tu lui donnes cette clé, Claude Code fait tout le reste : il écrit le programme qui va chercher tes données, gère la pagination (si tu as 500 articles, il les récupère par lots de 100 pour ne pas surcharger le système), et crée un dossier sur ton ordinateur avec un fichier par collection.
Étape 2: Préparer la structure dans Sanity
Avant de coller tes données dans Sanity, tu dois lui expliquer comment elles sont organisées.
Dans Sanity, cette structure s'appelle un schéma. Claude Code s'en charge automatiquement : il lit les fichiers que tu viens d'exporter depuis Webflow, comprend comment tes données sont structurées et génère les "colonnes" Sanity correspondantes : une pour le titre, une pour la date, une pour l'image principale, une pour le lien vers l'auteur, etc.
Ton rôle à cette étape : valider que les colonnes générées correspondent bien à ce que tu veux. C'est le moment de signaler si un champ a été mal interprété ou si tu veux en renommer un.
Étape 3: Convertir le contenu riche (texte formaté et images dans le texte)
Le texte formaté de Webflow (gras, italique, liens, images insérées dans le texte, tableaux) est stocké dans un format que Sanity ne comprend pas directement.
Sanity utilise son propre format pour le texte riche, appelé Portable Text. Ce format est plus flexible et pensé pour fonctionner sur plusieurs canaux à la fois: site web, app mobile, newsletter: sans que la mise en forme soit perdue.
Claude Code convertit automatiquement le HTML de Webflow vers ce format Sanity. Il gère les cas courants sans problème : titres, paragraphes, listes, liens, images dans le texte, tableaux simples.
Ce que tu surveilles à cette étape : les contenus très personnalisés. Si tu as des composants Webflow sur mesure, des embeds complexes ou des mises en page inhabituelles, il faudra les vérifier manuellement après la conversion.
Étape 4: Migrer les images et fichiers
Tes images sont actuellement hébergées sur les serveurs de Webflow. Si tu quittes Webflow, ces adresses peuvent cesser de fonctionner et toutes tes images disparaissent avec elles.
Tu as deux options :
Pour la plupart des projets, l'option B est recommandée si tu veux vraiment couper le cordon avec Webflow. Claude Code écrit le programme qui télécharge chaque image depuis Webflow et la re-uploade dans Sanity, en gérant les erreurs et les doublons au passage.
Étape 5: Importer les données dans Sanity
L'ordre d'import est crucial, et c'est une erreur que beaucoup font au premier essai. C'est comme en comptabilité : tu crées d'abord les fiches clients avant d'enregistrer leurs commandes. Si tu fais l'inverse, les commandes n'ont pas de client à référencer et tout part en erreur.
L'ordre concret pour un blog, par exemple : auteurs en premier, puis catégories, puis articles. Les articles pointent vers des auteurs et des catégories. Ces derniers doivent donc exister avant que les articles arrivent.
Claude Code gère cet ordre automatiquement. Il importe par lots pour éviter de surcharger les serveurs Sanity et affiche une progression en temps réel dans ton terminal : "47 auteurs importés", "12 catégories importées", "234 articles importés".
Ton rôle : surveiller ces chiffres et vérifier qu'ils correspondent à ce que tu avais dans Webflow. Si tu avais 47 auteurs dans Webflow et que Sanity en affiche 46, il faut trouver lequel a été perdu.
Étape 6: Vérifier que tout est bien passé
Ne coupe pas Webflow avant d'avoir validé chaque point de cette checklist. C'est la règle d'or.
- Le nombre de documents dans Sanity correspond exactement au nombre d'items dans Webflow
- Les références sont résolues : un article pointe bien vers son auteur, une fiche produit vers sa catégorie
- Les images s'affichent correctement (teste sur plusieurs contenus)
- Les slugs sont préservés (les adresses de tes pages n'ont pas changé)
- Le Studio Sanity est accessible à toute ton équipe éditoriale
- Un échantillon de contenus complexes (texte riche, images dans le texte) a été vérifié manuellement
Claude Code peut générer un rapport de vérification automatique qui compare ce qui était dans Webflow et ce qui est arrivé dans Sanity. Utilise-le comme point de départ, mais ne remplace pas la vérification humaine sur un échantillon de contenus.
Les erreurs fréquentes et comment les éviter
