Migrate a site to Webflow·续2

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