Migrating a Blog from Managed to Self-Hosted on Cloudflare Workers

Okay, I think I see something, but it has the wrong title and the wrong description. So, let me just quickly change it. Yeah. Okay. So, M I'm going to share the link with you and we have three minutes. We're already live. So, can just start. [snorts] I just want you the link. All right. Hi everyone. Good afternoon or good morning, good evening from wherever you're joining us from. I'm really excited to to be doing this stream today. With me, I have the guest. But before we get into the intro, just um to introduce myself, I'm Gift Euenu. I am a developer advocate on the Cloudflare um team. And with me here, Maddie, would you like to introduce yourself? Hey everyone, my name is Maddi and I'm a technical writer in the product content experience team. Cool. Thanks Marty. Thanks for also coming on um with me. So today the goal of this show as you can see from the title is that we are going to be migrating Marty's blog from a managed content system over to Cloudflare. And the goal is I'll let Marty talk about why she's actually doing this, but the goal is to show that uh you can, you know, move over to Cloudflare and throughout the stream because we're also going to be doing the process on stream. You see that it basically takes you less of an effort and because Cloudflare has a generous free tier, you don't have to pay for anything. So you're also moving and you get most of the the primitives and the products we have for free. So M why are you interested in migrating because you already have a blog and it's serving you right? So why why do you want to migrate over to Cloudflare aside from the fact that you work at Cloudflare, right? Yes, absolutely. So uh the main reason is because at the moment uh my blog is hosted on Squarespace and uh Squarespace is charging me uh every month. Um so I at the moment I'm spending just under £10 which is like €10 or €11 and by migrating it with um to Cloudflare uh I will just be able to um you know just stop paying the subscription to Squarespace. So that's my main reason to be fair. Yeah. And in addition to that, I also feel like because you're self-hosting this, you have freedom um over the content and over the platform as well because one day Squarespace, something happens to Squarespace and that's it, right? But you own your own content and it's very important to own your space on the internet. I'm a firm believer of that. All right. So, correct. Yes. Uh we're going to go through couple of steps. Um, Maddie, if you don't mind, please share your screen. And maybe the first thing we should do is actually show the blog we're trying to migrate. So, if you go to your your current blog and we can work through that. Are you able to see? Yes, I can. I can see. Interesting. Okay. So, this is Marti's current blog. It's tech withmi.com. And I believe you are currently using the hash nodes um custom blog and you're hosting it on. Yes. Okay. Cool. So, the goal is to take this as it is and move it over to Cloudflare. And we've gone over some steps already before this this stream, but we're going to be using Astro for this. And the reason why I chose Astro um is because for me, first Astro is one of my favorite frameworks. And second, it's perfect for anything that has to do with content. And the blog in itself is a content powerhouse. we are basically working with markdown files and it's going to be pretty easy to to to to make that switch. So that's one of the reasons why we are using um Astro. So I think the next step will be to get started with the project, right? What do you think Maddie? Okay, so let's switch over to your terminal. By the way, Maddie will be driving the the process of this migration. And the goal is to get her to see how easy as a non-technical or non-developer to see how easy it is to do this migration. And of course, I'm going to be driving. So, I'm going to be showing her what to do. And yeah, we'll just go over the steps and hopefully at the end of the stream, we have a deployed version of our blog. So the first step are you able to see my terminal? Yes. If you don't mind um increasing the or just making it maximize it and then increasing the font so it's visible and then to increase you can just do control plus a couple of times. Yeah. Okay. So this is good. Um so we'll start with a fresh uh terminal just control C so to clear this or clear any any of those commands should work. Yeah. Clear. All right. So the first thing we'll do is to because we're in a different project want to go out of this directory and go back to your home. And then we'll do MPX create Cloudflare to initialize a new Astro project. So MPX create Cloudflare. Uh you can use at latest. So at latest. Yeah. So this is the create Cloudflare CLI that allows you to bootstrap a new project on Cloudflare. And with this you can press yes. With this, you have options of different templates that you can use for your project. What would you like to name your application? I'm guessing Tech with Maddi, right? Yes. One word. Yeah. So, we're going to be using the Astro block template. So, go we'll pick the framework starter and then we'll pick Astro. So within the Astro templates on Cloudflare, I think you have four different options. So you'll be asked to choose if you're going to be using the basic starter project or the blog or maybe you're creating docs like our Cloudflare docs that you currently use is built with Starlite. And I'm sure you're familiar with some of this because you already work with the codebase. Um but we'll choose the block template. So yes, we want it to be a G repository. And while that is running, we also have gone ahead to export all of Maddi's content from her previous blog and we have that in a GitHub repo. Um do you have the repo handy to show? Okay. Please can you show that while this is installing? Yeah. So we had to do this to make the process easy for migrating the content over to her new to her new blog. So right now the content lives in this blog post directory on GitHub and I am guessing we have over 124 blog posts and you've been writing for I checked the oldest post you have is from what four five years ago? Yeah. So, it's it's it's great that you have like a backup of um everything you've written, like you're not losing it to the platform that you were um using before. So, we're going to use this as the basis for the content for your new site. So, good that we have this. Let's check on our um installation and see if that's done. Okay. So I think we said yes or no. So press enter for this. Do I say yes? Yes. Yes. And then no. We don't want to deploy it yet. So no. Great. So now our application is ready. So we just CD into the directory and open it in VS Code. um VS code. So just do code full stop code and full space full stop. Yeah. Oh, I don't think you have this set up. So just go to VS Code and open it. Yeah, works. Okay. Maybe you want to restart it. Yeah. So we we know where the directory lives. So we can open it, right? So I'll just walk you through the the files within this directory and show you what we'll be changing. So we have the public folder or first of all we have VS code. This is essentially config files for VS code. Um node modules is for every package you install in your project you have a copy of that within the node modules. So, I'm trying to explain it in a very like in in a way that you would understand because I know you don't write code off like every time, right? It's fine. Um, but where we are going to be doing most of the work is in the source directory and if you open the content folder, this you would see you have similar files like you have in your GitHub repos. So this is a sample markdown post that this template ships with. But we don't need this. So we'll be we'll be replacing this with your contents. But before we do that, can you open the terminal on VS Code? You can do that. So we can run this um locally and see what we have. It's not. It's not open. You can do command command and comma at the same time. See if it opens. Um, no. No, that's that's a different shortcut. How do I open my terminal? Command J. Try command J. Yes. Okay. Um, yeah. What we want to do is run mpm rundev and so we can see this running locally and see what we have. You can come and click the link so it opens in a new tab. Uh, no, no. If you press Okay. Or anyone. Yeah. Great. So, this is what we currently have and this is what ships with the Astro blog template. It's essentially has everything you would need for a blog. It has the homepage which is index. We It has the blog um page. Can you go to the blog page? So, we see this some of the contents um here on the nav. Yeah. So, these are some of the content that comes with the templates. Of course, we're not going to be using this. So, we'll be we'll be um migrating Maddi's content and replacing that with what we currently have here. And finally, there's also an about page. We'll keep that just in case you need to have an about page because I know your current one doesn't have one. So in case you want to, you can keep this. We can keep this page and use that for this for that. So um let's go back to our code now that we know what we plan to do. So the first step is to actually migrate the content that we have on GitHub and move it here. So if you if you you I know you've previously cloned the repo cuz I asked you. So can you open that on another um VS Code um instance? So you can just do that. Yeah, there's a new window. Yes, a new window should work. And I think you called it blog post the name of the directory. Yes, that one. Great. Um Oh, yeah. So, we tried to already do this before the stream, but I'll explain what we did. So the post we got from the manage content platform she was using had all the markdown files with random um strings like you see here right but ideally if you're going to be moving over to Astro because with Astro every um markdown file becomes the slog of your blog post. So it wouldn't look nice if we use these strings as the actual file names. So we decided to migrate that by using open code to to prompt this current directory of of files that we have. We asked it to use the actual can you open one of the blog post just one of them. So the blog post currently has metadata including the title, the the description and a few other things. So we asked it to use that as the name of the the markdown file instead. So we've done that out um outside of the stream. But as I see here, I feel like not everything was um correctly migrated. So, can I see one of Can you open one of the the strings? The one without an actual name. Yeah, that one. Um, okay. I think the reason is because it doesn't have a front matter. So, if you scroll to the the beginning of the page, it doesn't have a title. It doesn't have a slug. It doesn't have a So, I feel like that's why it wasn't created. But if you would like for us to do it, I I think there is an easy fix to this. So yeah. Okay. So here, open your terminal on this um instance. Yeah. So we're going to use open code for some of the manual work in this stream. Why? Because basically it helps us be more productive and it makes us faster, right? So um let's do that. So let's try open code. I usually prefer using it in a bigger a bigger um terminal. Uh but I think this should work. So we want to I I'll let you I'll let you do the prompting. Tell tell it to migrate the rest of the the markdown file with strings to use the to use the title or to use the first the first heading in the blog post as a title. Yeah. So, that should hopefully fix the rest of the blog post that is missing a title. Another thing that I feel like we would need to fix, as I can already see here on line five, if you can maximize this a little bit so it's um the the window I mean yeah on line five we can see that this is one of the images in the blog post and the image is hosted on hashnotes CDN. Now, if we're migrating Maddie over to Cloudflare and we deploy her blocked on Cloudflare and something happens, I mean, this URL will work, but up until a time when it doesn't work and then every image on our on our blog will be broken. So, we want to fix this by downloading all the images and having it leave in the directory itself. So I think what we can do is because we can run different instances of open code at the same time. I would prefer if you use your terminal for this task so that we [snorts] have like two or three terminals open at the same time. Yeah. So to open a new tab I think not. Yeah that's it. So we can open open code. Great. Now we can uh this will be interesting. Okay. So now we can tell it to find every image in your oh this is the wrong directory but it's fine. We can do it this way. We can tell it to find all the image hosted with hash node CDN on you have to reference the directory because we are now in the new blog blog project that you created. So you have to reference the the the blog post directory. And to do that, I feel like there's an easy way to do this on open code. Um, can you do slash? Just slash. No. Uh, okay. You know what? It's easier if we copy the directory and just let let him know that. Why can't you just migrate this blog to GitHub pages? Oh, we have questions in the chat. I mean, we can, but I mean, Cloudfare is also great for this and it's easier, right? Um, sorry. Let's keep doing what we're doing. If you go to the previous project where we were, I just need to copy the the the name of the Okay, it's just called blog post. So we can just tell it to find the name of dire blog post right we can just say find all the images on a hash node in the blog post directory and download them okay yeah okay I'll help you find this download. Let me start by explaining. Okay, that's good. Um, let's check on the other. The other one is in this VS code. No, the other one. Okay, now it's a lot of tabs. Yes, this one. Okay, it's still Okay, we have just two more files to go as you can see in the in the editor. So once that's done, I would want us to copy over every file we have here over to our new um Tech with Maddi directory. Yeah, I think there's a few more. There's a few more. Oh, let me see. Okay, not a lot. Okay, while we're here, let's see what's going on in chat. I use Cloudflare pages. Much better. Definitely you can either deploy on pages or workers. I feel like we're going to be using Cloudflare workers for this um specific blog. Yeah. Either way, it's on Cloudflare. And I feel like the benefits with um Cloudflare workers is you you can also if you want to have all your projects in one file. For example, if you decide to add anything that um is dynamic, you can easily write a Cloudflare worker script within your Astro um project and everything lives in one project rather than having Cloudflare pages and functions on top of that. Um where are we? So, let's check on the images and then we can see where that's gone. I feel like those are the two things we need to do to fix your your markdown and then we migrate it over to to the current project that we have. So, I've thoroughly searched your project. Okay, it did not figure out. Okay, so now we need to do this differently. It doesn't know the exact directory we're referring to as blog post because we're in a different directory. So, I feel like it's best if we do it in the actual directory. Yeah. Or the blog post in your directory are currently local. Yeah, I think it's easier that way. I feel like with open code there is a way to reference like your downloads or your desktop easily. Uh but I'm not sure. Still trying to get the hang of all the shortcuts of open. Yeah, it should be the slash command, but I'm not sure. And that's not working. Okay. Yeah, it comes up now. Um, no, no, it's fine. It's fine. Let's use the current one we're using and then we use this for the rest of the the things we need to do related to the the project we're working on. But for your other Oh, I'm sorry about that. okay. M, let's go to the instance that that's that is doing the uh title transformation for us. Yeah. Yes, this one. And we still have a few more to go. So in here I would I'm thinking of what's the easiest. Okay. In here I'll create a new tab. So in your terminal here where that plus sign is yes you can create a new terminal. Then open code. Okay. Now we can ask what we asked before. So we wanted to find every instance of an image using the hashnot C CDN. and download them. Okay. Um, while those two things are running, the other thing I would like to do is go back to So, wait, before you switch from this tab, we can already see the to-dos. It's going to search for the image URLs. It's going to extract it, download them, and save it with the appropriate name. So, those are the two things we want from this um repo. So, we can go to our actual project now. So, now that we're here, um the UI for the template doesn't look exactly like Maddie's UI. So, we would love to replicate exactly what Maddie has. Of course, if she wants to change it later, that's fine. But we doing this stream, we want to try to replicate it. So, we're going to also be using open code for this tax. Um, Maddie, if you can copy the URL of your current blog. So, techwithmaddi.com. Oh, that's just it. Okay. And then and then we run a new instance of open code in in here. So in here. Okay. It's so crazy how you can have open code opening like so many tabs and have it run simultaneously. It's crazy. Um, so yeah, what we want to do is we want to try to to to get it to design this current block template that we have to look like yours. So we just tell it that so you can I'll I'll let you do the prompt for this one. Could be something simple and then you give it the link so it knows to go to your website. Uh um let's say I want to redesign design the current block to look exactly like Yeah, I think sometimes it's like the problem with the AI tools is um making sure that you write the the correct prompt. I agree. I I feel like because we're in a time crunch, our prompts are just like one sentences. But if you want if you want if you want to get better results, I feel like spending more time giving it context is very important. Whether that is adding links or using like for example um skills or MCP servers, it really helps with the results. So what? Interesting. Okay, I think you figured it out. So it's currently analyzing your website design, a modern color scheme with dark mode support. Yeah. Okay. Um fingers crossed that it comes back to look exactly like what we have. Otherwise, we'll have to um try to use a different prompt to get exactly what we have. But I feel like because initially I told you that I wasn't sure that it could crawl your website because so that's why I asked you to have a backup screenshot, but I think that's not the problem at this point. And I don't know why, but it's good. And also because we're using the cloud claw oo model as compared to the the previous one we were using. So this is good. Now we have three concurrent sessions running and it feels like a lot is going on. How are you catching up? [laughter] So we check the other ones. Yeah. But are you catching on? Good. Yes. Thank you so much. Good. Um once we get to a point where everything is sorted, I feel like we'll have we'll have it looking good. But we have now this is still running and let me use a different approach. Let's run it directly. I think this one is failing. Uh let me see. Um if you scroll up a little bit like for the terminal part on the terminal. Yeah. a little bit more. So, one thing that I always try to do is as much as as much as you you have different sessions running and you don't want to burn tokens, right? You should still check what's going on just in case the the the prompt is not doing what you mentioned. And another thing that I wanted us to do here, but I totally missed it was I wanted us to always use the plan mode first before we build like I told you earlier because I feel like that way you are sure that it's going to to do exactly what you want it to do before you ask it to start building or start changing code. But I feel like this. Now let's run the script with time out to see how many images can download. Do you see a new um did you see do you see the hash node images directory in the Yeah. Can you open it? Let me see. Okay. Yeah, it it is downloading the images, right? But those feels very tiny. Can you um um Yes. Okay, perfect. So, we have the images. That's great. Uh good. Okay, that's good. So, let's check on Let's check on the other UI revamp we're doing. Still going strong. Great. I'll be curious to see the UI to see what's going on. So, if you can open your browser because we have this running already locally. So, just refresh. Let me see. nothing much, but it's coming. It's getting there. It's getting there. Okay. Uh let's see. So, we've grabbed the content. We're trying to um clean it up, change the titles. We're also trying to simultaneously download the images from the markdown file. So, we already have it. Um, and now we're trying to also do the UI at the same time. I think the next step would be to um move the current markdown file. in your blog post directory. Yeah, we want to Oh, no, not not here. I think we should stop using it term um the terminal for now. Let's just use VS code and use the terminal within that so it's not confusing you. Is that fine? Okay. So, the this Yes, this one. the other one. Yeah, the one with the images. Yeah. So, we want to move all the markdown files we have here into our new project. So, if you go to the new project, in here you have a directory called content and in there we have blog. So basically, we want to delete everything here and move what we currently have over here. And because we have over 120 something posts, it would be crazy to do that. It could be easy to actually move it. Let's do that by ourselves. So if you open a new terminal um so go back one step. to cd dash or dot dot rather and then go into blog post. Now we want to move the images are still the images are still um downloading. Uh, is there a way for me to just move? Let me see. Is there a way for me to move only the markdown without Okay, let's make this easy. Go to the other VS code terminal. So, sorry that I'm That's okay. You to Yeah. So because we have hash node images in its own directory but we have the all the other markdown just if you close the hash node images um on the left we have all of this just sitting on their own. I want to move it into like a sub directory so that I can just move that over to the new project. That makes sense. I know we still have about 10 posts that has not been transformed yet and I am checking on it to see why. Uh if you go to the other terminal so on your right you see this thing called open where the green here the one on top. So it says it found 10 files that needed to be migrated. All markdown files have already had proper UML so they didn't need migration. So it's interesting it's not migrating the or did it migrate it without changing the name. Can you check like open one of the files? Yeah. Okay. So it did the opposite of what I wanted it to do. It only added a title. So now we need to tell it to use the title as the name of the file. So, do we want to switch to plan? Um, for this for this one, no. I think it should do what we want it to do. and also tell tell it to put everything in one single markdown directory if that makes it easier. and this is for all the P mark all the markdown post too. And once you're done, you can tell it to move everything into a markdown directory. So we can move it Actually, can you also move it for us? Let's do that. I don't know if that's now too much tax for it, but also ask it to move it to tech with Maddie and move it to Oh, let's just do this first so it's not too much. And we can do that next. Okay. Um, so once this is done, we move over the content. We move the images as well. And yeah, and then we check on the UI. And we should be getting close to try refreshing it. Let me see. No. Okay. Let's see what the UI is. What's going on with the UI? I think it's the other one. Yeah. now let's create the about and contact pages that were referenced but they were not. Yeah, this is where I feel like we could have used plan for this specific one. So, do you want to cancel it and let's do that? Yeah. Um, in your in your g history just um revert the changes that was Yes. just revert everything. So discard all. Okay. So to cancel just press um Ctrl C. Great. So we run open code again. And now we use plan mode just because we want to be sure that tries to oneot do it at once instead of us having to poke around with it. Um, can I see the files in the directory? Sure. Okay, good. So, let's use the previous prompts we did or make it better. Let's make a better prompt. Let's try. Um, I want to replicate then your URL. Uh there's also something that I recently discovered that really helps with front end. Maybe we should use it. I'm not sure. But so when you're using tools like open code or cloth code, name it any of these um AI tools, you can also add skills to them. So skills are basically markdown files that gives you they have skills for different things. You have skills for writing good commit messages. You have different types of skills. So I recently installed a front-end skill so that when I have any tasks related to UI or any task related to um improving my website, it uses this skill as I am writing my code. And the skills are actually for for you to create better looking UI and UX, right? So I feel like maybe because I have that I almost always get a good UI every time I use it. So maybe we should use it just for this specific task. Does that work? So I'll send you the link to the skill so you can install it. Um it's quite So this is the link actually just run in your terminal front end design and the skill is from anthropic if anyone is interested. It's called front end design. Uh I'll send it to you in chat and you can paste it here. So you run MPX skills. So you can close this for now. Let's install the skill. Ctrl C. Yeah. Oh, it's in there. Yes, it's in chat. Uh, do you need to open No, no, no, no, no, no, no. [laughter] Sorry, I forgot [gasps] I What's the best way to send it to you? Um, you know what? Open it in the open a new tab. I forgot we're live streaming. go to the URL is skills.sh. skills.sh. Then search for front end. Oh, that's it then. Number four. Yeah, number one. So, yeah, that one. So you just need to copy the the the first line you see MPX skills art. So that's Oh. So we use this and this should help us a lot to try to match your design. So it's going to ask you a few questions. I think for now we can install it in the current project directory. So press yes yes you're using open code. So yes and we want to install it in this current directory. So yes as well and yes sim link it. Great and yes one last step. Great. Okay. So now that we have that, we can now try to to run the the prompt we're trying to run before. So open code and usually when I'm using skills, I expect that it picks it up because I ask it to do anything related to front end. So we'll see if that works. Otherwise, we can always tell it to use the specific skill we just installed. So, let's say I want to I want to replicate this exact design. Then you put your URL for this blog. Yeah. True. We can actually use um someone is suggesting we can use a different template from Astro, but I feel like you want to keep this one, right? Um not necessarily. As long as it's the UI is uh still easy to navigate, I'm happy to change it. Okay. Um, I think because we already started is let's get it looking like this and then I think I know the perfect one you might like from the Astro um template collection. So I think it's it's it would not take too much to make the change because it's more UI changes rather than the core content change. Right. So let's do this. Right. Good. So um I want to replicate this exact design. I'll help you I'll help you play this design from but let me first fetch I'm not I'm not seeing the Can you minimize this? Is it possible the I mean me showing on your screen or is that not me the small riverside thing? Can you is it possible to take it out? Uh, sorry. What is it that you're saying? Okay, maybe it's me then. Oh, sorry. It's me. Something is blocking my um view of the terminal, but I think it's from my screen, not yours. So, it's it's okay. Um, I was trying to see if it used the front end skill. Can you scroll up a little bit? Okay, it did. So, you can see that it called the front front end skill that we installed. And yeah, we'll just let this go and go back to Yeah, we'll go back to the previous um VS Code instance that we have. So, we can move the post now. I feel like that should be ready. Great. Um what do we have here? We have a lot of interesting files. Um all the markdown is within the markdown file. So that's great. Um the images I feel like this should be all the images. But it will be interesting because I I see that the names of the images are also different strings. But we'll come to that. For now, let's move the mark down to our current directory. So, you can manually drag this. So, if you move your your if you reduce the size of this VS code instance, then you can drag it over. I want it to be inside inside. Content. Let's put it inside content and then rename it to blog here. So, okay. Yes. And then we delete blog. The current blog. That's Yeah. And then we rename the markdown to blog. Just by doing this, it should not work. Why? Because the previous front matter from the blog we just deleted and yours, they're completely different. And we have to change a few things there. But we'll first of all check on how Oh, this is still running. Um, so open one of the blog post just so I can show this. Open one of the blog posts. Uh you can minimize this. So initially we just had I'm not sure but I think we had tit description if you go to the top of the file but now we have title we have SEO title we have SEO description and a few other things in the front matter that I'm not sure the current blog caters for. So, we need to tell it to also do that, right? To have all this in the content um as well. If you scroll a little bit or you close the blog just so I can see the all the files in this directory, it's easier if you close the blog. Yeah. So if you go to let's see the what file is that now astroconfig.mjs. Let's check that file. Um okay. That's not the file I'm looking for. content config.ts. Let's check that file. Yes. So this is the file I'm looking for. So the previous schema for the blog post looks like this. But ours is totally different. We can easily change this by copying over what we have and giving it a type for each of the the the item in our front matter. or we can wait for the design and see what it looks like and ask it to fix most of the changes we've made because we still need to do the images. So, I'm trying to track time. Sorry, actually it would be more correct to say you can get a block template from Yeah, I know, right? Because my hair Sorry, Maddie, you're not seeing the chat, but someone's saying um they can tell that I'm using a virtual background because you can see [laughter] Yes. Uh but my experience, Google Meet does a very good job of not doing this when you use a background as compared to like other platforms that I've used. But it is what it is. Okay, let's go back to let's go back to the image images that's still running. I think that's the last thing we need to do from your old project. So, we work on this one solely. So feel like we have all the images. You can check on the terminal if the process is still running. So the markdown is done. We can close it. Ctrl C. Yeah. So the other one is running. Let's see. Oh, it's still running. I think you know what? Um, it doesn't look like it's running. It's a lot of lines, right? Let's create a script, but I see that there are already images here. Okay, the images are saved. Okay, it's done. Okay, great. So we can copy the backup over to just drag the hash node images over to the to the current directory we want to work from and put it in let's see put it in no put it in uh assets first. I'll see if that's the right place. Yes. Uh let's keep it keep it there for now and let's check on the UI. So we're on a time crunch. Let's see. Okay, so this is definitely not what I want. [laughter] This is so different. Um, yeah. Nope. Okay. And I know you're not feeling this, so I'm not either. [laughter] Uh, I think the the problem here was and I saw it when it was was um when the prompt was running was that it couldn't fetch your website like I told you before. So instead it just um used a markdown version of your website. But of course with a markdown it cannot know the exact UI that you have, right? So that's why you have to um so two things we can do to fix this. We can either um try to to to ask it to make something nicer or we can get a screenshot and use a screenshot cuz I feel like a screenshot would do a better job. So which option do you want to go with or we can go with the option from the chat? Get the Let's try the option from the chat. Okay, let's try. Okay, so go to Astro I think. Let me look for the link or just search for Astro blog templates. I'm sure we should we should be able to find one because we already have our content and we have the images. So, we can choose something nice. Um, is there a way to search here for blog? No, not that. Oh, no. That's your blog. Um, let's go back. Yeah, we can let's go back. Okay. No, went to I'll search again. Astro blog team or Astro Blog template. I'm sure there should be a free one we can use themes. Um, scroll a little bit. These are websites. Websites. Discover more. Yeah, there should be categories. Check categories. Check blog. Yeah. so these are options for is are these blogs? No, I don't think so. you know what? in the search bar. I see a search bar there. Just type blog. Yeah. So, you can always preview one of them. Um, this is exactly the one that I use. Uh, where is it? Where is it? Scroll. Yeah, this is what I've been saying that's been blocking me. Can you minimize that? No, I don't think so. Okay. Yes, thank you. Um, let's scroll. Anyone's catching your attention? now we can go for this one. this one opens up with Yeah. Okay, let's see. Uh, okay. Can you see a live demo? Let me see what it looks like. Let's click live demo. Okay. Interesting font. [laughter] I don't know how I feel about the font, but we can always change it. Okay. So, this is it. Okay. It's close. Close enough. Okay. Let's try to use this and then we can change a few things um if you don't want it. So, go back and I think there should be a GitHub link to clone. No. Click get started. Yeah. So, we want to how do we make this easy? We want to clone this repo. So, just clone it. Clone. And then in your terminal, get clone. So, this would this would this would mean two things, right? This would mean we have to start up a new project, but we'll just copy over our content over here, right? So, um, close this. Let's see. Great. Um, where's the terminal? Yeah, the new one. So, get clone. And then you can change the name to uh techwithmaddi.com. So if you actually just do mv that's move um skyscript space techwithmic.com. Yeah. So we can now open this um new directory techwithmi.com um yeah mpm install and while we at it what's going on can I see The mpm is unable to resolve dependency from the root project. Okay. Can I see the the GitHub repo again? The read me. How far? Last month. Okay. And the project is still active. The read me the just scroll down a bit. Let me see the installation guide. Down. Down. So, you know what? Let's try. I don't think you have PMP installed on your machine, so npm should be the easiest. Uh, I'm not sure why that's not working. Let's go back. Trying to maximize the time we have left. Do you think just because I would love to have something before we end this stream. Do you think we could do this offline like using this theme offline but try to get yours the tech with Maddi up because we already have the content we already have the images? Do you think we can? Yeah. So let's take a screenshot of your current um Yeah. So to take a screenshot, I'll prefer to take a full screenshot so it tries to get it. Um the command for that is if you open your developer console. Um so right click right click on your browser. Oh. Oh yeah. Yeah. And where is it? Inspect. Inspect. Okay. Then in here there is this where's the icon? Just close to the X icon. You can click those three dotted lines. Yes. And click wrong command. Then type screenshot. So say capture full size screenshot. Yeah, that one. The second one. So we have the screenshot grids. That's it. So we want to take this image and feed it to open code and ask it to try to get exactly this UI. Uh we see so uh can you drag the easiest way is to drag that image from the I'm guessing is in your home or downloads. I'm not sure where was this word. Let's see. Or you can open it here. Just here. Uh so many tabs. Yeah. Open. Yes. Um no. When you go back to um the what's it called? When you go back to Chrome and you try to click on the download, instead of opening the file, you can actually click not that one, the the pre the first one. Open in Finder. Yes, that one. So now you can drag this into. So you can close that. Close that. So drag the image into. Yes. So yes, say now ask it to use this as the base. We need to be better with our prompting skills [laughter] because that's the reason why we're getting halfass um results. So, um, please use this and replicate. No, that's not the best. Maybe Maddie try. replicate exactly this design. I think you should get it now because at least it has something to work with. Design in the screenshot. Um, while that's going on, we've copied over our content in another tab. Can we also we have another instance of open code running right in another tab in another terminal rather sorry you can open one of the ones you have on the side so on yes just open one so let's use this one so we want to say the current how do I say Can you match the current front matter in the contents directory to is this the best way to say to what's in the contents doconfig.cs tx file. Yeah, I think that should work. It's the con CS file. So, that's one thing. we're doing two things at the same time now. And even if we don't get the images up, I feel like we got close. So, let's try to see um what this gives us. Um let me explore the content directory. Oh, the screenshot is too large. Interesting. So, the image exists exceeds five megabytes and because of that, I don't think it's going to work. um instead of the full size screenshot, can you do like a a normal screenshot? You know how you take screenshots of just with your So maybe that's a lower resolution. Yes. But yes. So just take for maybe that portion and we sacrifice the rest. Yeah. Yeah. [laughter] Yes. So try tell it to try this. Try with this. Yeah. Um so two things running. We have the images still the same error. how many MB is that screenshot? Oh my god. Can you say um can you try ask it to try still try with it? Is it possible? Can you still try with the image? We don't have enough time to start compressing the image. Seems earlier PMP might need to be installed globally to avoid Yeah, that that would probably be the fix for that. But Maddie doesn't have PMP installed on our machine, so it will take us extra time to have to do that. So, I figured it's easier to do this first and maybe later we figure that out. But yeah, can we not ask you to compress the image? Actually, let's try that. And you compress the image and use it. Okay, now I feel like it's in a loop. Um, close it, open it again, and try because we still keep getting the same error. Uh, Let me cut. Uh, no, you can you can leave that. The the easiest way will be to drag the image from your downloads, right? So if you choose it kill terminal. Yeah, we can use this one. Oh no, don't use this one. This is for a different project. So yeah. Um let's see. Would you like me to proceed with converting the date to this for the image field? Which approach would you like? It's a lot of questions. Would you like option to add the optional updated field? Which of these would you prefer? I think for the first one, yes. Do you want it to be year, year, month, month, day, day? Um, for the second one, yes. Keep the keep the current relative part cuz we moved the assets there. Yes. Yes. As well. Um three would you like to add? Yes. Um for the second one say yes the first option because there are three options there. It's interesting that VS code doesn't give you the nice UI that open code gives you when it's asking you question. You remember that right where you just Yeah. Okay. Um let's do that. And we need to open another open cut instance to draft the image. Okay. So I think it should be in your Yes, that one. So just drag the image over. and see use exactly this UI for or I'll I'll let you write cuz my prompting skills is [laughter] use this image to match the design. Okay. Yeah. Um let's see. Al also I feel like the reason why the first image so it's asking you to view so you can allow once it's asking you for permission to view the image. Um the reason is because when you dragged over the the image. Oh it's still the same issue. Oh sad. Analyze the image on the block you decide to help you match it. Okay. Um, can you compress the image? It's interesting why I couldn't crawl this website. But yeah, no. Um, options, options, options. so try I don't know. I'm thinking the image thinking yes smaller image but this will be mobile format. Well let's let's try let's try try this. Otherwise, we can just ask you to use the front end skills to create a nice blog. What do you think? [laughter] Because Yeah. Okay. Let's do a better prompt. So, instead of building, just switch to plan mode. Um, okay. So, I want to have M. You need to help me here. I want to have a polished blog that handles all the content. A polished and modern blog that handles all the content in the that handles all the blog post content. I have something like that. I mean, this would not be the ideal results that we wanted, but that's okay. We could have something. Um, and then Okay. Yeah, let's Yeah, I I I feel like this will keep going on where it's in a loop and we still keep getting this error message. If you prefer, can we do it in a new terminal? Maybe that's a bug with open code. yeah, good. Okay, a polished modern blog. Um, great. Let's see this content doconfig file if there there was any change in there. Can can you show me just like minimizing this terminal a little bit? Yes. Okay. There's no change. Um let's check on the the prompt for that one. Yeah. Uh I'll help you match the front matter reflect. Found it. Let me read. Okay. It's still going. Okay. Uh, two things happening. Swap to the other terminal because that's in plan mode. It's going to have to go through and give us give us a plan and then we decide if we want to go with it. So, okay. So, let me read the tasks um the to-dos rather. So, it's going to first analyze the block structure, design the new block templates. Um add content categories and tags, add search, which is nice. We didn't have search before, did we? Um add a reading time estimate, create related post feature, add a table of contents, and yeah. Okay, we will work with this and see what the result looks like as far as we have we have something and we'll deploy it on here and then later m if you decide you don't like the UI is you're more than you're more than welcome to change it right or because this is this is giving neon vibes Right. Yeah. This is really like Star Wars or something like that. [laughter] No, this is not what we want. So hopefully we get something. And great. Now let me create the polish. No. No. Can you cancel it? No. It's trying to reuse the same team. Can you tell it to escape? It's going to use the same cyber punk team. No, I don't want that. So, escape uh twice, I think. Yes. Yeah. So, it's currently using context of the project of the UI you already have. So you need to be explicit and let you know not to use this kind of design. Right? So I'm thinking not use a cyber punk theme. Now continue. Okay. Yeah. This is where I I feel like your prompting skills are really really important because one hack that I I I found I don't do it often but it helps if I want to have very good prompts I would tell like in my own natural language to another a different LLM to help me refine it and help me create a prompt. That way I get because I I feel like for every time you have to write prompt, you need like something very cohesive and that's going to be like what four, five lines, which having to write down manually every single time, especially now that we're on this stream wouldn't work, right? So maybe we could have thought of that, but it's just too many different windows at the same time. It's easier to let's see. So, create a polished smoothing blog. Uh, while we're waiting on this, we can easily just change the the front matter ourselves. So, if we open this content because I feel like the other process is not moving. It says Oh, it is actually. Okay. Oh, it is right. Um, some Okay, it did. It did. What? What? No, it did not. Okay. Can you open one of the content files? Blog. Oh, no. Where's our blog? [snorts] Uh, I think he deleted it. interesting. we Okay, I can see that the files are there because we have 559 changes. So if you open that, but you need to scroll a lot more. Let me see if the markdown files are there. They are not. So these are all images. maybe what I could have done is committed that change first. You know what? Let's try to do this. Let's um the images are all of the 559 that I see. So, the markdown content is missing. And I feel like maybe what happened was when we were doing the UI change, it deleted them, which is not what we wanted to do. So, can we move it again um to the new directory? And by the way, if it helps, can we commit some of this so it's not a lot of files? So where it says hash node images yes no in the g history can you see it oh this is a different project sorry to the current yeah um yes in the g history let's see let's commit what we currently have it's better to work with commit and then we and revert if we don't want to. So we add everything. Um on changes you click add. Yeah. Add images or you can Yeah. Add. These are mostly images. Yeah. And then the skill we also added. Um so let's commit that. So at least it's it's easy to scan through. Yes. So when we go back, we can move the um No, we don't want to publish it. We just only committed. Yeah. Great. [snorts] So if you if you go back to that project and just bring the contents back, that's the markdown. Just bring it back to this project. Not sure why it was deleted. And even this I deleted it came back or you deleted it came back. So weird. Great. Yeah. Okay. So in the blog post directory. Yeah. So all the if you click on the Yes. So all the markdown files if you drag it over to the new to the other. Okay. Let's leave it like this first just so we are sure when we're ready to delete the other one we'll do it. But confirming that it's there. That's great. Okay. Um let's check on the UI. What's going on? Um, we can stop this for now because it's definitely not doing what I expected it to do. So, X STR C. Yes. Um, let's check on the UI. Oh my god. [laughter] What is Gosh, now I'm compelled to write a better prompt. Um, but I feel like it's still it's still coming. This is this is from the previous this is this is from the previous design. I hope. And let's check on what's what's going on with our prompt if it's done. Hopefully not. no, not not this one. Check the other Um, sorry. Check the other terminal. The in the tech. We're done with this for now in the tech with Maddi project. Yeah, you can also close this. Okay, it's fine. Yes. Check on the UI. So, maybe try the last one. Not this one. Yes. No, the one before that. Maybe the one that says node. Interesting. So where's the UI one? Um check the one the open code instance running verification depart skeptic it is. Can you scroll? This is not it. So where did that instance go? I hope we didn't close it because then um I think it's the one we said escape. Ah. Oh yeah, we did. Okay, let's ask it. We create a new we'll create a new terminal and ask it to finish the UI It's interesting that we escaped and then I remember you also asked it to do to not use cyber punk specifically. So I'll confirm I'll open each one again to confirm that. that instance is not running just so that we don't have two things doing UI at the same time. So open the node one again just to confirm node. Okay, [snorts] this is the mpm open code again. front matter. No, it's not this one. Open the Z ZH blog post one. The one before that. No, the one on top of that. Interesting. That means we closed it. Okay. Maybe that's why the UI is You can rename this to UI. So, this is checking the current design. Updating. Updating CSS with cyber punk theme. Enhance homepage completes. It's just doing a lot of unnecessary things that we don't want it to do. Um, quick one. Quick one. Is there a way for us to skip? Well, no, we don't want to skip this. You need to You need to You know what? I keep changing changing changing routes in this stream but I just want us to come to a final final result and then we can deploy it. So let's make our lives easier a little bit. Yeah. Let's go back to the actual template we had. Of course it's not the best but let's use it, right? Does that work? because now we are spending more so much time trying to get the UI to work. And of course, we can do this off stream, but we're way past time. Okay, so we'll close this instance. Just close it. Um, what's the best way to do this? Um, okay. Open a new one and ask it to revert all the UI changes or without all the UI changes. And then we just work with the content on the current blog as it is with the layout that we had from scratch and we can always update it. So now let me check what other URL my existing. Okay. Let's check the the browser to see what's happening. I feel like it was actually doing two things at the same time because you see the hero section is a different project. Um, no. Uh, this is still the cyber punk one. Go to blog. I'm just curious. Go to blog. Oh, okay. Okay. It's bringing it back. Interesting. Okay. I've successfully reverted the UI tune. No, this is not where where it was. Can Can you make it um, how do I say this? Can you make it use the default Astro template theme as can you revert it to the default Astro template theme with no cyberpunk UI? Yeah. Okay, Now that that's going um we can now ask it to where is our blog post? Oh no. Yes. [snorts] You know what? Don't check this. The hope is it takes it back. Let's move the markdown content back here because I see it's no longer here again. So, yeah, it's it's gone. So, for every time we don't we don't commit changes and we're asking it to revert or change things, it's deleting what we've added in the history. So um let's move it again one last time and great. So now we can open a new terminal Um, can you tell it to take all the markdown content uh that we currently have and make it the default? Um, what's the best way to put this? um replace what we currently have in blog with markdown and ensure that it works in the in the in the blog with all the front matter. I'm confusing you right content under take all the magdown content under and replace the current or we can do that. Under content. No. And replace the current blog with it. And ensure it works. Ensure it renders with the front matter. Let's try this. wait. uh replace the current block content with the markdown files and ensure they render properly. Let me start. Okay. Um while that's happening, so we can check our UI if it's done. Okay, we're back. But now we're missing our styling, which is fine. Uh [laughter and gasps] uh okay, it's we still have this page. Let's see if we can get like replace the contents with the contents we got from your current blog and then we work we work on the UI later. Um just to confirm that this is doing what I expect it to do, let me review the to-dos. So it's checking the blog structure. Replace blog content with content markdown files. Update the blog and test it. Okay, that's good. Um, we can ask it to check the UI just to check if it's still running or it's completed. Um, the UI tab. Oh yes, sorry. UI terminal. Okay, it's it's still doing the UI changes. Great. Um, I think that's the last step. So, now we know. [snorts] Let me restore. No, don't restore. Don't don't don't restore. Should I escape? Yes. Oh, it's too late. [laughter] Oh my god. Uh, it deleted the markdown folder again. Okay. Um, you know what? Let's keep this for now. see, looking for the best resolution for this. can you tell it to restore the deleted markdown directory? Restore the deleted markdown directory. Okay. Now, because we didn't because we didn't um commit that other one, it's lost. Uh yeah, because we don't have it tracked is lost. Great. Um one last time, Maddie. Sorry. We just It's empty. It's empty. It's empty. Yeah. Yeah. So, we just need to here tell it to to um let's move it one last time, but make sure two things at the same time because one is going to last. Yeah. Delete that. Now that we have that, great. Um, this site now uses Okay, so this is done. Let's close this. Uh, UI is done. Let's close this. Sh. See? Yeah, this one. UI is done. Yeah. Okay, I'm going to close this. Yeah, close everything except the last Yes. So now the markdown files seems to have been deleted. Do you have these files backed up somewhere? Um yes, check. Just say yes. Check content because now we've put it back to the first option. um yeah. And let's see what the UI looks like. Oh, the we close the Oh, yeah. Mpm run def Yeah. Another thing we wanted to do, but of course we can't do it um now is when we have a deployed version, Maddie would love to move her domain over to Cloudflare because her domain right now on Squarespace and we already started the transfer for that. But we Yeah. Okay, the images are missing and that's interesting. But we don't need this. We don't need this um blogs because we're replacing it. So we'll leave the homepage as it is. We leave the about as it is. But the blog is where we need to replace content. So uh let's check on the open code terminal and see where and this is slow. Okay, let me explore Uh, what's the fastest way to do this? We can do it manually, but it's a lot of files. Uh, okay. Can you copy [clears throat] copy to two maybe just copy two markdown files over to the blog and then I can do we can try to do it manually. This okay great and if you can open one of those files just open one. Yeah. And you see it has just the front matter. The first part, it has a title, a description. Oh, it actually has the same. Oh, wait. Okay. Go to the browser. Let me see what's what's showing there. Okay. Okay. So, what we're trying to do, you already fixed it, right? So, we don't even need to do that anymore. Um yeah, this is looking better. Yeah, but the images are missing. And the reason is because we haven't specified where they should go. So we have hash node images. But how do we know the specific image being used? I think that's the interesting part because the images all have um this strings. Can you open one of the blog posts? the the Yeah. So, this one doesn't have any image. Just one that has image. An image. Maybe the first one. Yeah. No. most of them have an image. Yeah, I think most of them this one still using the hash node one. So no. Uh what I wanted to do is now that I realized it I should have done it in this directory instead of doing it in the other directory was the image um that we downloaded because they were I think they it used the Python library to download them. So it didn't keep context of where it was downloading it from to like give it a name or maintain the same name that we currently have. So, it's going to be very hard for us to match what image was downloaded to where they are in the articles. So, I feel like the easiest way right now is if we go to the the live um URL that we have in our All the images for the post are missing. And to make this easy, we can just ask it again because now it's all in the blog contents directory. We can just ask it to pick um maybe open a new one for this specific tax. Um I think it's called cover image in your project, but I'm not sure. So if you open one that has a cover image, I can use the exact name. So I can tell it to extract those cover images to uh so open five alternative career options. I think that one has a cover One of the posts it's Yeah. No, this one. Does that one have No, I don't think this five alternative should have. Yeah. Five actionable steps should have a cover image. So let's see. Yeah, but the cover image is missing. The description is missing. Interesting. Uh, can you open can you open one of the the blog posts? I feel like the the the prompt is still running. So, a lot of the content is missing including the images. So if you open on the browser, yeah, open this blog post. This one, just one of them. Yeah, this one. Yeah, that's why uh the prompt we ran is still running. It's not completed. So even though you see some of the blog posts are already live because we moved them into the blog content, they're still missing pieces that needs, for example, they're missing the image. They're missing the slog. So we have to wait for this to complete before we get to see something tangible here. how how are you feeling about this? Are you still do you still have the energy to keep going or do you want us to to wrap it up with lessons learned? And yeah, I I'll say we can wrap it up and then you and I we can discuss how okay we can improve things cuz I mean looks like it's it's not as easy as as we thought using even open code and AI. Yeah, I feel like what's what happened let's see. I feel like because we have first because we have limited time and also because we had like two a couple of a couple of um um sessions where it didn't end up doing what we wanted to do. So, we had to be prompted a couple of times and that possibly made um us spend more time doing this. But also, I mean, kudos to you. It's your first time using Open Code. It's your first time using lots of things we tried using today, but you still got a hang of it. So, do you have anything you learned in the process? and also sharing that I actually got this working this morning cuz I sent you the URL, right? Um, of the actual blog post that I tried to migrate. So, it's something that you can definitely do in one shot. But yeah, um, thinking about the time we had, we had 1 hour and we're way past that time. I feel like Maddie, you can definitely take what you've gotten from this just playing around with open code, playing around with um Astro and stuff and continue working on the project to see to see it finished, right? Yeah. Oh yeah, definitely. Um maybe one last thing. I mean this is not finished but the core part was to actually show a bit of cloud flare. We only showed astro at open an open code right. Um I would I didn't realize it was stuck. Oh, I'll close it out by by deploying a version of this. Maybe that's not the best thing, but we'll have that as your V1 and then when it's done, we can get get it looking way better than this, right? What do you think? Or should we hanging here? your call. You make the call because we can wait for it to finish or we can Let's see. And it doesn't feel like it's moving too. Yeah. Sounds like open code is tired. Yeah. Tired of us. Okay. I think we can we can close it off here. the goal is Maddie got to play around with these different tools and she still has a goal of moving over to Clare, which we would definitely do, but we couldn't do it on stream, but which is fine. That's the essence of doing live streams, right? You struggle with your code, you try to get things working and stuff. So, but yeah, if you stuck around with us till the end, we're really grateful that you you you stay with us. But thank you so much. Thank you so much, Maddie, for your time and for being here. Thank you. Yeah, you're welcome. All right. Have a wonderful rest of your day, everyone. And bye. Bye.