In this instructional video Shaun Whynacht walks non‑developers through the complete workflow for taking a site built in Google AI Studio and publishing it on a traditional web host. He starts by recommending linking the Studio project to a free GitHub repository, then shows how to stage and commit changes from Studio to GitHub. After downloading the repository as a zip file, he demonstrates using the Mac terminal (or equivalent command prompt) to navigate to the project folder, run `npm install` to fetch dependencies, and execute `npm run build` to generate a production‑ready `dist` folder. Shaun then explains how to upload the contents of `dist` to a host (using SiteGround as an example), create and place a required `.htaccess` file, and finally clear the host’s cache to ensure the live site reflects the new files. Throughout, he offers practical tips, notes common pitfalls (such as trying to upload the raw repo without building), and invites viewers to ask questions or suggest alternative methods in the comments.
Chapters
Hey, what's up everyone? Now this video, I'm going to show you how you can take a website that you developed in Google AI Studio and actually publish it on your web hosting. Now this took some time for me to learn what needed to be done, and I thought might as well put it in a video. I'm not a developer by any means, but this Vibe Coding has allowed me to build out some fairly robust sites.. And really the hiccup has been, how do I take it from, as you see here, Google AI Studio and get it to a live site? So these are what you're going to need. You're going to need obviously Google AI Studio where you build up the site. I'd recommend that you use GitHub. It's free, sign up for it and you can connect your Google AI Studio to GitHub. So once you've done that, what we're going to be doing is we're going to be passing the files over to GitHub. Then we're going to download it and use terminal. Now I'm on a Mac. So you know, you'd have to use, I think it's like command prompt or something, the commands will be the same on a PC. But if you're using a Mac, this will make a lot more sense to you as we go through this. Alright, so here's what we got to do. Let's just assume the site is good to go. And we're ready to do it. And we've got it all connected. I'm not going to go through how to connect it to GitHub, you could watch another video on that, just Google how to do that. So we're gonna go to share, And we're going to move over here to GitHub. And it's going to come up and it's going to tell us if there's anything that needs to commit. Okay, so that's what it means to do is when there's things that you need to stage and commit, it's passing any of the changes from this over to GitHub. So we're going to go here, we're going to say stage and commit. And it's going to sync all those changes over to the account just like that. Perfect. Now, you may have done this and you say, hey, there's other ways to do it. Great. I think there's multiple ways to do something. But this I found is a really good flow. So I'm going to go into GitHub here. Now how GitHub works, just to give you an idea, because this is probably a very basic type of video, and you've probably not done much of this before, or any of it, is you create repositories. And repository is just like a folder. Just think of it like Google, like a Google Drive or Dropbox. And when it commits the files, it actually passes it over here. So here's the website that we're working on, we're going to click on that. And there's all the files that it passed over, right? They're right here. Don't get caught up in what you're seeing here. This is the only thing you're going to need to look for is the code button. You're going to go here and we're going to download that zip. And now we're going to unzip it on our computer. And I'm just going to pull it over here just from the other screen. So here are the files that are in here. Now you may say, okay, can I just upload this now to my web host? Because it looks like there's index files in here. That's what I thought. And that's where I went wrong. And it took me down a rabbit hole to figure out how do I actually do this? So what we need to do is we need to use terminal because we need to convert this into files that will actually work on the web host. So I'm just going to go back a step here on this one. I'm going to move this down here. I'm going to go grab terminal. And if you don't know how to get the terminal, What we're going to do is we can either, um, no, not do that. We're going to go Command Space and it brings up search. So we're going to look for terminal on our computer and it's that little black box that's here. All right. So hopefully you can see that. Now these are the commands that you're going to need to do. We're going to go cd, that's change directory. And we want to have the terminal go into the directory where those files were there. So here's the downloads. That's the one that just came in. This is really cool because you can just drag the folder over here and it actually changes that. All right. So we're going to go just like that. All right. Next thing we're going to need to do is we're going to need to do a command that's called npm install. Now when I hit enter, there's going to be some stuff happening on the screen, just the whole like wizardry of, of, of tech that happens there. So it does a bunch of stuff and installs the things that need to happen in the background. Now, I think that there is— check the comments below with this video on YouTube, because after this, I'm going to look this up, but I think I might have needed to install something on the computer to make this work. But just check the video down below. It's a free thing. You just go to the website, I'll put the link there to make it work for you. Alright, so now what we're going to do here is we're going to do npm run build. That's all you need to do. npm run build, enter. Now it's going to go and it's going to do some stuff. It's going to build for production, right? Awesome. Now the only thing you're going to notice different, I'm gonna move this out of the way. We come back to this folder in here. There is now a dist folder. This is where you put files on your computer. So not only computer, on your web host. So we're going to go up to our web host, we're using SiteGround for this, this client, and we're going to go into the file manager. And it doesn't matter where you put it. If you put it in your, your main root, it's going to overwrite your site. In this case, we just made a v2 for this client site here. And then we're going to see these are the files. So I'm going to go ahead and I'm going to delete the two that are already in there. And now what we're going to do is we're going to take these two here and I'm just going to drag them from here over top. Now, if you went— now you're going to notice there's a.htaccess file here, um, that you don't see in those folders that are there. This is something that needs to be on the site for it to work. If you didn't have that there, it's not going to work. Okay. So What you can do is you can go back to your Google, uh, Studio and say, hey, what should my.htaccess file be on there? So in order to do that, all I did was I went new file, put.htaccess. It has to be a.htaccess. And then I went to edit it. And basically this is what it gave me to put in there. All right. So we're going to save that. Now, if you are overwriting something that's there, no matter what hosting you're on, you should go and clear the cache. This was another thing that, that I ran into because I put the files on there and I'm like, why is this not working? Or I made changes and put new files and again, it didn't have the new updates. So I'm going to come back to my cPanel control panel of your web host and you're going to look for something. And in SiteGround, there's one called speed. So we're going to go into caching.. And we're going to come down here and already got the caching turned off on the v2, but we're going to go to the dynamic cache and we're going to flush it, right? Just going to flush it right out. And now I should, fingers crossed, be able to go to this. And now the site will load just like it did in Google Studio as a fully live functioning website. So again, if you have any questions, This is how I made it work. You may know a better way to do that. Leave a comment, questions in below. Uh, if there's anything that's different while I go to publish this, I'll put it in the comments below the video. So thank you very much for watching this, and hopefully this helps you in your development journey.
