How I Vibe Coded My Blazor Website With ChatGPT in 1 Hour!

Welcome to the first video where we're going to be vibe coding my code commute blazer website. So by the end of it, we'll have a website that looks something just like this, ready to go. Okay, to kick things off, I started off with a little prompt here and a bit of background. So when I have some of my websites put together, um, usually if I have an application, I have it hosted in Azure, but for some blog websites and stuff like that, I figured just having it running in GitHub pages would be really simple. I had figured out that I wanted to use a private repository for all of the content, the actual site, and then I need another public repository. That's where the page is going to be hosted in GitHub. I knew this upfront and gave it a little bit of instruction. But how did I come up with this in the first place? Well, to be honest, I ended up asking chat GPT this about a month ago when I was thinking about doing this. So, I knew what I wanted to put into this prompt, but I said, "Create a step-by-step walkthrough for using a private GitHub repo, just like I said for the source, and then a public GitHub repo for the page." I also know that from messing around with some of this stuff before that I wanted to use SSH for pushing from the private one to the public one. There's some other tutorials out there where they use some uh some private uh tokens and stuff like that, but for me, that doesn't really seem to work out properly. never really has been successful, but SSH just works like a dream. So, I knew that I wanted to do that before going down a rabbit hole. And then the other thing is that I wanted to call out to Chat GPT specifically that it's going to be a Blazer project. I also said I wanted to be very clear with how to operate it as a GitHub page. So, not just to have the content go from one to the other repository. I need to be very explicit that the end result here is going to be a GitHub page. If you're watching this and you want to have your content published somewhere else, you could of course tailor this approach to your liking, but this is going to be for a GitHub page. So then I tried to give it an example and said the build results from the private repository. So when we publish a commit and that build action runs, I want to take the output of that and have that dropped into the public repository. So try to be very clear and see how it goes. Now, the other thing that I'll call out is that I didn't tell it how to do it. I gave it some guidance, but I wanted to see as we go like vibe code this just how well it does with little instruction versus where I need to jump in. And spoiler alert, there's a point in this chat that we'll get to where I'm not very happy with chat GBT because it keeps going in circles, but we'll get to that in a moment. It gives me the first walkthrough, which is pretty handy. So, uh, it kind of elaborates and rephrases what I said back to it. um prerequisites, right? We need a private and a public one. I hadn't told it up front the names of my repositories. So, you'll see this come into play in a little bit, but I ended up doing this like so I ran this command on the command line, and I was able to get a project created. And just to show you, so this is the directory that ended up being made. This is the the finished result, by the way. But when it first created it, it made this layout right here without the bin and object directories. But I had this ready to go. So if I would have just run this command that it's calling out, I have the project that is this this Blazer like template project and it's basically the weather application with the counter. So if you've made a Blazer project before, it's just the one that comes out of the box there. But then it gave me this advice here and said configure Blazer for GitHub pages. And then it said that I need to replace um this uh href here that's in the index html file with the one for my repository name. So, if I pull this up, this is going to be located in this file. And you'll see right here that it wanted me to change this to being the name of my GitHub repository, which is going to be codec commute- website-public. So, that's what I put in place here. You'll notice that it's not there anymore. So, spoiler alert, this was not the right advice, but I think it's because I didn't give Chad GPT enough information up front. So, if you're following my guide and you're looking for a little bit of a shortcut, save yourself. Keep this one as just the slash. Now, let's keep going through this. So, we changed it to being the repository name and I kept going. I added in these pieces into the project file. So, again, if I go into this project, you'll see that I have publish trimmed here as well. This was another thing that it recommended a little bit lower. Oh, sorry. It is right here. I said to publish the trim one is true. And then we have these other things that it suggested doing. static uh web asset space path. I'm using .NET 9. So, this is a little bit different. But overall, just copy these things over exactly as it said, but basically change the .NET 8 to 9 because I might as well use the latest. Net 9 at the time of recording is the latest. If you're watching this a little bit in the future, 10 is on the horizon. But anyway, publish your Blazer app locally. So, I ran this and it worked, but doesn't really matter because we're not going to publish it this way. I'm not going to build locally and then publish those results. But I think that that's something that it missed in the first pass. So it kind of said, "Hey, go publish this." And then it tells me to clone down the public one. Right. So now I'm going to have both repositories locally. And then I think that it was trying to get me to go copy this stuff over, but that's not what I want to do because I don't want to go commit and push this stuff manually. That's not the point, right? I want to be able to have this integrated continuously. I make changes to my private repository. Push it up and then you know right away I have the nice changes reflected in my public page. So I had to go back to it and say okay. So it added in this automate with a deployment script as optional. So I kind of just skipped even reading this. And I think that my next prompt was that I was cross-checking the documentation here because the GitHub page it was trying to suggest that it it needs to be my username and I didn't want N Cosantino I wanted code commute and then so I asked it that first and then I end up coming back to saying by the way I want this to be an automated deployment. So just to confirm basically this part that it goes through I think this is where it was originally kind of confused about the sort of the root uh path that it needs to use for my website. So it walks me through saying that this is totally fine. So we don't really have to worry cuz it was suggesting in GitHub that I need to have it as ncosantino.github.io and that's not what I want to have. So, I'm going to keep going here. Uh, and I basically told it like reexplain all of this information, but now you know that my repository is named this. And it does a good job. So, it basically walks me through again, right? It says the site will be accessible at here. And again, I want to call this out because if you note this as we're going through, you'll end up seeing why it makes a lot of mistakes the whole way through. because this isn't where I want my website to be in the end. I want my website to be at codeccommute.com. So, just a note because it takes this and it's basic and you can see it has with nauseentino here. It has it the whole way through all of these instructions and when we're going back and forth at the end of this and it's like kind of going in circles, it really comes back to this being a key point. It basically summarizes what I was saying and then it gives me the instructions again, right? But it's telling me put this back in, right? It's saying replace that href with this. So if I scroll back up this part after here, it's it's keeping that in mind as it's going through, but it's not right. So I'm just trying to remind you as you're going through and following along with me, repeats all the same instructions, right, to publish it, to clone, and then push it up. And then it tells me to go enable this. And if I switch back over to GitHub, I can show you that quickly that on here in the pages part, I had to go turn on uh deploy from a branch. Right? So I had this checked uh from this drop down and then I could pick main. You'll see a little bit later. I had the custom domain stuff and enforce HTTPS. We're not there yet, but I basically added in the deploy from branch and main. And then here's again where it repeats the optional add a deployment script. It's not optional for me though. This is entirely what I'm relying on to make all of this kind of work out of the box. And then optional enhancement custom domain. Again, this is not going to be optional for me. I know I want it at codeccommute.com. So I said the private repository is supposed to have a GitHub actions workflow that builds the site then publishes the resulting content. I've reminded it using SSH just in case it's about to give me the the guidance again and not use that. So, um it's like great. Okay, let's go do this. We go make the SSH key pair. If you're not familiar with how to do this, I tried running this in PowerShell out of the box. It's not really supported. You can probably get tooling to do it, but I just opened up git extensions, launched git bash from there just because I use git extensions for everything. And then I ran this key generation command. The output of that is that you get a private key and a public key. We are going to use the public key on the public facing repository which we'll go through in just a moment. And then we'll use the private key on the private repository as an action like environment variable. So it's a secret that we can pull in and when this workflow runs it can pull that key in to use it. And that's how it's able to actually have access to push up to that other repository. It says go to add this in. So go to settings, deploy keys on the public one. So if I go to settings, deploy keys. So you just go to press the add deploy key and then you can type in your name. And then you're taking the body of that public key and dropping it right in here. You do need to enable allow write access because the entire point of this key is that we can write content into this repository. Next up, we need to go add the same type of thing to the private repository, but it's not going to be a deploy key. we need to use it as an environment variable or a secret. So, we go into the settings and then secrets and variables and then for actions. And you'll notice that I have this gh deploy key and that has the actual private key contents that were generated from that file copied and pasted into here. And then we save that. Now, we get into the YAML file. So, this is going to go into the GitHub/workflows/deploy yml file. If I pull up git extensions here and then we go look at the file tree, you'll see that I have a GitHub folder workflows and then this deploy yml file. So this is going to be modified. So chat GBT gets this wrong. Just a heads up. But we take this script that it has. I basically copied it, pasted it into a deploy yml file in this hierarchy. And then we now have what should be an action to go run. So I basically because I was in the spirit of vibe coding I took it ran it. It didn't work right away because I think I saw net version 8 and went cool let me make it a nine. But I didn't realize a little bit lower we have a net 8 here. So we're going to go down this path together where I mess up a couple things because I'm tweaking things. But then chat GBT is also not getting it right. But overall it's looking like it's in the right direction right. it's giving me. I know that something like this workflow from glancing at it is going to be pretty close because I need to be able to publish to that repository in my GitHub action. So, I feel pretty good about it. This is where I was trying to run the SSH key gen in PowerShell and it reminded me like, hey, like I didn't tell it that I was running it in PowerShell, but it said it looks like that's what you're doing. Yeah, that's what I was doing. So, run it in bash. It works totally fine. It gave me some options there. And then I said when I was running this, so I actually pushed up the code, it says specify a project or solution file. The current working directory does not contain a project or solution file. So if you're noticing on my screen in git extensions right now, you'll notice that I have a solution that is an SLNX. Depending on the time that you're watching this, the SLNX file is sort of the newer solution file. If you're familiar with the older solution file formats, they are ridiculously verbose. There's a ton of XML. They're a nightmare for merge conflicts. The SLNX file is very much reduced. Super nice to work with. But there's a catch. Um, and that is that it doesn't work with some of the tooling that we have like MS Build. I'm sure it will. Um, it just doesn't right now. But the solution file, the normal one would. So it had given me instructions for a solution file but I had changed it to SLNX not really realizing it tells me right that the restore is trying to do this but this is the problem. So it basically tells me you can go use a CS project file. So point at again in git extensions point at this file here instead or it said just use an SLN file. And I'm like no way man I'm not going to go back to using SLN files like not doing that even though you know this project is super or the solution super simple. It only has the one project. I'm like I can't be bothered to do that. So I I asked it again like cuz sometimes when you're working with LLMs they're taking some advice out of some context. So I was trying to challenge it and say like are you sure like basically give me the proof that this doesn't work. And then it did. It said like here's why it doesn't work. It's only Visual Studio feature that filters which projects are visible in the solution explorer. It's not a buildable artifact.NET CLI does not support SLNX files. it repeated the instructions again or like the way that it recommends. At this point in time, I was like, I don't trust this. I got to go check online. So, I was searching around online. Indeed, it is not supported currently. I'm assuming in the future it will be cuz we're not going to be using SLN files. I ended up going with this approach to actually do the CSRO file directly. Let's scroll down a little bit. And I'm basically just giving it output, right? You can see that I told it that it's wrong. I I basically ran PowerShell and I could do a net restore with the SLNX file because I was like, "Aha, like despite all of the information, it works." And it's like, "Yeah, that results misleading." And I'm like, "Oh man, what do you chat GPT knows something that I don't." Okay, so it says that it works because basically uh Visual Studio PowerShell like it's hooking into the Visual Studio environment already. I'm not entirely sure how the sort of the the command infrastructure, the pathing and all that is being sort of supplemented with Visual Studio. I believe it when it's saying this that it's probably leveraging Visual Studio to take advantage of this and it won't work on the command line because this is where I actually went to the internet to search it and confirm with other people saying it's not working. So it's like fine chat GPT you're right let's go ahead with the CSRO approach because I don't want to go generate a solution. So I said option one and basically it gave me a new workflow and you can see that net restore with the croj the build and publish with the croj and then if we keep going it's still like it has net 8 here and net 8 up here but I've already kind of told you I'm using net 9 for mine. Let's keep going. And then I said is there a way to always use the latest net version in the build and deploy? And I asked it this because I ran into that issue that I already pointed out where I changed 8.0 up here to nine, but I didn't change it down here. Right? So, I was trying to say, hey, look, like I know .NET 10's coming out. I don't want to come back to this and have to go change it. I just want to take the latest. So, it said it could. And then it gave me this. This first one is not really the latest. It's the latest for the major version which I don't sorry latest of the uh the major version. So it takes eight and then says give me the latest of that. I was like ah it's not really okay because it's already not taking nine. It's already behind. Clearly it's not going to work for 10. But when it gave me option two and it put this out the front I was like I don't know if I trust that. That doesn't seem like a good move for me. So um it says not recommended poll from the net website dynamically. So anyway, this was its recommendation. So I was like, okay, if I'm going to stick to .NET 9, if I don't want to think about updating both those spots at the same time, can I do something about it? But I kind of gave up on that. I just said, you know what? I'm kind of going down like a bit of a rabbit hole here. Let's just keep moving along. At this point in time, I was able to get a deployment to go onto the public repository. So I'm just going to switch back over to here, and we're going to look at the actions. You'll see that I have a bunch of runs here. This is where it wasn't working, but I think this was the first one that we had where I actually had files go from the private repository all the way over to the public one. But this is the final output at the root. But this is not what was here originally. Just want to give you a heads up that as we're walking through this, what chat GPT has suggested is getting us there, but it's not quite right. So I said my files made it to my repository. How do I view my website? Right? Like if I want to go test the GitHub page, how do I make sure that it worked? So then it's like, okay, you have to go enable it. And it kind of hinted at this earlier. I've already pointed at this screen. So on the GitHub pages screen, right, select deploy from a branch, which I did. Choose main, which I did. And you can pick another branch, by the way. So you can you can have a difference there if you if you prefer. But that's not what I wanted. I just wanted main and the root. Um, and then it says to access your site, you know, go to here, right? So, pretty simple. And then I said code.com is improperly configured. So, I just gave it the output that when I typed in code.com into my custom domain field, it was telling me code.com is improperly configured. And then it said the domain does not resolve to the GitHub pages server. and then gave me this error message to go check. By the way, I can't find this error at all in the GitHub documentation, which is weird. So, I tried searching on GitHub. Doesn't that text doesn't seem to exist somehow, but chat GBT could guide me through it. So, it said set the custom domain in GitHub, which I did not do originally. So, it says to go to navigate to settings, pages. So settings and then pages in the bottom left here. And then you can add a domain. So I added codeccommute.com. When you go to do this, this is where you need to be a little bit more familiar with configuring your DNS. I'm not going to go into detail about doing that. You can see that I do have uh you know, Cloudflare and stuff pulled up. I have my stuff in Cloudflare, but in order to make this work, I needed to go add DNS entries. And it walks you through how to do that. If you're not sure how because it gives you those entries, tell it what you're using for your domain provider. So again, I'm using Cloudflare. You can ask it like I'm using Cloudflare or I'm using GoDaddy or I'm using whatever. How do I go do this? And it will walk you through how. So just ask ChatGpt if you're not sure. Right? So it tells me to go set up these records. Again, if this looks like it's sorcery to you, I would just spend a little bit of time asking chat GBT about this. For me, I've had to do a whole bunch of stuff like this before, but I always have questions when it comes to CloudFlare and proxying because that's a setting that we can change. So, I'm going to scroll a little bit lower. And I said, if I'm using Cloudflare, do I want those records to be proxied or not? So, it says, great question. Thank you, Chad GPT. Cloudflare DNS proxying with GitHub pages. and then walks you through which ones to proxy and which ones not to proxy. Tells you why you shouldn't proxy. And it's because when it's doing the uh validation, when you're proxying, it ends up kind of confusing GitHub and gives me this final recommendation in a chart. So, this is super helpful. But I keep seeing this andino.github.io. And I'm like, man, I'm getting sick of seeing my alias come up here. Not because there's anything wrong with it, but because I want this to be for code commute. Where is it getting this from? Like that's not what I want to show up here. And then I told it the www record seems wrong. So this one up here to me seems wrong. I don't want that to point to anything to do with my personal GitHub. Shouldn't it be the code commute site? And one of the reasons this stuck out to me was not only because it says this, but because I already have a WW record in my DNS settings. So, if I go over to my DNS settings, you can see that I have uh this CNAME www and the content of that is pointing to codemute.com. So, I already had that there. I'm going like, do I have to change this? What's up with that? It's like, you're absolutely right to question it. Thank you, Chat GBT. I appreciate that. um the reality of GitHub pages and custom domains and kind of explains again this pattern that we've seen throughout the chat GPT conversation username.github.io/thereository name. But then it says when you're using this custom domain name, you no longer need to use this. Which I needed to remember as we're going through this because some of the content that I pointed out to you in the beginning of this, it was telling me, you know, to use the slash repository name. So when I was going through this, I kept trying to like vibe my way through it and I could have saved myself a little bit more time, but it kind of, you know, recclarifies for me how to go do this again. It wants me to use DNS only for everything. You'll notice if you're watching on my Cloudflare screen, I do have that www redirect as proxying. That's what the orange cloud means. So, we come back to this later. And proxying is okay to use with the www redirect. Now, we go back to the pages part specifically on here. Actually, it would be back to here. So, I have my custom domain added. It does the DNS check. Um, at this point too, I had to wait for my certificates to be completely finished and then I can enforce HTTPS as well. And that means if someone doesn't type HTTPS, we can just make sure that happens. It's always enforced. So, it keeps trying to like help me understand why or when I should be proxying with Cloudflare and gives me another output. At this point, I go to visitcodecomute.com and I'm just getting this 404 file not found. Great. Okay. So, at least I know something's happened because code.com used to go to my code commute YouTube channel, which by the way, if you have not checked that out, please go check it out. Subscribe. I do vlog entries where when I'm driving to and from work or sometimes I'm sitting right here, I make a vlog entry on software engineering topics. And to be honest, I wanted to make a code commute site so that people could submit their questions directly on the website because that channel is all driven by user submissions. So if you have questions about software engineering in general, not just how to program in C andnet, go to code commute, go to codemute.com when this is all up and running and you can submit your questions there. If it's still not up and running by the time you're watching this, just send me a message on any dev leader social media account. Ask your software engineering question and I will make a video on code commute. Let's continue along. It says the site configured at this address does not contain the requested file. So this is all um all of this is from visiting the page. It's just the not found page for GitHub pages when I was navigating to it. So it's telling me it's not working. the thank you chatgbt says a likely cause is that I don't have my index html file at the root and it was right. So if we go back to this now this is the final result where this is working and you'll notice I'm at the root of my repository. You can see the index html file here. What used to be here is a folder. So nothing else except a folder that said code kimmy websites and that was it. I agree with what it's saying. We need to have an index html file at the root. We have a folder. It's not going to be okay. Then it's like, here's how to go correct your deploy script. So, no problem. I go back into the deploy script, right? We have to go change this stuff here. So, no worries. Let's go do that. Spoiler alert, if you're paying close attention, I know that was on the screen quickly. my command already looks different because this is where it goes down a nasty rabbit hole and I start to get frustrated with chat GPT. So, it's explaining why this copy is going to work and I'm going great. Thank you so much chat GPT. Let me just keep copying and pasting this. It's talking about case sensitivity blah blah blah. We go make this change and now I tell it, look man, I just ran this again. So I pushed up by private repository changes. The public repository gets this folder structure /code community- website-public which is also the name of the repository. So there's a folder and then index html. And it's like perfect. That's the correct structure. But it's not cuz we know that we need this at the root. It basically blabbed again about all this stuff and I just kept waiting for it to finish and then I said, "No, no, no, no. Index html is not at the root of the repository. It's within a folder." Trying to tell it. You're you're misunderstanding what I'm saying. I told you that it's within a subfolder. We both know that's not going to work because index html needs to be at the root. Okay. Ah, that's the core issue. Thanks for clarifying. Okay, so I'm I'm going at this point. I'm like, great. Finally, it understands. Let's rock and roll. So, solutions output the contents of WW root directly to the repo route. I'm like, that makes sense. That's what we want. Because the WW root folder should have index html. Excellent. So, it gives me an update, right? It tells me to go change this line. And it's pay close attention here. We see that it's going from a star to a dot. And I'm going, really? That's That's all that's going to change it. Okay, I'm starting to feel a little bit suspicious, but we're vibe coding here, so let's keep going. So, I make the change and I push it up. And then I say when I publish my private repo, it deletes the CNAME. So, I noticed while I was waiting for my certificate to get validated again on this page here, the CNAME file went away from my root and it was undoing my custom domain. So I was like, "Oh no, every time I push up a change to my website now, I have to go redo this. There's no way." So turns out that's pretty simple. And sorry that I'm jumping around a little bit here. This is just how it happened when I was building the site. So basically to go make sure that the custom domain can stay configured, all that we need to do is add this extra step in, right? So we just have a name for the step and then we're just going to put in the name of the domain and write that into a CNAME file at the root. So if I jump back in the repository, you'll see that there's this CNAME file at the root. This happens because we have it as a build step. If I click it, you'll just see that it has the domain code.com. If I don't have this part in my build or my deployment script, what ends up happening is it undoes the custom domain. So, we need to have this if we want to keep that custom domain. It gave me another option to like back it up and restore it, but this is just way more straightforward and this seems way more convoluted and we don't have to really worry about the contents of that file. We just need to write code.com into it. After I've done that, I've I went and actually checked it didn't fix the index html issue. So, I said the index html file is still not at the root. And I tried to draw out the structure. So I said the root and then we have a code commute website public folder and then within that we have index html and then it said thanks for the clarification and then it understood the structure. So that's good. I'm like okay we're on the same page surely now it will get it right. So it says based on the problem like here's what we're going to change and then it says if you see this uh structure after cloning and deploying then you've accidentally copied the site into a subfolder and that's I mean that is what's happening. This is the repository this is the folder that it was creating and then we have index html within that. So I'm like okay it's actually getting this like this is good news for us because it's going to finally fix it. So double check this line. Confirm after the fix, right? That we should see this type of structure because this is what we want. If you look on my screen, we do have index html at the root, right? Uh we have a CSS folder. We have a framework like underscore framework folder. We have the CNAME file. This is the structure that we want to have. So it it seems to pick up on what it wants to get to. And I said, I'm just going to give you the sort of the deploy script I have and like instead of you trying to tell me to piece these things together, here's the whole script again, you just give me the answer, right? We're we're vibing here for real. It's like cool. Here's the corrected version and it gives me a new one. But if we pay attention, like it's not changing this. This is the same as it has been. So, we keep going. And then I said, "How does this fix the fact that we're creating a subfolder?" Because I wanted to explain to me because what you can't tell from just reading this chat and me kind of going through this quickly is that when I looked at the diff in git, I noticed that it didn't change anything to do with the copying. So, it was confident that it gave me a change, but there was no change to copying. So therefore, it's impossible that it could have corrected the copying problem. So great followup. At this point, I'm starting to go, "Oh crap, I think Chat GPT is going down like one of these, you know, these rabbit holes where you have to like create a new chat or something because it's just not working." And in my head, I really wanted to use this whole chat for this video. So it's like, "Oh no, we know I understand the issue. Like, we're going to copy the contents, right? correct command used in the fixed workflow is this one. We know it's not correct, though. This is the same one that it's been giving me over and over. So, let's just scroll through because it's kind of wasting its breath. I said, "You didn't change the copy step, though." And then my mistake. I gave it a clone part because the clone and the copy were identical. I copied the wrong part. So, this is me making a mistake. I said, "You didn't change the copy stuff and gave it a clone." And it's like, "Oh, you're right." But again, this is a bit of a waste of conversation this part because it's just talking about the cloning. So, we'll scroll through that. So, I said, let me correct myself. You didn't change the cloning and you didn't change the copying. So, like there is nothing different about the last change you gave me that wasn't working and this new one. So, thanks for calling that out. You're absolutely right to push on this. I'm sure many of you have run into this kind of thing with chat GPT or other LLMs where it's just like now we're going to start to go in circles here. So clarifying the real concern, right? We know what the real concern is. We don't have index html at the root. Tells me to update the copy step again. Validate the file structure. So at this point it's going to give me another part to add into the script to validate the structure. Okay. So I'm thinking cool. It just told me how to update this stuff. It's still not right. I know that it's not right because it didn't actually change anything, but I was like, you know what? Let's vibe code this. Let's get this part into the the deployment script because that way I can give it the feedback. I can tell it here's the information you wanted. Now you can really see what's happening. I said, I'm going to commit the one you gave me and give you the output because then you can debug it yourself. This is where I'm getting a little sassy with it. you didn't change anything to do with index html being put into a subfolder. It's kind of just what I told you. So it's like perfect, that's a smart move. It's not a smart move. This is a complete waste of time because I know how to fix this already. I'm just trying to get chat GPT to understand it. So anyway, I go push it up and then this is the output that I get, right? So we see the CNAME there and then we have this folder. We don't want this folder there. we want the stuff that's inside of that folder at the root with the CNAME. It's like, thanks. That output confirms exactly what you suspected. I'm like, thank you. Thank you so much. Now, we're going to get to it. I was too hopeful. Um, it starts talking about how net publish, again, this is all kind of off the rails here, so I want to kind of move through it quickly. It's talking about net publish not doing the right thing. Then it's like the real fix is this. And basically what it does is it goes up a directory. What we're trying to do is copy the one more directory down's contents into the root. Instead, it goes up one more directory to copy those contents. It's the exact opposite direction. It gives me these instructions. And I think my git commit, I don't know if I can see it in the the history. I think this is the commit where I was telling chat GPT. This is just back and forth. And at this point I'm just doing it so that I can get the output to provide it. So instead of arguing with it because clearly that's not working, let me just give it the output. And then I show it. We have CNAME, we have this, we have more files, we have WW root. So we went up a directory. And then it says boom. This confirms everything. You're copying the entire blazer publish output which includes it. So it's right. like it tells me exactly what's happening, but it doesn't fix it. It keeps giving me like this part here is what we had before between this one and two messages back. It has just undone it. So, it's not helpful at all. So, I'm going to scroll down a little bit lower. I said this went the exact opposite direction. My structure now looks like this. I said, please note there is no index HTML present in the route. I spent I think most of my time for the record was going back and forth on this. I know how to fix it. I just want to tell ChatGBT how to do it. So it keeps giving me recommendations and I think this is the point where I start yelling at it. So I don't know if Chad GBT understands all caps, but I said all that we did was undo the last change which was still wrong. Right? It wasn't right before you gave me a new one and then you told me to go back. It's not it's not working. This is really where the vibe coding part's breaking down because I know how to fix this. I need to on the copy step go in one more directory to copy from there instead of doing the opposite going up a directory. It's not not hard, but I'm apparently not doing a good enough job articulating that to chat GBT. It keeps trying to reexlain itself the correct working fix. Like it's not by the way to guarantee this works. It's going to give me the whole thing again. Okay. Then I said, you know, this still won't work because you didn't change anything to do with copying. So I'm not going to go through it and waste your time. But basically, as I've been telling you, I know that the copy step is the wrong thing. I know that we need to copy one folder lower. It didn't even touch that. It won't fix it. So it tells me, you're absolutely right. I appreciate your patience. There is no patience left anymore at this point in time. Tries to keep explaining it. And then let's go a little lower to my response. And I just said, let me make this very simple for you. The private repository is putting this folder, this one here, at the root of the public repository. And I said, I need you to copy the contents of that folder. We need to go one level down. Copy the contents of that to the root of the public one. I said, index html is there within this folder. So now it's like crystal clear. Thanks for spelling it out. Chat GPT. Is it actually crystal clear? Let's find out. So update your copy step. You can see that what it's done now has WW root and then it has this folder. At this point, it actually worked. So that's this commit here. If I go uh here, this one, I changed the deploy script to have this change in it. You can see that we instead of having dot here, we just went one directory in. That's that's all we had to do the whole time. And that was I don't know that was forever. I think this whole thing took me roughly an hour to do, but most of the time was literally spent on this part. So I said, great, the index html is now at the root. So if I go back to here, I go to the public one. I now have index html here. So that's great. Then I said I still get a 404 when I'm visiting this. This is going to bring us back to that href that we saw in the beginning, right? I can see that I'm getting a 404 because it's going to code.com and then it's trying to go within here. My website is configured to be in this folder because of what it told me to do earlier on. Then it's like, oh, here's why this is happening. This part that it told me to do in the beginning, we have to go put this back. So, if I check get extensions, you can see I have this fix the root one. And all that I did was I undid that change to have a slash again. So, pretty simple change. Again, I'm vibe coding it, trying to give it the errors and have it tell me what to do. That one's a pretty simple one. Now, I said to it, I see a loading spinner that's not rotating. So, what had happened was I go to code.com. I get a loading spinner. So, we know something's there now because we haven't had this happen before. It's been 404s and whatever else. Now, we see a loading spinner, but the loading spinner doesn't rotate and nothing happens. But when I check the dev console, I see failed to load resource. The server responded with a status of 404. This is interesting because for me, I actually because I've been vibe coding through this. Almost everything that it was telling me to do, I was very familiar with, but I have never actually deployed a Blazer website this way. So, I didn't know the answer to this one. I didn't know why we were seeing this. But it's like, you're so close. It's a very classic Blazer web assembly issue. Okay. Spinner shows never rotates. Console shows 404s for these files. Most likely cause is this this nojekal file. And I'm like, man, I don't know why, but it says GitHub pages uses Jekal by default, which ignores files and folders that start with an underscore. The entire framework is just not included when it's going to the public site. Like you can see on my repository I have an underscore framework in the root but when it's going to load the page it actually ignores underscore framework. I was kind of like scrolling through this pretty quick when it told me. So I said why does it make a difference? It actually explained it already but I just you know was reading too quick I guess. And it says that basically the nojekal file tells it to ignore the Jackekal sort of uh operations instead of so it won't actually ignore underscore framework folders or underscore content. That's actually what we want and it's specifically for GitHub pages. So I said okay that's cool. It's a simple change. We just have to add the one extra part to our deployment script. So add the node jackal to disable right. So, we just touch this file, just make sure it exists. And I said, let's try it out. And at that point, it was a success. That's where we get to having this page load. This is just the Blazer sample web application. Beyond this, it's really just small details. WW was not supported, and this is more of a Cloudflare thing. In my situation, I just needed to set up a DNS record, which I already had to go from www to just code.com. But I also needed a forward action. So, just to quickly show you in case you're in Cloudflare as well, I needed to do this. So, I made a new rule and then I had to match www.codemute.com code.com as the host name and then do a redirect to the httpscodecomute.com site with a 301. Doing this made it so that if you go to www.codecommute.com it just goes to httpscodeccomute.com. That was the end of that one and I think that's the end of the chat and I think I wanted to confirm with it why I need both the DNS change and the Cloudflare page rules because historically I've had redirects work without having to use this redirect page rule just using the DNS has to do with how theerts are handled. Depending on how you're managing your searchs, you can do different things here. But basically, the most simple thing was just to have GitHub pages manage theert for code.com. And then if I do the DNS entry and the redirect together, then it will still be managed by um GitHub pages. It I don't need a separate C for the www version. So that's in this TLDDR. It was kind of giving me some variations of what you could do. And then again, because I'm vibe coding it, I said, "Hey, there's this box that says preserve query string. We need it on because if you have any sort of query parameters after the URL, it would just forward you to the HTTPS version without www and it would drop off the query param." So, it goes on and explains it really well. I wanted to include this because if you're someone going through this kind of stuff, say you're using Cloudflare, you're using something else, if you just don't know, just ask it, right? It seems like the wealth of like and body of knowledge that it can pull from is vast enough that like if you want to talk about what a checkbox does on a screen somewhere, just give it some context and it should be able to do a good job of explaining why. I thought that was a good one to include in here. And and something else you could do, if I go back to rules, if I say create rule, there's different variations. Sorry, this is being blocked by this uh my smaller resolution right now. You could say like, "I don't know which one to pick." And then have it give you some advice on that. So, question it along the way if you're not really sure. But that's essentially the end of this video. Like I said, what we're able to do now is we have this beautiful empty blazer website. You can see that it totally works, right? So, that's awesome. In the rest of this video series, what I will be doing is vibe coding the features of code commute. I'm going to be demonstrating how we can do that in cursor, how we can use VS Code, how we can use Visual Studio, how we can use GitHub Copilot with pull requests, and I can walk away and let it go fix and implement features for me. So, thank you so much for watching this one, and please stay tuned for the rest of this where we go change code.com into an actual website that's not a counter and a weather page. I'll see you next time. Take care.