I Let AI Design My Blog, Then Deployed It for $0 | Cloudflare 🧡 Astro

So, my daughter got asked what I do for a living recently, and she said, and I quote, "He's a nerd clown. [laughter] Honestly, I kind of like it. I'm a developer educator, which means that I spend half my time building stuff educationally to share with you, and the other half trying to bring joy to our line of work." So, NerdCloud, I liked it so much that I headed over to Cloudflare Domains and I made sure that it existed because I don't think it it's missing. So, I did nerdclown and I did a search and uh it showed up and I got it. I actually got this is nerdsclown, but I actually got nerdclown.com. It's mine. So, now what do I do with a killer domain like that, right? I mean, probably a blog. There's been a big resurgence lately in blogging, but man, I've been so blocked by that in the past. I don't really have the design chops that's needed. Like, it's not in my nerd clown wheelhouse, if you will. But times are changing. I mean, now I'm armed with an AI powered front-end design skill, and I kind of know how to use it. Want to watch me try here? Check this out. So, I'm going to start from the very bit, the very beginning, right? So, uh I'm at demos here. I'm just going to do an npm create uh Cloudflare at latest. And I'm going to go ahead and say yes. Here we go. I am going to call this uh blog nerdclown. Uh I'm going to use a framework starter and then I'm going to use Astro. And while this is going, we'll do Astro here. Uh I will go ahead and choose a use the blob template, right? Because it's already here for me. That's what I want. So now while that's going, uh I might as well do some clowning around. I'm pretty new to Astro, but I really like it. And if you are too, let's use this time to explain it a bit. It's a web framework, zero JavaScript by default. It basically ships the fastest HTML possible, then adds islands of interactivity only where you need it. It's lightweight, it's snappy, and it doesn't over complicate things. It's perfect for a blog where you just want your thoughts to load before that reader loses their interest. And it has a template. And I find that AI totally gets it. I understand how the layout of Astro works, but so does AI. And believe me, I know I know some of you hear AI and you want to close the tab. I get it. But real quick, before you close it, remember I don't know how to do design like at all. You definitely don't want to watch me stumble through this. All right, so it's asking me if I want to do get for version control. I do. I don't want to deploy my application. Not just yet. Let's go ahead and take a look at what happened first. So, I'm going to do this npm rundev. And this is going to run a local development server for me here. Actually, I'm not going to do that because that's the wrong directory. So, uh I'm going to go into uh the the directory that I just created, blog nerdcloud, and I am going to do an npm uh rundev here. So, that's going to kick off astrodev. It's going to open up on this port for me, this 4321. And uh it's got a blog. It's got a blog. It's got some stuff here. It's got a blog. It's nice little style guide here. And there's some about me stuff and home. It's pretty good. Now, let me show you what I'm going to do with AI. So, first, let's do this. Let's open this up in uh my editor. So, I'm going to open up my my new code base here in my editor. So, I'm going to use Open Code. Now, I don't know if you've used Open Code before. Uh, it's amazing. It's one of these coding frameworks that you run locally on your machine. And one of the tricks that you could do is you can add these things called skills. Uh, which I like to think about like it's kind of like uh I know kung fu, like that sort of thing. We're just going to let the coding agent have this brand new skill. So, I'm going to add it. I'm going to say open code. And there's a directory called skills. You say whatever the name of it that you want it to be. I'll call it frontend design and then uh we'll do skill.md is kind of how uh the structure of that goes. And I have one that I got um and I you can paste this in or you can you can push this around. This is one of these things that are kind of evolving. They don't really have like an npm structure for this but it is uh it's just markdown. And so uh I want to give a shout out to Anthropic because this is where I originally got this idea. they have a skill that they pushed out and you'll start seeing that things got a lot better. And one of the reasons why it got a lot better, it says build interfaces that are distinctive, accessible, and production ready. So I took that skill, I took that anthropic skill and I ran it through and I asked to to did some deep research and I said, "Hey, make this skill a little bit better." So this is kind of like my skill on top of it. But there's there's a bunch of stuff here about trying to figure out how to do uh different things. And I kind of drop this in wherever I go. I iterate on it and and drop it places. So uh I now have that open code skill. So now I'm going to kick off uh open code. I'm going to do uh open up a terminal here in this and I am running open code and open code on my machine currently. uh we have we use open code here and uh I'm using it uh to go through and uh right now it's using uh the latest uh opus 4.5 and I'm using the cloudflare AI gateway which what I love about the AI gateway is I can change uh models on that side as well but I'm running through there so we have this one billing place so so we have a unified billing and and uh the charges going uh to the company uh for this one so so I'm going to go let's let's go ahead and uh start thinking about what we want this uh prompt to be. So now I'm going to tell open code uh what it is uh that I am up to. So I'm going to let it know I'm going to say uh this is weird that this works. This is your first time seeing something that gets to show you this this right and I want you to use this as guide because I want to use the structure. The structure is really nice in here by the way but remove the example post. That's kind of why it's going to figure that out that it knows what the posts are and uh uh and make it about me. I'm not sure anything about who I am. So I need to tell it a little bit about that who about me. Craig if I was using a model where it used that knowledge uh it'd be cool right it would it would actually build towards what it knows say use the front end design skill the front end design skill um which I loaded right and and it knows that when it when it came up it knows about that so uh I'm going to say I am a developer educator that uh my daughter recently said that my job is nerd clown so that is the name of this blog uh let's see what else do we want to do uh Uh it will be technical but also fun but also fun. Uh um I add some links around the internet parties. What else? All right. Make this my nerd clown blog. Now this is going to go and you'll see that it's going to go it's going to hit it's going to do it. It it's starting this uh this is really I could have done a planning mode here and seen what it was going to do, but I'm kind of doing a little bit of a yolo mode here. So, it's loading the front-end skill design. It's uh it's I'm going to go ahead and just say always allow I'm going to allow it to do uh searches here, but you'll see that it's doing it's not sure it's allowed to do things yet. I'm just saying go ahead and do it. So, it's reading the blog codebase. It's doing a different It's looking at here to see how things look. We could we could take a look while this is going. Um so, you see that there's this content and it's got this these posts this way. So, we'll see what it does. We'll probably add a couple posts, I think, probably. So, it's it's it's going and researching, which I think is pretty cool that it's able to go and do that. It's able to use that skill get, which again was in English. And uh we're going and doing tool calls. So, it's doing tool calls. It's going out. It's making sure um it's it's doing reading these and understanding what it is and probably going and generating some things as well. Um I didn't give it access to any other tools. One of the things that I could have done is I could have given it access to a place that has like a awesome image models. Um, so it has a it has a clear picture of the codebase. Let me create a task list and start transforming. So it's going to do all this stuff. I I like it keeps this task list, right? So, uh, I didn't give it access to a place to generate images, which I probably should have done. We'll see what it does. Um, uh, it's going it's going out. Uh, it has all it's going to start implementing it. It's going to make it uh I'm just going to say go ahead and always allow this. So, it's see it's found where it needs to change things. Uh and it's it's updating code where it's supposed to because it read it. Um it's going and getting the social links with component here just go as possible. One thing I want to do I think is first turn off this auto thing. Um, I want just default really quick in here to uh we're doing this image service. I'm going to make this not uh have that there. I'm going to change change it so that it's not using this image service Cloudflare yet because this is for when you deploy it. And uh I want to just make sure that I turn that off real quick. Cool. So it's it understands that there's headers and footers, right? So So it's really nice these automatically this blog template is broken out. You see these files? They're they're really cool. So they have you can run a little bit up here in this front matter. You can run some JavaScript and then you can use the JavaScript in here. So here's the the git full year so that the you know that uh the copyright's always going to be good. So it runs the JavaScript and does it here, but you'll see that it's just kind of straight uh straight. You could do markdown in here as well, but this is just doing straight HTML. So we've got the JavaScript and then the the HTML down here, but it's using also it's using J JSX, right? And the wild thing is that it could I could say use the internet to find out more about me and and it could go see some of the stuff. So, uh I'm going to say always allow this. I'm allowing it to remove files, right? It wanted to make sure that it was okay to remove files and I said it was okay. And this is stuff you can all configure uh for each one of your sessions here. Uh because sometimes you don't want it to do that stuff and sometimes you do. So uh it's going it's it is making a first blog post for me which I'm excited to see what it thinks. And uh you'll see that when it did it it wrote it in MDX which I really like. So um it says the another tech blog on the internet. I don't like that it didn't capitalize the internet. So I need to set that as a style. Right. So, it's going to go and it's going to try to do a build. Um, and I want it to go ahead and run that whenever it wants to. What's nice is that it's TypeScript, right? So, it's going to know if there's any sort of bug there. So, it's like TypeScript ready. Uh, which helps AI, I find a lot. It knows when there's errors that happen, right? So, the build succeeded. We're getting rid of the old uh stuff. It's updating the to-dos. I think we got a blog. I think I've waited a very long time to do this and I think it figured it out. I have never seen this before. Uh but I'm excited. I'm excited to see it. Uh so so here we go. So I could preview it locally uh using npm rundev. Let's do it. So I'm going to open up a new terminal. I'm really nervous. I don't know about you, but I'm nervous to see what it came up with. Uh and this is just a first swing, right? If it's not good, image isn't found. That's not good. Um, uh, so, so I couldn't find the requested. I'm just going to share that and let it see that does that exist. Blog placeholder one. Let's look. So, it says couldn't find it. Assets. There is nothing in assets. So yeah, so it couldn't find the image. So let's let's just make sure that that's not there that it knows that. So I'm going to take that back to open code, right? So um that wasn't a very good reveal. But I guess it's probably good to show an error because sometimes errors happen when you're building and I could just tell it and it's going to say, "Oh, oh yeah, shoot. Sorry, oh yeah, use a fallback image for the Twitter cards. I'll make it optional and handle the case where there's no image." Right? So, in this case, I didn't give it any images, and I probably should because when I share my blog, I want to have a have a back thing. And so, it just didn't correct that. It didn't catch that when it's deleted the thing that was there. So, it says it's fixed. It passes. And now, uh uh uh it's nice. It does an automatic [laughter] refresh. So, here we go. Here is NerdClown. Um uh it feels very much like the Cloudflare uh uh docs site, which is interesting. Um and uh yeah, here it is about me finally online. I'm gonna make this uh I'll I'll tweak this a little bit. I feel like this isn't very playful. Uh let's see if it all my things are going to the right place. Yep. Craig Dennis. Craig Dennis. Uh Blue Sky is almost right. Uh so there we go. So view all posts. I'm pretty much everywhere. That's true. Um and it's got it's gone and it's written a new a new thing. So here's here's the origin of it. This definitely needs some images, but I think I'm just gonna go ahead and get started with this. Right. So, I'm gonna take this I'm gonna make this better as it goes. And I want you to come look at it over time whenever it's going to look better when you finally see this this blog. So, come check it out. Uh, and then first, so, so I want to deploy it, right? So, the first thing that I could do, and now this is again, this is totally free. Everything that we've done so far is totally free. I'm going to stop this. I'm going to do npm run deploy. And you'll note that when I did that, I didn't say where I wanted to deploy it to. I just deployed it, right? And we like to say that that goes to uh region earth. Uh so so it goes on the the Cloudflare network. It goes everywhere. I didn't think about where it went. And that's because it gets deployed literally everywhere. Um so all 330 uh data centers around the world. Uh it took the name of where it's at. And here we go. Uh so it is now live. This is live. And a lot of people can hit this before I have to even pay for it. So like you wouldn't even have to worry about it. I'm sure you could here. You could host your blog with whatever you wanted uh to do there. I'm going to make this better. I don't know about the the I wanted to maybe at least put like nerd glasses on the on the cloud. I'll fix this. I I need to give it I need to give it something where it can generate images and I'll think I'll do that next. But so this is there. Uh but I did buy that blog, right? I bought the blog already where I I wanted to make it so that uh I've got I I own nerdclown.com and I want to make blog.dclown.com. So, I'm going to jump into um my Wrangler over here. So, this is my configuration file, right? We didn't see this. This kind of came with the template as it was there. And I'm just going to add some routes for it. So, I'm going to say routes. And the first route that I want to add, I want to add a custom domain. Uh it's true. So, so instead of doing that that workers.dev, so so custom domain true and uh the other thing that we want to do in there is we want to do this pattern and I'm just going to do blog.nerdclown.com. I'm going to save that. And now when I deploy uh npm run deploy that it will go and it will push up. Uh now if you don't like typing mpm run deploy, let me show you something else that you can do. So, let's just make sure this goes to my NerdCloud first. So, I've set the route to go there. And I believe it should say uh so it it automatically disabled that. And I think we should have blog.dcloud.com now. Should should be working. So, I'm going to make sure. I'm going to grab that. We'll go to a new page here. And so, you see it it is now disabled. The old one, the workers.dev dev one is. But if I come to my new domain that I bought, we are up and running. So now I've got blog.dcloud.com. It's it's ready. Come check it out. Come go give a read. But I don't want to run that deploy each time. I just want to every time I commit, I just want it to go. So I'm going to go ahead and I'm going to wire up my uh my builds so that when I commit a file to this, it just goes, right? So So let's do that. that. So, I'm going to jump over uh to GitHub really quick. My personal GitHub. I'm going to make a new repo uh and I'm going to say blog uh nerdclown blog. I'm going to say my blog. Uh I'm going to create this repository in my uh personal account here and I am going to just grab this and I'm going to push uh this nerdcloud up. So, I'm going to get remote ad there and we're going to push it up. All right. Awesome. So, now I've got this worker and it's uh there's a git repo for it. If I go to my dashboard, so if I go to dash.cloudflare.com. So, I come in and I want to find my worker that I just did. So, I go into compute workers and pages and I go to my blog nerdclown here. Uh, this is pretty neat. It shows uh where the default placement is. It shows uh what what I'm using. I'm not using much of anything, right? At all actually. Uh, and it's saying here that I manually deployed it, but what I want to do is I want to actually deploy it uh with my my my git. So, I'm going to go in under under settings. And if I scroll down here under this build, it says I can connect to a git repository. And I am going to do just that. So I'm logged in. Here's blog nerdclown main npm run build npm wrangler deploy. And if I do connect uh it will automatically be uh connected here. And let's go ahead and let's go to this deployment. And what's going to happen is when I commit this blog. So let's let's go ahead. Let's make a let's change welcome to nerdcloud. So here I'm going to write yo at the beginning here like that. So I'm going to save that. I'm going to see what my status is here. My get status. Uh oh my gosh, I didn't add any of this stuff. Uh so we're uh get add everything here. And then I'm going to push that. I forgot uh I forgot to do the ads. Uh get commit um uh open code initial uh push. And so everything's there. I'm going to do a get uh push origin main. And I like to do that. I like to do a commit after each of the things that Open Code had done to kind of keep track of it. But I'm going to go ahead. I'm going to push this and it's going to go up and it's pushing. And uh when it does that push, what's going to happen is it's going to kick off a deployment over here. And so I've got this open code initial push. It's going to go and it's going to automatically uh update my my Oh, here's my build details. I'm seeing what it's doing. It's I can watch the build as it's happening. So, really nice CI/CD here uh as it goes through. But really, anytime I want to add a blog, I just need to add a new uh commit and push up and we get this new blog. And so now the the build is completed. And I think if I look at my deployments now, we will see uh that the latest is there. And if I go to NerdCloud and I come into Welcome to NerdCloud, I should see my yo. There's my yo. So, I now have that. Isn't that awesome? And I've put this up for so long. I can't believe that I waited for so long to do this. So, I So, I was able to use the Cloudflare framework template to wire up a blog, a blog that I've been wanting to create for years, but have been blocked by design. I used a custom design skill to get my site looking good, better than I ever could. It did a pretty good job of capturing my potential voice. I haven't really decided on it yet. I'm going to write a few posts and I definitely will here. So, follow along. Make sure that you subscribe to uh blog.nerdcloud.com and I will share posts as as we go and maybe I'll add some more AI features to it. I I would like to get more stock photos in there and make it a little less emoji based, make it like kind of like fun AI feeling things. Uh, but if I did inspire you to create a blog and you've been blocked for a long time, please share it in the comments. And thanks so much for hanging out and we'll see you real soon.