--- title: "Webflow naar Astro: zo migreer je een Webflow-site — Dardo" description: "Webflow naar Astro migreren: de code-export mist CMS-content, formulieren en talen. Wat je exporteert, wat je opnieuw bouwt en hoe je je SEO behoudt." url: "https://dardo.studio/nl/blog/webflow-naar-astro/" language: "nl" translations: {"en":"https://dardo.studio/en/blog/webflow-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-webflow-a-astro/","fr":"https://dardo.studio/fr/blog/migrer-webflow-vers-astro/","de":"https://dardo.studio/de/blog/webflow-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-webflow-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-webflow-para-astro/","sv":"https://dardo.studio/sv/blogg/migrera-webflow-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-webflow-do-astro/","uk":"https://dardo.studio/uk/blog/webflow-to-astro/","ru":"https://dardo.studio/ru/blog/webflow-to-astro/","ar":"https://dardo.studio/ar/blog/webflow-to-astro/","hi":"https://dardo.studio/hi/blog/webflow-to-astro/","th":"https://dardo.studio/th/blog/webflow-to-astro/","ja":"https://dardo.studio/ja/blog/webflow-to-astro/","ko":"https://dardo.studio/ko/blog/webflow-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/webflow-to-astro/","zh-Hant":"https://dardo.studio/zh-Hant/blog/webflow-to-astro/"} updated: "2026-10-13T02:20:10.625Z" --- [Blog](https://dardo.studio/nl/blog/) # Webflow naar Astro: zo migreer je een Webflow-site zonder content, design of rankings te verliezen Webflow naar Astro migreren: de code-export laat het CMS, formulieren, zoeken en talen achter. Wat je meeneemt, wat je herbouwt en hoe je rankings behoudt. Door [Nicolás Cerón](https://dardo.studio/nl/studio/) ·12 oktober 2026 ![Een oude stenen schutsluis bij nacht, met open houten sluisdeuren terwijl een kleine karmozijnrode boot uit een snelstromend kanaal een rustige haven in glijdt, met een verlichte sterrenwacht op de heuvel erboven.](https://dardo.studio/_astro/01M4SGD5R7TZ48H2M3RJ9DSK7D_Z2nrI.webp) ## Belangrijkste punten - Webflow exporteert met betaalde Workspace-abonnementen HTML, CSS, JavaScript en afbeeldingen, maar geen CMS-content, formulierverwerking, zoekfunctie, wachtwoordbeveiliging of secundaire talen. - Exporteer elke CMS-collectie naar CSV, één keer per taal, of lees ze uit via de Webflow Data API, en download elke afbeelding: geëxporteerde afbeeldingsvelden verwijzen nog naar de hosting van Webflow. - Gebruik de code-export als referentie, niet als nieuwe site: hij bevat de JavaScript van Webflow, jQuery en lege Collection lists. - Webflow serveert URL's zonder slash aan het eind; stel trailingSlash en build.format in Astro daarop af en voeg 1:1 serverside 301-redirects toe voor alles wat verandert. - Controleer voordat je het Webflow-project sluit dat geen afbeelding, pdf of Open Graph-afbeelding nog vanaf website-files.com wordt geserveerd. ## 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](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code)). 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](https://webflow.com/pricing), 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 | Onderdeel van de site | In de code-export? | Wat je in Astro doet | | ----------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- | | Statische pagina's | Ja, als .html-bestanden, alleen in de hoofdtaal | Opnieuw bouwen als Astro-pagina's en -componenten | | Stijlen | Ja: de CSS van je site, webflow.css en normalize.css | Als referentie gebruiken; alleen de CSS houden die je nodig hebt | | Interacties en componenten | Ja, via de JavaScript-bestanden van Webflow | Opnieuw maken met CSS of een klein script | | Afbeeldingen in het Assets-paneel | Ja | Optimaliseren met astro:assets | | CMS-items en Collection lists | Nee; lijsten tonen hun lege staat | Exporteren naar CSV of uitlezen via de API | | Formulierinzendingen | Geen verwerking | Elk formulier naar je eigen endpoint laten wijzen | | Zoeken op de site | Nee | Een statische zoekindex of een zoekdienst toevoegen | | Wachtwoordbeveiliging | Nee | Pagina's beveiligen bij je host of in je app | | Secundaire talen | Nee; alleen de hoofdtaal | Opnieuw bouwen met de i18n-routing van Astro | | E-commerce, gebruikersaccounts, code components | Nee | Elk onderdeel als apart project plannen | Bron: het helpartikel van Webflow over [het exporteren van sitecode](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code). ## 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](https://help.webflow.com/hc/en-us/articles/33961290794771-How-do-I-import-content-into-the-Webflow-CMS)). 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](https://dardo.studio/nl/blog/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](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow)). 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](https://help.webflow.com/hc/en-us/articles/33961211526291-Import-export-301-redirects)). 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](https://developers.webflow.com/data/reference/cms/collection-items) 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](https://docs.astro.build/en/guides/content-collections/) 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](https://docs.astro.build/en/guides/images/). 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](https://webflow.com/blog/gsap-becomes-free)). 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](https://pagefind.app/) 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](https://docs.astro.build/en/guides/internationalization/), 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](https://docs.astro.build/en/reference/configuration-reference/)); 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](https://dardo.studio/nl/blog/website-migratie-seo-checklist/) behandelt de lanceerdag en de 90 dagen erna. ## Wat er verandert na de overstap | Onderdeel | Op Webflow | Op Astro | | ----------- | --------------------------------------------- | --------------------------------------------------------- | | Bewerken | Visuele Designer en de CMS-editor van Webflow | CMS-velden of code, afhankelijk van wat je kiest | | Hosting | Hosting van Webflow, per site gefactureerd | Elke statische host of elk edgeplatform, zoals Cloudflare | | CMS | Webflow Collections | Content collections of een headless CMS | | Formulieren | Formulierafhandeling van Webflow | Je eigen endpoint en gegevensopslag | | Zoeken | Zoekfunctie van Webflow (Premium) | Een statische index of een zoekdienst | | Lokalisatie | Add-on Webflow Localize | i18n-routing van Astro, één URL per taal | | Beweging | Webflow Interactions en GSAP | CSS en JavaScript die van jou zijn en die je kunt meten | ## SEO behouden De richtlijnen van Google voor [siteverhuizingen met URL-wijzigingen](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) 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](https://dardo.studio/nl/diensten/website-migratie/): 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](https://dardo.studio/nl/diensten/webontwikkeling/) in Astro, en het bewegingswerk valt onder [creative development](https://dardo.studio/nl/diensten/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](https://dardo.studio/nl/contact/?service=website-migration). We vertellen je of weggaan bij Webflow de moeite waard is voordat we er een offerte voor maken. ## Veelgestelde vragen **Kan ik mijn Webflow-site exporteren naar HTML?** Ja, met een betaald Workspace-abonnement: Webflow exporteert HTML, CSS, JavaScript en afbeeldingen, en je kunt die overal hosten zonder naamsvermelding. Een siteabonnement alleen bevat geen code-export, en de export laat CMS-content, formulierverwerking, zoeken op de site, wachtwoordbeveiliging en secundaire talen achter. **Bevat de code-export van Webflow de CMS-content?** Nee. Collection lists tonen hun lege staat en Collection-pagina's verliezen de content die aan hun velden gekoppeld is. Exporteer elke collectie vanuit het CMS-paneel naar CSV, of lees ze uit via de Webflow Data API, die velden en talen bij elkaar houdt. **Verlies ik mijn Google-posities als ik van Webflow naar Astro overstap?** Niet als elke URL die verkeer oplevert blijft werken. Houd dezelfde paden aan, inclusief het formaat van Webflow zonder slash aan het eind, voeg permanente 301-redirects toe voor alles wat verandert, neem titels, beschrijvingen en gestructureerde data over en houd Search Console na de lancering een paar weken in de gaten. **Werken Webflow-interacties in Astro?** Niet zoals ze zijn. Ze draaien op de JavaScript van Webflow, dus elke interactie die je houdt, bouw je opnieuw met CSS of een klein script. Voor zwaardere animaties is GSAP sinds april 2025 gratis voor commercieel gebruik. **Wat gebeurt er met Webflow-formulieren na de migratie?** Geëxporteerde formulieren versturen nergens naartoe, omdat Webflow inzendingen op zijn eigen hosting verwerkt. Laat elk formulier naar je eigen endpoint wijzen, zoals een Cloudflare Worker, een formulierdienst of je CRM, test de aflevering voor de lancering en exporteer eerdere inzendingen apart uit Webflow. **Kan mijn team de site na het vertrek bij Webflow nog zonder code bewerken?** Ja, als de Astro-site een headless CMS gebruikt. Redacteuren werken in een webinterface en de site wordt opnieuw opgebouwd vanuit die content. Zo werkt dardo.studio ook. ## Bronnen & meer lezen Bronnen achter deze pagina, met meer details van de oorspronkelijke uitgevers. - [Webflow Help: hoe exporteer ik de code van mijn Webflow-site? (in het Engels)](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code) · help.webflow.com - [Webflow Help: CMS-content importeren en exporteren (in het Engels)](https://help.webflow.com/hc/en-us/articles/33961290794771-How-do-I-import-content-into-the-Webflow-CMS) · help.webflow.com - [Webflow Help: 301-redirects importeren en exporteren (in het Engels)](https://help.webflow.com/hc/en-us/articles/33961211526291-Import-export-301-redirects) · help.webflow.com - [Webflow Help: een sitemap maken in Webflow (in het Engels)](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow) · help.webflow.com - [Prijzen van Webflow](https://webflow.com/pricing) · webflow.com - [Webflow Data API: items van een collectie opvragen (in het Engels)](https://developers.webflow.com/data/reference/cms/collection-items) · developers.webflow.com - [Webflow: GSAP wordt 100% gratis (in het Engels)](https://webflow.com/blog/gsap-becomes-free) · webflow.com - [Astro-documentatie: content collections](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build - [Astro-documentatie: afbeeldingen](https://docs.astro.build/en/guides/images/) · docs.astro.build - [Astro-documentatie: i18n-routing](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build - [Astro-documentatie: configuratiereferentie](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build - [Pagefind: statisch zoeken (in het Engels)](https://pagefind.app/) · pagefind.app - [Google Search Central: siteverhuizingen met URL-wijzigingen](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com [Nicolás Cerón](https://dardo.studio/nl/studio/) Nicolás Cerón is de oprichter van Dardo, een studio voor branding, webdesign en webontwikkeling in Bogotá, Colombia. ## Gerelateerde artikelen - [**Framer naar Astro: zo verhuis je een Framer-site zonder design of rankings te verliezen**Framer heeft geen HTML-export, dus overstappen naar Astro is opnieuw bouwen. Wat je eerst vastlegt, wat breekt en hoe je design, URL's en rankings behoudt.](https://dardo.studio/nl/blog/framer-naar-astro/) - [**SEO-checklist voor website-migratie: wissel van platform of domein zonder je rankings te verliezen**Rankings dalen zelden door het nieuwe platform, maar doordat URL's die verkeer opleverden niet meer reageren. Een checklist van URL-inventaris tot dag 90.](https://dardo.studio/nl/blog/website-migratie-seo-checklist/) - [**WordPress naar Astro: zo migreer je een WordPress-site, headless of volledig, zonder je rankings te verliezen**WordPress naar Astro: twee routes, wat je exporteert, hoe je Yoast-titels, permalinks en uploads behoudt en welke URL's de meeste migraties vergeten.](https://dardo.studio/nl/blog/wordpress-naar-astro/) - [**WordPress of een maatwerk website? Zo kies je, en wanneer elke optie loont**Wanneer WordPress de juiste keuze is, wanneer een website op maat loont en wat headless WordPress biedt, vergeleken op kosten, snelheid, updates en eigendom.](https://dardo.studio/nl/blog/wordpress-of-maatwerk-website/) ## Blijf ontdekken. - [Dienst · **Website migreren zonder SEO-verlies**](https://dardo.studio/nl/diensten/website-migratie/) - [Jouw project · **Start een gesprek**](https://dardo.studio/nl/contact/)