Webflow naar Astro: zo migreer je een Webflow-site zonder content, design of rankings te verliezen

Het korte antwoord

Bij Webflow vertrekken is makkelijker dan bij Framer, dat helemaal geen HTML-export heeft, maar de export brengt je maar een deel van de weg. Met een betaald Workspace-abonnement kun je de HTML, CSS, JavaScript en afbeeldingen van je site exporteren en overal hosten. Het helpcenter van Webflow is net zo duidelijk over wat er achterblijft: CMS-content, formulierverwerking, zoeken op de site, wachtwoordbeveiliging, gelokaliseerde pagina's en code components zitten niet in de export, en Collection lists tonen hun lege staat (Webflow Help).

Overstappen van Webflow naar Astro is dus deels exporteren, deels opnieuw bouwen. Je exporteert wat Webflow je geeft, haalt het CMS eruit als CSV of via de API, bouwt elke template opnieuw als Astro-componenten, vervangt formulieren en zoekfunctie, maakt de interacties opnieuw die je wilt houden en geeft elke URL die verandert een permanente redirect. Werk je in die volgorde, dan behoudt de nieuwe site zijn design, zijn content en zijn rankings.

Waarom teams van Webflow naar Astro overstappen

Webflow is een sterke visuele builder, en veel marketingteams doen er goed aan erop te blijven. De redenen om te vertrekken gaan meestal over eigendom en kosten, niet over design:

• De site komt in handen van developers. Als ontwikkelaars de meeste wijzigingen doen, werk je sneller in een codebase in je eigen repository dan op een visueel canvas, en die codebase kan naast je product, je backend en je tests staan.
• Abonnementskosten per site. Op de prijspagina van Webflow, geraadpleegd op 13 oktober 2026, kost het Basic-siteabonnement USD 15 per maand en Premium, het abonnement met het Webflow CMS, USD 25 per maand, allebei bij jaarlijkse facturering. Lokalisatie is een add-on vanaf USD 9 per maand.
• Functies die een echte backend nodig hebben: formulieren die naar je CRM schrijven, afgeschermde content, zoeken over meer dan één site of alles wat op je eigen infrastructuur moet draaien.
• Met exporteren alleen ben je er nog niet. Voor code-export heb je een betaald Workspace-abonnement nodig, niet alleen een siteabonnement, en het CMS blijft achter. Een nette exit vraagt hoe dan ook om planning.

Publiceert je marketingteam elke week visueel pagina's en doet de site wat hij moet doen, dan is bij Webflow blijven een redelijke keuze. Een migratie moet iets concreets opleveren.

Wat de code-export van Webflow wel en niet bevat

Bron: het helpartikel van Webflow over het exporteren van sitecode.

Wat we zagen bij gepubliceerde Webflow-sites

Op 13 oktober 2026 downloadden we de homepages van zeven sites die met Webflow zijn gebouwd, waaronder webflow.com zelf, en bekeken we wat een migratie zou moeten meenemen:

• Alle zeven laden jQuery en hun afbeeldingen vanaf de servers van Webflow. De afbeeldingen komen van cdn.prod.website-files.com, en het helpcenter van Webflow vermeldt zelf dat afbeeldings- en bestandsvelden in een CSV-export links zijn naar de hosting van het oorspronkelijke project, en dat die links breken als dat project wordt verwijderd (Webflow Help). Elk asset moet je dus downloaden en opnieuw hosten.
• Alle zeven serveren ook hun deelafbeelding voor sociale media vanaf Webflow. De Open Graph-afbeelding vergeet je makkelijk, en linkvoorbeelden op LinkedIn of WhatsApp verliezen hun afbeelding zodra het oude project wordt gesloten.
• Alle zeven renderen hun CMS-lijsten direct in de gepubliceerde HTML, tussen 3 en 19 Collection lists per homepage. Dat is goed nieuws: anders dan een Framer-site, die volgens onze gids van Framer naar Astro na het laden door een runtime wordt opgebouwd, is een gepubliceerde Webflow-pagina een volledige referentie voor welke content waar staat, ook al laat de code-export die lijsten leeg.
• Vijf van de zeven gebruiken Webflow Interactions, herkenbaar aan data-w-id-attributen op tot 109 elementen van één homepage. Elke interactie is een stukje gedrag dat je opnieuw moet maken, of een besluit om het te schrappen.

Van Webflow naar Astro, stap voor stap

1. Inventariseer elke URL. Webflow genereert automatisch /sitemap.xml als die optie aanstaat (Webflow Help). Voeg elke Collection-pagina toe, haal het rapport Pagina's uit Google Search Console op voor de langst beschikbare periode en exporteer je bestaande 301-redirects als CSV via Site settings, Publishing (Webflow Help).
2. Exporteer de content. Exporteer elke CMS-collectie vanuit het CMS-paneel naar CSV, één keer per taal als je Localize gebruikt, en bewaar de kolom Item ID. De CSV maakt alles plat: referentievelden worden platte tekst, multi-referenties door komma's gescheiden tekst en rich text wordt HTML. Voor alles met referenties geeft de Webflow Data API de items met hun velden en talen terug, wat meestal netter is dan losse CSV-bestanden weer aan elkaar knopen.
3. Download elk asset. Afbeeldingen, pdf's, fonts die je volgens je licentie zelf mag hosten, de Open Graph-afbeeldingen en de favicon. Sluit het Webflow-project pas als de nieuwe site nergens meer naar website-files.com verwijst.
4. Exporteer de code als referentie. Heb je een betaald Workspace-abonnement, exporteer dan de HTML en CSS. Zet die export niet live als nieuwe site: dan neem je webflow.js, jQuery en lege CMS-lijsten mee. Gebruik hem om exacte witruimtes, breakpoints en de classstructuur af te lezen.
5. Modelleer de content in Astro. Maak van elke collectie een content collection in Astro of een model in een headless CMS, waarin referenties referenties blijven. Bouw daarna elke template opnieuw als Astro-componenten en verhuis de afbeeldingen naar astro:assets.
6. Maak de interacties opnieuw die betekenis dragen. De meeste Webflow Interactions worden CSS-transitions, keyframes of een paar regels JavaScript. Voor zwaardere animaties is GSAP gratis voor commercieel gebruik sinds Webflow het in april 2025 gratis maakte (Webflow). Respecteer hoe dan ook prefers-reduced-motion.
7. Vervang formulieren, zoekfunctie en beveiligde pagina's. Geef elk formulier een echt endpoint (een Cloudflare Worker, een formulierdienst of je CRM), voeg een statische zoekindex zoals Pagefind toe als de site een zoekfunctie nodig heeft en verhuis wachtwoordbeveiliging naar je host of je app.
8. Bouw gelokaliseerde pagina's goed opnieuw op. Alleen de hoofdtaal zit in de code-export, dus bouw elke taal met de i18n-routing van Astro, met één URL per taal en hreflang ertussen.
9. Neem het URL-formaat over. Webflow serveert pagina's zonder slash aan het eind en redirect /pricing/ naar /pricing. Stel trailingSlash en build.format in Astro zo in dat de nieuwe site dezelfde adressen oplevert (configuratiereferentie van Astro); elk verschil is een redirect die je niet nodig had.
10. Redirect op de server, lanceer en blijf opletten. Een statische Astro-build zonder adapter maakt van geconfigureerde redirects meta-refresh-pagina's, dus stel 1:1 301-redirects in waar de site gehost wordt, bijvoorbeeld in een _redirects-bestand van Cloudflare. Zet de DNS om, houd het Webflow-project aan tot de nieuwe site is gecontroleerd en volg de indexeringsrapporten van Search Console de weken erna. Onze SEO-checklist voor website-migratie behandelt de lanceerdag en de 90 dagen erna.

Wat er verandert na de overstap

SEO behouden

De richtlijnen van Google voor siteverhuizingen met URL-wijzigingen gelden hier ook: koppel elke oude URL aan het meest vergelijkbare nieuwe adres, gebruik permanente serverside redirects en houd ze minstens een jaar aan. Blijven de URL's identiek, wat bij Webflow met een zorgvuldige herbouw vaak lukt, dan hoef je vooral te controleren of titels, beschrijvingen, canonical-tags, gestructureerde data en Open Graph-afbeeldingen zijn meegekomen.

De valkuilen die specifiek zijn voor Webflow, zijn de restjes: een Open Graph-afbeelding of pdf die nog vanaf website-files.com wordt geserveerd, een staging-adres op webflow.io dat nog geïndexeerd is, of een CMS-pagina waarvan de slug bij de verhuizing is veranderd. Controleer alle drie voordat je het Webflow-project sluit.

Zo pakt Dardo een Webflow-migratie aan

We voeren Webflow-verhuizingen uit als onderdeel van onze dienst websitemigratie: een inventarisatie van URL's en content, de export van het CMS, eerst één representatieve pagina die opnieuw wordt gebouwd en op afgesproken breedtes wordt beoordeeld, en daarna de rest van de templates, formulieren en redirects. De bouw zelf is webontwikkeling in Astro, en het bewegingswerk valt onder creative development. Deze site, dardo.studio, draait op Astro op Cloudflare Workers met de content in een headless CMS, en we schrijven en publiceren deze blog via dat CMS.

Overweeg je een overstap? Stuur ons de site en wat je wilt veranderen. We vertellen je of weggaan bij Webflow de moeite waard is voordat we er een offerte voor maken.