Migrate a site to Webflow

Website migrations can be difficult, they can be complex, and there can be a lot of different parts going on. Now, when it comes to migrating websites, the two things I like to think about are: don't hurt discoverability, so like, don't kill your SEO and AEO, and also don't hurt the downstream reporting, the stuff that the marketers and executives are looking at. The actual design and build of the website is kind of the easy part now. So we're going to look at, when I migrate a website, what I'm thinking about and what I'm doing to try to make it a successful migration. Now, we have an example for you today, and I'm excited to get to that. But we're going to tackle it in three phases. We're going to plan our migration, and then we're going to actually build it. And we're going to be using Claude, we're going to be using AI for this. And then phase three, we're going to ship it and QA it. So, ordinant-carbon.com is a fictitious company and brand and website that we created for this example. We see they do carbon reporting software for the enterprise and they have a legacy website, but they want to modernize it and move it into Webflow so that their marketing team can make changes and work collaboratively, because they don't want to work in GitHub and they're just tired of their legacy platform here. And so the website that they have is this really cool design that we have in Figma here. It looks, feels more modern. It's got kind of some fancy artwork that describes what their company does. It just feels more minimal and clean. And yeah, we like it. So we're excited to tackle this build and we see that there's like a, okay, there's Platform here, there's Case studies, there's a case study detail page, and there's an About and Contact page here. And we have some assets already ready to go for us from the designer. So thank you, Brandon Roth, for that. This design is by Brandon Roth, hugely talented designer. And there's also a bit of a style system over here, so things I'm taking a note of and also like, okay, we have designs for these pages and it looks like it maps out roughly equally to the nav. I didn't see a customer stories page in the design request. A Demo goes to About and Contact and, you know, where does this form go? If I just submit this, it goes to a thank you page. I don't have designs for a thank you page. So I don't even know what platform they're using for their CRM. Does this, like, just send an email to somebody? Does it go to HubSpot? We're not sure, but we're going to find all that out and we're going to take care of it. So here we go at the planning phase. Now, one thing I want to show you is if I go to Settings here and I go to Usage, my usage actually just rolled over yesterday, so I've already spent $51 on this thing. But that's okay. What we're going to do is compare our usage and spend before we start to after. So we can see kind of how much you might expect to spend if you were using Claude in this scenario. What I've kind of done for this is I've made these really elaborate prompts so that I'm not wasting your time in Claude and you're not just seeing me type a bunch of typos into Claude. So I'm going to paste a big block of text. Let's go ahead and read this prompt. Using our sitemap, CMS export, list of existing redirects, and Google Analytics plus Search Console data, generate a URL plan for an upcoming website migration. Essentially, what we're trying to do with our URL plan is figure out the scope of our project. What are the URLs or the website addresses that exist on the old website that we now need to have on the new website? We might want to dump some along the way. We might want to combine content from two into one, but we need to figure out exactly what that is, and all of these sources here can help us do that. So let's go ahead and cruise over to ordinant-carbon.com. So what we're going to do is first we're just going to go to the sitemap.xml. A website may or may not have a sitemap.xml. It might be named differently. So just try to figure it out, what you can get. And now in here we see this is just a list of essentially all the live URLs on this site. So this is a great place to start. And I could just copy paste this or I could maybe download it. Let's Save as, and sitemap. And that looks good. Okay, so we saved it. Next we want to get, what was the next thing on our thing here? An export of the CMS. Now, it turns out that the owners of this website have an admin portal. If I go to /admin and then I just put in their password that they've given me and I export the CSV. Now I have a CSV export right here that I can give to Claude. If we look at this, we can see that the website has a bunch of posts. Now these are called case studies. They have a case studies kind of content management system already in place. And looking at this, I can already see like this image URL. This is relative path syntax. And Webflow is going to need a public URL. So I already know if I try to import this directly into Webflow, this would fail. And then rich text is also a place where importing into Webflow can get tripped up a lot, because it's expecting sanitized HTML. And if I look at this, I'm seeing definitely some HTML. If I look closer, I want to see like, look, I can see these square brackets, which is not considered HTML. This is probably some sort of like plugin system that their website uses to maybe inject other components or certain HTML elements within their own rich text system. Cool. So we've seen that. And what we can do is we can have Claude write a script to clean up and sanitize this HTML for us so that it's ready for Webflow rich text. And then we see all this other stuff. These are all basically text fields. So I'm not too worried about any of these. Again, the main thing, we're not quite into our CMS plan yet. The main thing we're more worried about is the URLs. And that would come from the post name likely here, though that's not 100% guaranteed. This is just the CMS export. We can go ahead and look. We have the case studies here and we see the case studies. You know, it's a, it's a list, right? And if we click into one of these, look, there's this weird one too. Like why is there, maybe this is a duplicate or something. And so we can see there is some rich text for each CMS item and it has like some callouts that might have some fancy sort of styling on them or something that we'll have to consider as we migrate this to Webflow. But the big thing we're looking at are these URLs. So it looks like it's ordinant-carbon.com/case-studies/meridian-advisory-partners-case-study. And that's key, because when we set up our CMS schema in Webflow, we'll want to make sure to match that URL structure. Assuming the client hasn't told us that they want to use a new URL structure. I think that is enough on the CMS export piece. So let's get back over into Claude. Now we need a list of existing redirects and this may be, depending on the provider, the hosting, the DNS, all this, it may be in a number of spots. So for this example, I've been given access to the GitHub repository for Ordinant Carbon and actually right in the root of their directory there they have this _redirects file, and this is what's defining the redirects. And we can test it out. So if I go to ordinant-carbon.com/contact, notice it redirects. It essentially takes us to a certain section in the page. It's looking for a section with the ID of contact. So back here we found these four redirects, so we want to account for these. Actually, these are four 301 redirects. So we see one down here. It looks like they have a case study that is draft and not published yet. So there's this other redirect that they have going on. I'm not going to worry about that. I'm going to let Webflow's Draft status handle whether or not something is actually published. So let's just copy those and I'll just paste them down here because I need a place to put them. So those are there. And finally we need our Google Analytics and our Google Search Console data for Claude. So let's go ahead. I am going to go to analytics.google.com and we have the Ordinant Carbon demo here. We see it. Oh, it has some active users, 178 over whatever time period this is. So that's kind of cool. And the report that we want to get, if I go to Reports and then I come down to, let's see, let's see, which one is it? Pages and screens, inside this view, user engagement and retention. So this is kind of telling us like what slugs have what amount of views and traffic and event counts and whatever you might want there. So we see it's had, you know, again, this is an example, but pretty cool. We've got some mock Google Analytics data here for us and I'm just going to press this Share this report button and then Download file and we'll download this as a CSV and I'll just open this just so we can see it. And this is just exactly what I was showing you in the web UI. So we have our views, our active users, views per active user. And Claude is going to use this to get a sense of what pages are important. What do we really not want to mess up, and kind of help us prioritize what pages are important. And this is views specifically. So if somebody lands on that page, boom, count it as a view. Now we also want to know which ones are performing well for discoverability. And for that we're going to get our data from Google Search Console. So let's go over to, boom, the internet here, and we'll go to Google Search Console just like so. Click into this. Let's start now. And unfortunately I can't get a ton of like great Google Search Console data mocked up like I can for Google Analytics. But what we'll go ahead and do is I'll just show you how to export this and then we'll just have Claude make something up. Okay, so for this one we're going to go into indexing of pages in Google Search Console. Very important. If you're doing a website migration, we might make a mental note of this, or not even a mental note. We'd write it down if I had a pen and paper. But how many pages are not indexed and how many are indexed? And you could also drill into like, why are pages not indexed? So it looks like there's pages with a redirect. It's saying there's 22. And from what I'm seeing here, it's like all this, when the URL ends in .html, it's probably redirecting to the slug without .html. It's called like pretty URLs. Or we could see like, how many 404s are there? What's 404ing? Apparently this Kingsley Academic Group reporting. So maybe it was a CMS item that got unpublished. And case study detail, somehow there was a case study detail page published that doesn't exist anymore. So these are the kind of things you will want to make a mental note of, or not even mental, just like store it somewhere so that when we revisit after the migration, we can make sure that we're still indexing the same number of pages and we haven't introduced new problems into the system. Okay, that's enough on that. What we want is that data, that performance data. And to get that, where we will go is instead of in indexing on pages, we're going to go to Performance. And from Performance you probably want to select the last 16 months. We're not going to get a ton of data from that. You look at, it starts at August 18, which is when I made this mock website. But hopefully you can get as much data as you can. And then we're going to go down here to Pages, and you don't actually need to select it, when we export Google Search Console is going to export everything. But I'm just showing you like, okay, this is kind of telling us how many impressions and how many clicks each individual page is getting on Google Search. So if somebody searches like ordinant-carbon.com Aldergate Hotels, then hopefully they, you know, hopefully Google serves up this URL. And we may not know why. Maybe Aldergate Hotels are really popular or they're in the news or something. So we don't know why this one has the most number of impressions, but we just know it does. So we want to make sure that it keeps a lot of impressions. Now it doesn't get any click-through rate, but hey, again, this is an example. Okay, so let's go back up and I'm going to click this big Export button in the top right and we're going to download CSV. Now this gives us a zip file. So if I just click it, it's going to open that zip file and we see that each tab in there is given a CSV, and the one I care about is Pages here. And so we see, this is just exactly what I was showing you in the web UI. Now we have it as a CSV that we can give to Claude. So let's open up my Downloads folder. I want this Pages CSV from Google Search Console. I want this Pages and screens by path from Google Analytics. I want this CMS export, which we identified isn't too crucial here, but we're going to give it to it anyways. And then also the sitemap. And you could have Claude crawl the sitemap itself if you want. But yeah, there we go. Let's go ahead. I've got Opus 5 selected here on high. You could probably get away with Sonnet 5 here. Let's go Sonnet. I'm going to use Opus 5 for the build and Sonnet for my planning. I think, although they say like use Opus for your planning, use the smart models for your planning. So let's go the smart model. And I'm bypassing permissions because I don't want to have to give permission for anything. Okay, we pressed Enter on our big prompt. Let's let it turn for a little bit. Okay, so it looks like Claude has finished up here and I'm seeing this Excel file and a CSV. And just a reminder, we were expecting to get, I think, two CSVs or a CSV with two sheets, but Claude has told me that that's not possible with CSV. So that's why we've got the Excel file here. And there's a number of things to flag and look up. So it's saying two judgment calls and there's some stuff I need to review, but we'll get to that. First, let's take a look at the plan and see if it even is close to our expectation. So I'm going to Open in Finder so that I can double click this thing. Here we go. We've got a big list of URLs and we see we have old URL, new URL, and this is great. Remember we talked about when old URL and new URL will often match but sometimes might not, and those ones are going to get highlighted in red here. So we've got kind of our plan here and I'm liking that. It seems to already be sorted by the Google Analytics views in the last 28 days. So we already have kind of this prioritization list. And if I'm just looking, if there's any other things, it's got the Google Search Console click data right here. It's done a great job and it even assigned different priorities and tells me if there's a redirect required. So this is great, because what I can do later is pull out the redirect requireds, put them in their own sheet and export that. And actually it's done that already for me here in Redirects. So we see old URL, new URL. And yeah, so we're kind of ready to go with our URL plan. So let's go ahead and move on to the CMS plan. Okay, so let's start a new session with Claude and I'm just going to paste this big old prompt. This is my CMS plan. So I'm giving it the references, the documentation that I want it to read. Again, we have these inputs and then we have our outputs that we want. So we want a CSV of sanitized CMS items compatible with import to Webflow. And we want a Webflow schema definition. What is a schema definition? It's just basically outlining how to define your collections or your CMS in Webflow. Cool. So let's, we already have this, we already have this, and let's give it a site ID as well, just to be super sure, because we're going to build our collections here. If I go to Webflow and I create a new project, a blank site, Site settings, so I'm on General and I'm going down to the site ID here. This is a cool place to get site ID. I'm going to reopen the site in Webflow. While I give it the site ID, let's give it a link to these Figma designs. So I'm just going to right click, Copy link to page, back to Claude. Boom, there you go. And we need to give it that CSV. Not that one, not that one, this one. Okay, let's press Enter. Great. So while Claude is working, let's go ahead and kind of recap what's going on here. The main thing that we want to do is we want to make sure, one, will the content that we exported work in our new designs? So if I'm looking at the case study detail page here, I notice that it doesn't actually match what's on the legacy page. So are there like, you know, are there more assets in here that I need to know about, or do I have to ask the client for a bunch more thumbnails? And the second thing is making sure that our CMS is ready for import into Webflow. So that means public URLs to images for images that we need to import. That means sanitized rich text. That means a Webflow schema, well defined and maps perfectly to our CSV that we're going to use for import. You could have AI just kind of MCP its way through. But again, even if you did that, you'd want to build a plan and review it before you did it. So I think this is a good way of showing it. A little bit manual, but also a little bit AI. It's asking me stuff. The designs need 11 fields the export doesn't have. How should I populate them? Yes, this is what I wanted it to ask me. Let's just leave them empty for now. I like, I like that. Where will the 21 images be hosted? I'll give you the host later. Upload to Webflow assets first. I think I would like it to do that, but I'm wondering where it's still going to get the original image URLs, but we'll see what it does. Post ID 1085 appears twice. We saw this already. This was the one with the two in the slug. The first is a stub that ends mid story with no results section. Second is a complete rewrite of the same client. So import the complete one, drop the stub. Only Meridian Advisory Partners is imported. Yes, we can just change the slug manually later if we need to. I want to just consolidate to one here. And the detail page H1 in Figma is outcome led, consolidating energy and supplier data across, blah blah blah blah. But post title is company led. Current schema, let's keep them separate. Claude's back at it, but we have something up here. Workbook, 5 sheets, Webflow schema JSON and sanitized import CSV. The 11 new columns are pale red and deliberately empty pending your call. So let's see this empty stuff that we got going on. So we've got multiple sheets up here. This is kind of header information, these are each sheets, and then this is kind of its problems or what it needs from me. So it already asked me about all this stuff, so we're going to skip that. So here we have the source and new columns. So this should be like what we want to import to Webflow. We have post title, post name, post name. It looks like this is kind of the slug format. So this will get used as a slug as well. Post modified. We have the content here, so it didn't populate the image URL with anything. Actually I'm noticing up here, I should have read the README. I noticed up here that it says this is sanitized. So this would be the one that we want to import. I said this one. But this is just the new columns, and we can see that because this HTML with the square brackets down here is definitely not sanitized. But we do have the new columns, and so card summary, card descriptor, detail headline, result value, result description. So these are talking about this. So result description would be this and result value would be this. And then we have the, we have three text fields for our scope, operational challenge and governance model, and closing image URL. So these already I don't like. And if I go to the Figma, so again, I just want this to be rich text. This is all rich text. And then the closing image URL, we're just going to go ahead and make this static and the same across all of our collection template pages. So Claude is saying like, I need a new image here for every CMS item. But no, that's not what we're doing. Okay, so I'm just going to type in here, I'm going to paste those things and let's say operational challenge, governance model. These are actually just one rich text field called Case Study Body. And then closing image URL can be removed because we will just use the same asset across all template pages for that image in the design. Send. And it should be queued up. I can interrupt it if I want, but it's just queued so that once it's finished with the original prompt based on the responses I gave it here, it's going to go ahead and then do this. All right. Now a question that we get a lot at Webflow University is how to handle images with MCP and the CMS, because images can be difficult to work with, especially when we're importing via CSV. And I mentioned earlier that you want some sort of public absolute URL that's usually like cdn.ordinant-carbon.com, or you know, just something that if you put it into a web browser, it would display the actual image that you're looking for. And we can kind of see that, you know, if I were to really get granular about this, if I go here and I use Inspector, we see that the source right here is just looking at the relative path that I talked about, but we see the source populated here is the absolute path. So now we can see that this is like a URL that we could plug into our spreadsheet and then use the Webflow import tool and it would work. The other problem that you'll come across is that if you still don't have this and say you have like a bunch of images in a folder somewhere, you still need that public URL. And if you don't have like an old website that you're migrating that has those hosted assets, then you need some sort of hosting location for it. And a great place for that is actually just in the Webflow asset panel right here. So I mean, you could just drag an entire folder. Let's, let's do an actual drag. Let's Save image as. And you could just drag that whole image in there. Oh no, I'm going to drag it there. But you'll notice it populates here in our asset folder. And then if you, now we have this option to Open link and we see it's at cdn.prod-website-files.com. And what Webflow has done is it's automatically thrown this into a public bucket somewhere and hosted it for us. Essentially what we can do is we could load all of our assets into the Webflow asset manager here and then get public URLs for them that way. Okay. So we answered some questions that Claude had. We gave it another prompt of fixing what it did wrong. And it says, oh, that simplifies things considerably. That's great. And so it actually says it's uploaded stuff, they're live on the CDN. Let's go ahead, I just want to, I want to check this real quick. Let's refresh, because that would be so cool if we had that sidebar. And then all of a sudden all the assets are there in the asset manager. Wow. So they're rehosted on Webflow for us, so we don't have to worry about possibly the hosting of those images, you know, going away at some point from the legacy website. So good to go there. It's got a public URL that it can then populate in the spreadsheet, assuming it put that in the spreadsheet. All right, so we've got some files here from Claude and you know, it's just giving us a summary of what it did. It did some stuff with the images, it sanitized some of the rich text stuff here. So hopefully it's more ready to go for Webflow. It does say it needs two things for my confirmation. We'll look at that in a sec. But first let's kind of look at this spreadsheet, Open in Finder, and summarize kind of what we did. So we've got this new spreadsheet plan and we have our README here, we have our Webflow import that is now sanitized. It's got empty stuff because it doesn't have any content for that. And that's fine. That's totally fine. It does look like the featured image got updated to the new URL. So I'm pumped about that. Empty stuff, all I'm doing right now is making sure that these are in line with what we originally set out to do. And that was to map our old legacy website content to our new CMS schema in Webflow. So that's what we're trying to accomplish. And I think we're pretty much there looking at this. So we've got some stats here. It's calling it a legacy result stat already, which I quite like, because this doesn't have a place to live in the new design. And what I'll do is I'll just keep those old CMS fields in like a field grouping in Webflow of legacy properties or something. Cool. So I'm quite happy with this sheet. Here's the field map. So this is just another way of looking at the schema. I think it gave it to us in JSON. But what we're looking at here is just kind of the what we're going to expect when we tell Claude to build this in Webflow CMS. It's got slug, it's got the Webflow type. This is kind of the key one here. And what I would expect is that, where was the one that I told it? I told it to get rid of two things and create a body. A case study body is a rich text type. So happy with that. Almost everything else is plain text. Kind of surprised we're not seeing an option field. Actually we are, right here in sector. So that option field is basically a category and I want to see something there, because on the legacy website, you know, we had this thing. Let me show you. We have this thing up here, the sector, and you can filter by that. So I already know that I'm going to need some sort of either multi-reference field, single reference field, or in this case, an option field. So I'm glad to see that. Everything else plain text, pretty easy. Again, we got image, we've got a number for post ID. So good. I would probably make everything not required to start and then make it required later, but that's kind of not important for this lesson. And then we've got some notes if you want to read the notes, and we've got a sanitization log. I'm not going to read this whole thing, but you can if you would like. Actually you can't, because you're not going to get this file. All right, CMS plan is done, and next up is our scripts plan. Now what am I even talking about when I say scripts plan? So let's go to somewhere like nike.com. Almost every website is going to have scripts, especially if you see those cookie consent banners. Then you know they want to track you and their marketers want to market to you more effectively. They want you to buy their stuff. And the way they're doing that is they're buying ads at places like TikTok or Bing or, I don't know, Amazon or Facebook. So we can see all these scripts and trackers are loading on nike.com when I load that website. And now specifically for us, what does that mean? Well, we load Google Analytics on our website. So when I load ordinant-carbon.com, we do see that Google Tag Manager loads, which essentially is gtag.js. This is Google Analytics. This is the Google Analytics script loading on our page. And we want to make sure that that script correctly makes its way from our old website to our new website. And depending on how the marketing team is using Google Analytics, or executives, we want to make sure that we're not breaking any sort of metrics, dashboards and things like that that they may be looking at. So, okay, we're still using Opus because we want the smartest possible clanker that we can get. And here's the prompt, and then we just give it the website and inputs, none. You do it, you do the work, Claude. And then outputs. We're expecting a CSV with two sheets, for the scripts audit and analytics event audit. Okay, Enter. So while that's running, I think a cool thing to show would also be apple.com. And if I open up Inspector and go to Sources, we can see they only have two sources that load, securemetrics.apple.com and apple.com. So way cleaner than nike.com. And this is because their marketing team probably has all of their metrics in one place and it's hosted on their own domain, apple.com. It's using a subdomain, securemetrics. And so they're doing all of their analytics and tracking themselves. So Claude is done here. Let's take a look at what we got. Okay, we've got the Excel file and the mirrored CSVs. As we can expect by now, it's found kind of what we already looked at, which is Google Tag Manager, or GA4 via a direct gtag.js script. It's telling us kind of where it's at. It's got a Cloudflare thing because this is hosted on Cloudflare Pages. Don't worry about that one. And then also it's finding Google Fonts. It says it's verified that GA4 is genuinely firing, but it wants more access because it doesn't know anything about the events that we talked about or how Google Analytics is configured right now. So it's telling us like, you don't have Google Tag Manager configured and the marketing team can't add scripts without a developer. You don't have consent management of any kind. So it's just setting cookies, even though the user might not be asking. It's telling us that the contact form doesn't send anything anywhere. Of course, this is a demo, so I didn't really set that up. And then Cloudflare scripts aren't loaded in your code. That's because Cloudflare is doing the hosting here. So that's all fine, really. The big ones for this lesson are numbers one and two. And then it's saying what it needs for events, because I asked it specifically about events. It wants an export from GA4. It wants to know what the key events are. It wants to know whether enhanced measurement is toggled on or off. Wants to know if we have any products linked, and downstream dependencies. So this is a key one. The Looker Studio dashboards, reports and spreadsheets pulling from this property. So yeah, breaking a report the CFO reads is the most common way these migrations go wrong. I told you, I told you. And then one business question for the owner: same measurement on the new site, or a new property? We'll probably go ahead and keep the ID because this is such a simple one. But you know, if their Google Analytics setup was all whacked up, then we could do a new Google Analytics property. Just depends on what you and your client decide on. Now let's go ahead and look at the Excel file. So going to come in here, Open in Finder. All right, so it's looking at the homepage, it sees Google Tag Manager inline script in the head and it's just kind of telling us about that one. Here's the beacon. This is more the beacon. This is fonts. Here's the contact form, some sort of email decoding thing from Cloudflare. Notable absences. So it's saying, like, I usually see a lot more scripts on a website, and Claude doesn't know that this is just a demo website. So this is really good stuff for like educational purposes. Just take a note of this, like no Drift, no Zendesk. So as a summary with the scripts, the main thing we care about is making sure that our dashboards and our scripts are firing on our new website just as they were on the old website. And also we're taking a chance to maybe clear out old scripts that we don't need, that, you know, somebody on the marketing team is not using anymore, or somebody who used to doesn't work there anymore. And so now nobody knows why it's there. You're going to run into that a ton, I swear. So the next thing to cover would be the forms plan, and the form that we're talking about is the one on this About and Contact page. And the main thing we want to know is what forms exist throughout all of our website. So kind of like when we made the URL plan, we want to know about all the URLs. For the CMS plan, we want to know about all the CMS items. Well, for forms we want to know about all the forms, because you might be reusing the same form in different places, or you might have different forms somewhere else that then need different code loaded or something like that. So that's all to say, like, you need some sort of plan to know, itemize all of the forms for you, you know, where they live and whether or not you're keeping them with the migration or whether you are getting rid of them. Because if we go over to Figma, our migration here is super simple. The About and Contact page also has a form, but chances are, like, there might be a different page that this form lives on after the migration. But your forms are super key, because that is how you're generating leads. So another thing that you don't want to mess up. So with that in mind, let's take a look at what a sample prompt for gathering your forms plan might look like. And so we're just telling it to crawl the sitemap, look at everything and find some forms, and the output that we expect. So let's press Enter there. And while we're waiting for Claude to build the plan for us, let's just talk a little bit about this demo. You know, we have the form here that takes you to the thank you page on the legacy website. And in Webflow we're just going to use native Webflow forms. Chances are your migration is likely connected to some external CRM like HubSpot or Salesforce or something like that. However, for the scope of this really educational material, I didn't want to spend a ton of time showing you how to configure HubSpot or Salesforce and stuff. It's definitely quite complicated and there's a lot of value in learning how to do that and being confident in that for your migration. But for this example, we're just going to show Webflow forms because I want to keep the scope manageable for you to understand more about the processes behind planning and executing a migration. And we've already really seen that with the scripts plan, the CMS plan and the URL plan, and the forms plan is really just an extension of those. And how I kind of showed you what I'm looking for is going to be incredibly similar to the forms plan. Okay, it looks like Claude has finished here. It took some time to crawl the whole site, but that's, I guess, to be expected. And we've got a form inventory. It came up with six rows. I only knew about one form, but I did tell it to find hidden forms, and it found a bunch on the admin page, which makes sense. There's forms there to like, log in and to create and edit items and things like that. So we can actually just like, F2 through F6, we can ignore. And the important one, let's just look at the plan. Browse the project beside your file. Don't need to do that. The main one we care about is this one on the About page. Gives us a ton of information about the form. The main thing we might care about is the purpose, the field counts, what fields exist. And so now we can kind of start to take that opportunity to either consolidate forms, figure out what pages we want to put them on, things like that. But again, for this example, we just have one form. So the next thing I want to do is get into our design system plan. And really that's about like, setting up our Webflow site with the right variables, fonts. We'll get into components and we'll actually start building, which I'm super eager. I'm always like, that's always the first thing I want to do. But I'm usually better served by sitting down for quite a while and working with these plans. Because what you'll start to find out is you'll start to figure out where the, like, the hard parts are going to be. And that's really what you want to find out by doing these plans. So let's go ahead and fire off this prompt while we have a moment. And so we're just telling Claude to create a design system. So we have the luxury here of starting from scratch with our design system. You can tee up Claude for how you want it to build your site, and it's going to be using AI anyway, so it's not going to follow any of your rules. But you know what, we can at least start with optimism and then see where we land, and hopefully we get something that's workable. Right. This is going to use the Webflow MCP. So before I press Enter, I will show you that I have the Webflow Beta MCP connector installed here and I have it set to Always allow. Let's make sure that that's set. And then I also have the Figma connector here. And so what I'm expecting the MCP to do is, basically thought I saw one that was, here we go. I want to set this to Always allow. What I'm expecting it to do is to look at everything in our Figma file and then create kind of that system in Webflow. And that's why I need to give it both the Figma file and the Webflow site. So let's go ahead and grab this link to the page and then we'll go back to Claude here, and I'm just going to put the Figma file down. And over here on Webflow, get that site ID again. Webflow site ID is this. So I'm feeling good about this. Let's press Enter and let it get going. Now I talked about how spending time with these plans can really help you anticipate where you might run into, I guess, speed bumps or difficult times. Perhaps you could also spend quite a bit of time with the Figma file to do the same. So this might be the first time you're working with a particular designer, or you might have worked with this designer a lot. And the things you want to know are like, okay, so did they even give me some sort of style system? What rules and conventions is the designer working from? Because I'm going to want to try to mimic those so that the Webflow and the Figma feel really connected, and that if the designer designs new pages, like they're going to, the systems are going to mesh really well. So that's something I'm thinking about. And so for that I can see their sizing system and their variables here. And when I talk about primitives, primitives just means that, like, 20 pixels, 24 pixels, it's like the raw value, whereas semantics is like, how is the value used? So small would be 12 in this case, or medium is 16. Semantics means like, what is the meaning behind the token? And then coming up here we have our primitive color variables. Notice we don't even have semantic color variables. That's how this designer wants to work. And are those variables now being used in the Figma? So if I come to, you know, maybe this, it's actually just hard-coded a hex value. It's not using any of these variables. So that's something to have in the back of my mind, is if I were building this in Webflow, I might want this to be connected to a variable. Or if I look at this text, let's see, I'm just looking for anything in Figma. When you see these, you know, the names or sometimes for values for stuff, SVGs are likely going to be hard-coded like that. Let's find a good example. Here we go. So on this description text we have typography is linked to semantic body medium, 16 font size, 24 line height. So that's kind of just what I'm looking at as I go through these things. Claude is done and we're just kind of reading through what Claude did. It's creating typography variables, responsive variables. Lots of variables going on here. The token layer is complete and consistent. Never heard the term token layer before, but we got it here. Okay. The good stuff seems to be here at the end. So 178 tokens were created across five token collections. I'm cool with that. It's saying that everything went great. You know, two calls I made: our naming system, Flowkit, cool. And letter spacing is em, not percent. I prefer em letter spacing myself. Anyways, what I am curious is, did it use rems instead of pixel values? Because our Figma design system was in pixels, but I prefer to build in rems for more responsive design. So, needs you before this renders correctly. Rename base collection to primitives. Not going to do that, don't care. Add the three fonts. You should add the fonts. You should add the fonts. I'm going to have it do that while we keep auditing it. Set HTML tag styles against the typography tokens. The MCP only writes classes, not tag selectors. You know, that's something we'll do when we get to the build. And check color contrast. I'm hoping the designer did that. That's not my job.

Claude is hopefully adding the fonts, and you might be asking yourself, like, Keegan, there's stuff going into Webflow. And if we go here, we see Pistachio, we see Goldenrod, we see Mint, Tangerine, we've got our size variables. This feels like building. So I thought we were still planning, but it turns out not all plans are perfect, and we may have kind of inched our way into phase two here already. So congratulations and welcome to phase two. We are building in Webflow now, and our design system plan is pretty much done. Especially because I'm seeing that it's in rem here and not pixels anymore. I say anymore like it did it before, but it's done it to me before, just not right now. Now it's okay for border radius to be in pixels. Some stuff you do still want to be in pixels, especially border width. But yeah, I'm feeling great about this base collection. Those, again, are our primitive variables. And if I go into theme here, it went ahead and made a base and inverse. I don't know why it made an inverse. We definitely don't need that. I don't think there's anything in the design system. So Claude's trying to overachieve on us here and, you know, we'll allow it for now, because we're focusing on the process and what's important. So you see how these, like, these semantic max width narrow are pointing to these other variables. So this is kind of how our design system is being built. And it's up to you at this point to decide, this is how I want to build, or this is not how I want to build. Personally, I'm going to go ahead and move forward with it because I'm just happy with moving forward in this lesson. But let's see if we got the style sheets. Yes, we did. So we have a style sheet here and I'm noticing already the fonts are off, and that's fine. Claude kind of outed itself, like, oh, I don't know what font to use, or you have to do it, but it should be able to do it. And I'm seeing colors. I would expect this text to have gotten updated. So it's a little bit strange that that isn't updated. And I've also noticed that sometimes you have to refresh to get the fonts to load. I assume they're not going to. Oh, they did. Look, they're there. And we can check that in Site settings, that the fonts were correctly uploaded. So if I go to Custom fonts here, I'm seeing the fonts from our project. So cool. We are making good progress here. So feeling good about the planning phase. So Claude is going away here with the fonts. Honestly, the fonts are already fine. I could maybe stop it here, but I'll let it finish its thing up. But really, we are in the build phase now, and since we have MCP, we have a CMS schema that we need, we have a design system created, we have Figma, we have kind of all of the pieces that we need to really just like have at this thing. And nothing's published. So we can really, like, we can make mistakes, we can go, we can prompt as much as we need to. Now, obviously you want to be kind of efficient, but that's hopefully where our plans are going to help us. So let's find our, this is our CMS conversation with Claude, and I wanted to go ahead and build the schema. So I'm just going to say, build the schema in Webflow now. So let's hit Enter. But we've already approved the schema. We're happy with that. Once the schema's in, we can look at getting the items in. And while that's going on, we can also just build out parts of the site. And I did talk about looking at the case study detail page first, but as I'm building, I might start with the homepage because that's where my components are going to go. And I might pull components from there that I'll then use in other pages. And for that I'll probably use this design system chat that I have going here. So once it's done, I would want to tell it something like, let's build the homepage design from Figma in Webflow. Skip assets for now, just use placeholders, and be sure to use our design system variables, exclamation points. Let's go into Figma. And I know this is the page, so I'm just going to copy a link to the selection just to give Claude a head start. I'm just trying to look if there's anything else I need to give it. So I'm expecting, like, I'm not expecting it to bring in this image or this. And the reason I'm not bringing them in is, one, I've created my own custom shader for this because I thought it'd be fun. Number two, I find it often exports at the wrong size. And despite, you know, whatever skill you give it and what you tell it, it's really easy for Claude to go off the rails when it comes to assets. And this one as well, I want to import these as SVG and have more control over these. So I'm going to do those separately as well. So the build is going to be static first, placeholders only. And then depending on the scale, I might then give it instructions on just doing assets, or I might just do that myself manually. So let's go back here. Be sure to use design system variables, placeholders. I think I've told it everything I want, so I'm going to press Enter now. All right. And of course that's queued up. It's not going to happen until this whole fonts thing is done. Not sure why it's taking so long here, but I'm just realizing that I should stop. Let's just paste that link in there and click Enter. And now it knows where to start from with the Figma design. It should be able to pick all this stuff up and get going. Oh, looks like it's got something going on here in the CMS. What is it doing? Uh oh, oh, oh, we're seeing problems. MCP Bridge is failing on array arguments. Same calls that worked earlier now reject. I'm trying not to use the MCP Bridge here. I'd like to build as much of this headlessly as I can before I have to have the tab open and foregrounded with the Bridge app open. And the MCP tool has been re-engineered around not using that for pretty much everything except the snapshot tool. So we might have to yell at Claude a little bit here. So let's go here, go to Connectors, Webflow, and Refresh tool list. Tool list refreshed. Maybe it's okay. Let's say, I reconnected the Webflow MCP. Just create the collection schema in Webflow for case studies. Okay, so that's working now, hopefully. That works. We can check in on our designs. This is probably going to take a little bit, so I might take a moment to refill my drink here and we'll come back and see where Claude is at. So for whatever reason, the Webflow MCP has been having difficulty with Claude, and I can tell by these red kind of lines here. It's getting good errors, that it's expecting an array but it's receiving a string, and it ended up ditching the MCP for the CLI. And my computer already has the CLI installed. And what is the CLI, you might ask? Well, it's command line interface, and that's anything, if I'm in like a terminal writing webflow, I'll just do --help here. And so CLI is another tool that AI can use to do stuff, essentially. And Webflow has all sorts of stuff. You can have it, it has auth, it has a CMS command, it has DevLink, it has Cloud, it has assets, it has sites. So the Webflow MCP works with the Webflow API to do things in Webflow headlessly, but it can also happen via the CLI. Now the main thing to know about the CLI is, one, you need to have it installed. So if I just search Webflow CLI, you can see here, this is how you would install it. You open up a terminal and drop this command in there, and then this documentation will have some just guidance for you on how you might want to use it. But at the end of the day, you can just have your AI use it for you. And so Claude was kind of smart. It was like, I can't figure MCP out, so I'm just going to go to CLI. And if I really didn't have CLI installed, or I was maybe like not so sure that I want to use CLI, I could also troubleshoot MCP. I could, you know, disconnect and reconnect, try the whole on/off trick. What else could I try? I could feed it specifically the documentation of the API that I want it to use. So the tools via MCP are going to kind of reference these things. So I'm going to the docs here, the Data API. I want the reference, and then I want to go to the CMS collections. And so what we're trying to get the AI to do is basically create a collection. So we're trying to get it to call this endpoint, and then this is the API endpoint to do that. And then it's also trying to create fields for that collection ID. So behind the scenes, this is what we want the AI to do. I don't really care how it does it, I just want it to get it done. And it looks like it had to get creative and use the CLI. So lots of different ways to do that. The other thing you might do is honestly just open up a new Claude conversation and give it the context of the CMS plan that we already generated and say, all right, make this, but definitely use MCP this time. So rather than troubleshoot MCP here, I'm happy that we have this stuff in Webflow, and we can verify that it's there by just going to our CMS here in Webflow. Click Case studies and we press this gear icon, and we see we've got our schema created in Webflow here for us. So the next step would really be to start populating the collection with the values from our plan. So that's a little summary. We got off track a little bit because we had to use CLI instead of MCP. But if you weren't reading anything from Claude anyway, you wouldn't care. You would just care about the end result, which is that we have the case studies collection made here in the proper way, according to our sheet. Okay, so now that we have the collection schema made, the next step is honestly to start adding items to the CMS. And I could show you any way of doing that. We have the spreadsheet set up so that we could use the import feature in Webflow. I think I'm going to prefer to use Claude here. I'm just going to tell it, start populating items. We could start with one item. You know, if you have a thousand items to do, just start with a handful, just so you can kind of do like, you know, a dry run and see where you hit snags, rather than just Claude looping over and over and getting stuck in places. So let's start by adding one CMS item. Use the first from our spreadsheet, and then once we've confirmed that that's good to go, then I'll go ahead and do the rest of them. So I'm watching Claude work here, and it's already saying three required fields are empty. I think I had mentioned when we were reviewing the plan that, like, when I start, I usually like to just make nothing required, because that gives us the most flexibility to edit those fields as we need to. And then once I'm kind of like really integrated with connecting the CMS up to the front end or the design in Webflow, that's when I might start marking stuff as required so that when the marketers get it, that they don't, you know, empty, like, submit empty stuff. But again, it's just, we're still just building at this phase, so it doesn't matter if stuff is incomplete. All right, so it is also saying that the item is created, giving me the item ID. Everything landed correctly, it says. Let's see, one change I should know about. The create failed first with, card summary field is required. To add the row without inventing copy, I flipped them to optional. Nice. That's a schema change you didn't explicitly ask for. I judged it better than fabricating marketing copy into your CMS, but say the word and I'll revert it. For now, yes, it's better. But eventually I'm going to want you to fabricate marketing copy as well. Staged, not live. Webflow holds CMS writes until a site is published, and I haven't published anything. Seven fields are empty. So let's check what's going on. So I'm going to go ahead and refresh here. So we've got our item here. We see it's queued to publish. Let's see here. So there's no summary, there's no descriptor. A lot of this stuff is empty, and that's okay for now. We do have these, the body. I'm just noticing that a lot of stuff isn't populated, and that's, it wasn't populated in the spreadsheet because it's those missing fields from the design that we had originally noticed. But the sector is populated with the option field, so I'm happy about that. All the SEO and taxonomy stuff is good, but none of the actual real content that we need is here. So, but we have the name, we have the summary. The summary can get generated from the case study body if we need, as well as the descriptor. I think this is like, yeah, this is something special. So yeah, we'll get to these as we start hooking stuff up. But for now, it looks like, you know, the schema and the items are going into this. The schema is there and the items are going into the schema without any major red flags, other than those required fields that we already handled. So let's go ahead and import the rest of the stuff. Import the rest of the items. So I'm watching this run. It's creating all of the CMS items for us. It looks like in its audit it noticed that one of the bodies of one of the items shrank by 25 characters. So it's diffing it, or it's comparing the old one to the new one, and it looks like it's stripped a blockquote wrapper on one of them. It's just here as plain text. It was Crest Point or something. So I'm just going to search Crest Point, go in here, and you see that the blockquote has this kind of fancy markdown. And what I'm expecting in Webflow is for this to have some sort of blockquote. Probably this one right here. This would be the blockquote notation. See that little kind of sidebar shows up there. But I'm going to undo that because I want the AI to really handle it and figure it out. So now at this point I can like just really make a run on fixing and massaging and auditing the CMS to make sure that the content that's here matches what I expect from here on the legacy site. So while that's going, I feel pretty confident about where our CMS is at. I want to check in on our homepage build. And what I like to do is just set up Webflow on one side of my screen or another screen entirely, and then have Figma, and just do a rough kind of visual eyeball of, you know, how are things looking so far? And I can tell you right now it's not great, unfortunately. What's good is we do have kind of the beginnings of a good system here. I can see that, like, rem is being used. I can see that, you know, stuff is zeroing out that I would zero out. I can see that variables are being connected in places where I would expect variables to be connected. I can see that, like, MCP hasn't gone off the rails with connecting up custom properties and things like that. That can sometimes happen. But what I am noticing is a lot of design inconsistencies, and that's around like, the button has full kind of border radius here, whereas if I look in the Figma design, you know, ours have a different border radius assigned to them. The button border radius is one. The spacing rhythm between the heading and the first visual, there's less spacing there and there should be, like, it should be full bleed with divider lines. The nav, these list items and links should be over on the right side here, so right justified. The little dot kind of design accent that we have is a dot and not a square as it is in the designs. If I come down, it's using the accent color, which, let's double check what color I think it's using. Oh, this one's hard-coded, but I don't think that matches the actual accent color. So a number of things that are not one-to-one, and we need to tell Claude to do better. So I'm going to try that. Complete a full redesign of the homepage, but make it one-to-one with the Figma design. And something else I'm noticing is that we're quite high in our context window. Honestly, I have kind of a personal rule of thumb with the 1 million size context window, that like, once I get over 300k I start to notice a lot of degradation in the model. So the other thing I'm going to do is just cut this, start a new chat, do that, and then we're going to do the same thing where we grab our Copy link to selection and paste it there. And then we'll go over here and we need our Webflow site ID, but I don't want to go into the site settings again. So I'll just get that from one of these other chats. Let's see, let's see. Yeah, we got it. We got it. And we'll put it there. Go. All right. So we've given up on Opus trying to do our first build. We said, your context window is too big and your design was too inconsistent, so you get one more chance. And I do have my fingers crossed that this one's going to be better. I've had a lot of luck with this in the past, so let's keep those fingers crossed is all I'm saying. But while we do that, we can check on the CMS exports and it looks like this is done. So I'm just going to see if it had anything important to say. And remember, last we were using this it was like, all this stuff about the blockquote. So it looks like there was kind of this nested p tag inside of blockquotes. Webflow's canonical rich text blockquote holds inline content directly, so blockquote with a nested p gets unwrapped. Let me fix the markup and re-push all 20. Now the real test. Okay, so honestly we can just check this by looking at the CMS ourselves. So we remember that the first one didn't correctly do it, and now it is doing it. And I think, was it Crest Point was the other one? So, and it does have it. So we're starting to feel more confident that these blockquotes are being handled well now. And that's the whole point of using Claude Code here, is that Claude Code can write its own deterministic scripts, grab everything in our CMS, apply it to all of them, fix it all, and re-push it out. So feeling good about the CMS. I think our CMS is really done at this point and it's ready to be hooked into the front end. But we need a front end to do that, and right now we still don't have a front end. So let's see. Claude has a question for me. The 13 existing homepage sections diverge structurally from Figma, not just cosmetically. How should I handle them? Yes, recommended, that was what, replace the sections but keep the design system. That's what I want. Designer Bridge is not currently connected. Build with it or headless? Headless, then Bridge for QA. Let's do that, that's what I prefer. Fixing button radius from pill to 6 pixels changes buttons site wide, including style sheet and case study pages. Yes, fix it globally. Boy, Claude really wants some reassurance here. But I can understand, because I like the reassurance too when I'm doing these things. But while this is working, some other thing you might consider is, rather than going directly from Figma to Webflow, you might take a look at what skills are out there for porting your designs from Figma into Webflow. There's some resources you can find on Webflow University around that, or on Webflow.com. Additionally, something I sometimes have done with great success is building in HTML first, because agents work really well with just kind of plain HTML and CSS. I'll take a Figma design, build it out in HTML, that's really quick, and then take that HTML file and send that into Webflow, and that's really quick. So you have this intermediate layer of HTML, but because agents work so well with it, it can actually kind of improve the speed and the iteration of your getting your first design done, so that once your system is locked in place in Webflow, you can just start building a lot faster from there. And we're talking so much about speed and, like, everything's so fast now and I can do it all for you. And we did talk about how upfront having a plan will really help, and we kind of did that pretty quickly. In reality, this is going to take a little while. So I think the thing to note, though, is that previously this might have taken a team months to accomplish, but in the last year or two, you're really finding that smaller amounts of people can go ahead and migrate an entire site in weeks instead of months, or even less than that. That's what we're seeing, at least at Webflow. And so that's really exciting because one person can do a lot more now, but at the same time, it also leaves a lot of responsibility on one person. So we're waiting on Claude again. Actually, the biggest pitfall for me is people focusing on the actual build and the physical artifact, as opposed to the planning and kind of all this stuff behind the scenes, like the scripts and the events and all this stuff that has to be part of the migration. When you think of a website, you think of the front end. It's that people see a beautiful design and they're like, wow, this is awesome, we love it and we want to implement it right away. But there's not a lot of thought of, where does this thing actually exist? Has anybody gotten the content for these new fields that we need? So it's not just the website that's messy, it's the stuff that goes alongside with the website. So that's what I think it's like. There's a lot of baggage on a website that comes along when you're doing a migration, and you have that opportunity to really clean up that baggage, but it requires a lot of planning up front. All right, so Claude has finished up with the homepage, and I'm pretty pleased with where it got after I asked it to do a little bit better. We can see it even went ahead and did the assets here, because I didn't quite tell it not to do that since we started a new conversation. But I'm just liking, like, the typography, the spacing rhythm, the, you know, this little dot guy over here, this color is correct. So I'm just seeing a lot of things have been corrected, and so I'm starting to feel a lot better about this build. And it just took two prompts, one to get it started and two to say, hey, you're going in the wrong direction and you really need to make it better. So yeah, I'm just looking at the homepage and things are feeling really good. And what I would do now is, you know, I have this fun idea for a shader that I can import for these kind of the glowy heat field maps that we have. I can definitely bring in the asset that belongs down here on my own. I'm ready to start tying in our CMS to this. So, you know, next I would tell it like, hey, instead of case grid, now use a CMS collection and populate that with our dynamic data that lives in our CMS. At that point, I'm also going to tell it, you know, start making components out of things that I see us reusing on other pages, or even ask it to go and look at the other pages and say, what would make sense to use this components here, so that we can have reusable chunks of our website to use across new pages, other pages, what have you. So that is the homepage. Great job, Claude. I think now it makes sense to transition to our finished webpage, because, you know, honestly, all you're going to see me is just doing more prompting, telling Claude, hey, build this, build that. And it probably just a couple hours, less than a day, I would think, to really build out all of the pages that we need. One thing I do want to show is like, how much Claude usage have we actually used? So if I do open Claude and I go to my Settings and I come up to Usage, I'm at $190.86. So I think we started at what, 51 or something? So for about 140 bucks, we've migrated most of our website. It's not done yet, but we have done, like, I think that's a pretty fair price for the amount of work that we've done. So I spent some more time prompting, and here's our finished site. So you can see here we've got components built, we've got our code component that's doing this cool shader, we've got our icons imported as SVGs. I'm just like, I'm really liking our design system in use. I'm liking that we have some layouts built out as components, we've got card components. And I'm just scrolling here to give you a short tour of what we've been able to build with MCP in less than a day. And if I come to Pages here, we see we have all of our pages built. We have this component library that surfaces all the different components used across our site so that, you know, we can see like, oh, if we need to build a new page, if we have some reusable stuff that we can use. We have our style sheet that's all done. So we go in here and we can see the design style guide is all completed. And we also have our Platform page that is existing right here. We have our About page, this is here. And on the About page we do have our team, and we have a full form here that is going through Webflow forms. And lastly we will just take a look at the case studies page. We have our case studies grid. Couple CMS items still haven't been populated, but that's pretty easy to clean up at the end of things. And then of course we have that case studies template page. So up here we see the headline and we see, like, we have measurable result, 40%, doesn't make sense, but we're just make believe right now. We have deployment scope filled out for each different collection item. So open up another one here and just check at that. And so yeah, we're doing pretty good. The rich text could use some more styling here. And then also just notice we have a case studies categories template. So when I built this out, we actually had a case studies categories CMS. Talked about how you could use an option field or a single reference. So in this case, when we go and look at the industry, it's actually built out as a reference field. So I talked about this at the beginning. We do have some subtle differences between the final build and our working build, but overall the intention is the same, and we just want to show the process. So that completes phase two, building our actual website.

Now we'll get into phase three, which is shipping and QA. Now for this, I'm going to go into our site settings. And I will also plug right now, on Webflow University, let's go there, we have this resources section, and there's an SEO checklist, design system checklist, and pre-launch checklist. So this has a ton of the things that you're going to want to check before launching your site. I'm not going to go through all of them, but you can even like, download the MD file and have Claude walk you through each step. Okay, so we're in our site settings and I want to go to Plans. I want to make sure that I have a plan. In this case, we need the Webflow Premium plan, which we've already purchased. And that's so that we can connect a custom domain. We're also going to go to our Publishing. In Publishing, we want to maybe just set what our staging domain will be. And then I also want to go over to SEO and I want to make sure that my staging indexing is turned off. This is to make sure that Google won't index our staging domain, and so then we could have issues with like, our staging domain showing up on Google search results. We definitely don't want that. We also have to check in on our Google Analytics. So remember, that's part of our scripts plan. We want to migrate all these scripts, and for this we're just going to simply drop the Google Analytics code into the head tag here. So I'll go back to Google Analytics, click on Admin. I think I go to Data streams. Yes, click on this one. And if we go to, there should be like, View tag instructions. So we're going to click there. We want to Install manually. And here we go, we have our script tag. So we grab that, we go back to the head code and we just paste that there, and we save that. So now Google Analytics is going to continue on as soon as we cut over. So that's convenient. And then what else do we need to do? We need to go back to SEO because we need to make sure that we upload our redirects. So let's go ahead and do that. If I go down, here we go, we have our 301 redirect section, and it needs this CSV file with old path and redirect to path. So let's go ahead and grab our plan. Okay, so we've got our redirects plan here and we do see old URL, new URL, and they also have old path and new path. So let's delete selected columns, let's just delete everything that we don't need, and then what we will, is we just wouldn't save this, but we can export to CSV again and we'll save, call it redirects 2. Okay, back in Chrome. Import, Import CSV. Let's try again. Redirects 2, redirects table CSV. Yes, it has a header. Confirm. And oh, it's successful. Look at all these redirects that we've got in here now. So when I'm looking at these redirects, you know, I remember that there was a lot of the .html being redirected to kind of the pretty slug. There was a couple case studies where case study was dropped from the slug. So that's important redirect to have. We also had the customer stories getting redirected to the case studies. So we would want to find, we find that one here, and then we'd also want to check that each individual customer story, actually, there wouldn't be an old path for old individual customer stories because they were just all on that single page. Honestly, if this were like a real migration, I'd probably go through the spreadsheet one by one, each line item, and like, manually tick off like, Keegan verified, this is a good redirect, because your redirects are really important. But I think for the case here, we're just like, assuming that when we did our plan, I already did that. So this is good. We're getting our redirects in there and we're going to go off and make sure it's all done. And then also when I publish, I might just test that one of these things redirects correctly to make sure that those redirects loaded. All right, open the site in Webflow and then publish to staging, the full site. All right, so we're published at staging now and we can go here. If I click Free assessment, it does go to the form down here. If I went to one of our redirects, so /contact, it should go to /about#contact. So I'm verifying that our redirects got in. I'm verifying that I set up IDs and page sections correctly. So let's get back on task. We have our staging domain live. We have gone into our site settings and looked at things. I think we're pretty good with everything set up. So why don't we go ahead? You know, this is our opportunity to like, set a website password or make staging private if we want to do those sorts of things. Just really kind of checking ourselves and feeling good, setting up our form so that it's emailing the right person when a form is submitted and goes to the right place, or maybe also any webhooks that we need. Just so many things to think about. But we're going to push on. And what I want to do is I want to cut over the DNS. Now, Ordinant Carbon is ready to go live with its new website. So let's go ahead and do that. I'm going to head to Publishing here, and what I want to do now is for production, I want to add a custom domain. So let's go ahead and Quick connect a domain. All right, we're spinning, and it is ordinant-carbon.com. And what this tool is going to do is it's going to look up, where is ordinant-carbon.com coming from? And it has identified that it is in Cloudflare. So now we're in Cloudflare and it's telling us that we need to change our DNS records in order for this to be hosted and served from Webflow. So we're seeing that an A record, which is also called the apex record, and it's just ordinant-carbon.com without the www, and it was pointing to, or it wants to point to this 198.202.2.11, that is Webflow essentially, or Webflow's hosting. And then the CNAME, or the www, wants to go to cdn.webflow.com. And this TXT is a verification for essentially that Webflow tool to verify that we are indeed the owner of this DNS or domain name. And then it's going to go ahead and delete these ones that were pointing to our deployment via Cloudflare Pages. A quick note before we press the big blue Authorize button here is to look at the big red text above the CNAMEs that are getting deleted. So once you select Authorize, Cloudflare is telling us it will remove the DNS records from the zone, which may result in downtime. Hint, hint, it will result in downtime. This process is necessary to avoid conflicts with the records needed for Entri. And now Entri is kind of the wizard tool that we use at Webflow to do your DNS migration for you. And, you know, if you don't mind a couple minutes of downtime, you can go ahead and press Authorize right here and be done with it and call it a day. However, if downtime is really something that you can't afford, then you're going to want to set this up manually. And I'd also recommend checking out the Webflow help article on Cloudflare orange to orange. So you'll do a little bit more configuration to make sure that you never have any downtime. But for us, we're just going to go ahead and authorize this, and I'm going to type this into Confirm. So authorize and delete those other ones. So this is the part where you maybe get a little bit nervous and hope that nothing has broken, because it doesn't happen right away. You got to wait a minute. And so it does say that our custom domain is added. We didn't get any errors, so that always feels good. And we go down to production here and we notice that there's this SSL certificate. It says not started. That should start kicking off. But we also need to verify the domain. And just clicking this button, just make sure that that one time verification that we loaded up into Cloudflare there, essentially it's just like checking that that's there. And if it is, then it knows that we do indeed own that domain. And so yes, now right here we're seeing that these are connected and the SSL certificate is in progress. So it says typically ready within five minutes, but you may need to wait just a little bit here. So we can see that the SSL certificate is active on both the apex domain and the www CNAME. We've set the www CNAME to be the default. Can see up here in this little info box that it's best practice to use the www version. And then also we should set our canonical as the www version too. So that is, where is that? I think that's in SEO. We go down here. And what I want to do is set the canonical. So that's https://www.ordinant-carbon.com. I think it's no trailing slash. It says we're automatically removing it. It really matters that you get it super right here, so probably better to just copy paste it from somewhere, but we can also just do it like that. So we saved that, and now we should be ready up here on the big blue Publish button to publish to staging as well as our custom domain. So let's hit Publish. All right, so we are published. If I click this arrow and I go to ordinant-carbon.com, we have migrated our website. And now we're going to go into a sprint of QA and make sure that anything, like, looking for the big blaring alarm signals of, is anything broken? And kind of the easiest way to do this is to just start clicking around, you know, click your links, look for any broken links. I'm going to do it kind of manually. Case studies, everything's clicking. Okay. I'm seeing stuff, you know, obviously I might make little notes of styling changes, but those are just notes. I don't care about that as much as, are the big buttons working? Is all the big stuff working? I'm going to a form. Can I submit a form, request an assessment? What happens, you know, that gets submitted? Oh, was that supposed to go to the thank you page? Because remember we had that thank you page viewed. So these are the things that hopefully your plan caught and accounted for before you just started hooking things up and trying to get to the end of a video like I did. But in this case, we're pretty happy with where we're at, and we did do a lot of work in a short amount of time to show off all of the work required in a website migration. So also at this point I would open up Google Analytics, but you can even just verify that it's loading on your site by refreshing. I can see Google Tag Manager, we've got the right gtag with the ID there. So we know now that Google Analytics is loading. And you could go into Google Analytics and also just kind of go to your, I'd go to like, Realtime. What is it? Reports, I think, Realtime overview. And we have some active users. You know, just checking that we have active users in the last five minutes is a great little check to make sure things are working as you might expect. And then at this point, once you kind of feel good of like, okay, I didn't break anything major when we cut over the DNS, you would start looking at, you know, maybe setting up some sort of alert system to look at Google Search Console, you know, in particular this page indexing. Are we going to check this daily? How often are we going to check this? Are we going to go back and submit our new sitemap? You know, probably that's what I'd want to do is just resubmit our new sitemap, oops, which Webflow should publish for us automatically. But I might need to actually specify. That looks like we do have it. So I would just copy that, go back to Google Search Console, submit a new sitemap. This is essentially telling Google, hey, we want you to recrawl our page because we've updated a lot of content and some of our URL structures. So it's going to start recrawling and getting an understanding of what's different about our website. And that's also when we're going to start to see any changes in traffic start to happen and all those things. So keeping an eye on performance is very crucial. And then of course keeping an eye on your forms, if those are submitting in the right places, downstream metrics, all that kind of thing. You might also want to make sure that you have properly cleaned up your old website. Maybe there is a staging domain associated with that that needs to be cleaned up and made sure that it's not live anymore. And so to kind of conclude here, we finished migrating our website into Webflow, and let's take a moment to recap. We started by creating a really concrete plan, and our plan was all about getting as much kind of data as we could and defining the project scope and bouncing that off analytics so that we could have a really strong prioritization of how we were going to tackle this migration. Once we had that in place, we went ahead and built the thing. We saw that it was pretty easy to use AI to just start getting things on the page and then yell at AI again and again until we got it to where we wanted. And again, it just didn't take very long, which was cool. And then lastly, we went into the ship and QA. We want to cut over that DNS and make sure that our live site is down for the least amount of time. We have a lot of tools at our disposal to do that. It was as simple as just kind of telling Claude like, okay, go. We've got a new website on Webflow. It looks great and we're really pumped about it. I'll be honest, it feels like there's never been a better time to re-architect your website. And in a tool like Webflow, where your whole team can collaborate and build better, it's just such a great opportunity and time to migrate your website, eliminate these years of accumulated tech debt, and really clean up things like your forms, your scripts, and make your website work for you. So hopefully this video helped you do that. Can't wait to see what you build next.