The RIGHT Way to Deploy A Google AI Studio Website (Most People Do This Wrong)

Hey, I'm Caleb, and in this video, I'll teach you exactly how to deploy your Google AI Studio website correctly, so that way it's live on the internet for anyone to visit. Building a website in AI Studio is the easy part. The problem is, once it's built, most people have no idea how to actually get it online, and that's why I'm here to help. So, here's what we'll do next in this video. First, we'll save your project online, so it's ready to deploy, then connect it to a hosting platform that handles the entire deployment for you, which makes the process super easy. We'll also make sure your AI features continue functioning after deployment, and connect a real domain to your website. By the end of this video, your AI Studio website will be fully live, and any updates you make in AI Studio will automatically show up on your site without you having to touch a thing. Now, before we can even begin setting anything up, we need somewhere to host your website. You have it built in AI Studio, but how do you actually get it online? Well, you need to host it somewhere. Hosting is basically renting space on a server that runs 24/7, so your website can stay online for people to visit. And the hosting provider that I personally recommend for AI Studio beginners is Hostinger. Hostinger connects directly to your project, so deployment is automatic. They support the technology that AI Studio websites need to function properly, and the pricing is very affordable for this kind of setup. So, to begin and get an extra discount on your hosting plan, go to this link on screen right here, or click the first link in the video description. Using that link will take you to the correct page for the setup, and make sure you're getting the best deal available. And once you go to that link, you'll be brought to this page right here. Click on start now. And that'll bring you down to the plan options. You'll see a few different plans here, but for this video, we're looking for the business plan. If I scroll down right here, you'll see that it includes five managed Node.js web apps. This is what's going to allow us to deploy AI Studio websites, so we need this feature. So, under the business plan, click on choose plan. And then on this page right here, start by choosing your billing period. By default, this will be set to 48 months, which is a pretty long-term commitment. You can switch this from 48 months to 24 months, 12-month, and 1-month plans as well. For this video, I'll go with the 12-month option. This will still get me plenty of savings and a free domain for the first year. Then below this, you can choose to search for your domain name. I'll skip this for now and handle it a little bit later on in the video. And then below this, you'll see an option for Hostinger reach. I'm going to skip this as well. Now, let's scroll up to the top of the page here. You can review your order here on the right, and don't forget to use the first link in the video description to get an additional 10% off here. Once you're happy with everything here, click on continue. And then here, you'll need to register for a Hostinger account. Enter your email address here, and then create a password. Click on register. And then once you get to this screen right here, you'll need to enter your billing address and your payment information. Go ahead and do that, then go through the checkout process, and once you're done, I'll meet you at the next step. From here, click on get started. And then once you're done with the checkout process, you'll be brought here to the Hostinger onboarding. For the first question here, I'll choose myself or my business. Then click next. Click on create a website, and next again. Here, you'll be asked, "How do you want to build your website?" You'll see options for WordPress, the Hostinger website builder, and Horizons. And then below this, you'll see an option to deploy a Node.js web app. This is the option that we need. However, before we click on this, we need to get our project ready first. So, let's hop over to Google AI Studio. I'm going to open up my website in Google AI Studio right here. And this website is fully ready to go, so I'm ready to publish it online. To begin this process, I'm going to go to the top right here and click on this gear icon. Then from here, I'm going to click on this arrow and go all the way to the right. I'm looking for GitHub right here. Click on GitHub, then click on sign in to GitHub to continue. From here, you'll either need to sign in to your existing GitHub account or create a new one if you're new to this. From here, I'm going to scroll down, and then I'll click on create an account. I'll scroll down here, then I'm going to enter my email address, and create a password. Scroll down to create a username. Choose your country or region, then go to the bottom here and click on create account. Right here, you may have a code that's sent to your email address, so go ahead and check the inbox for the email listed right here, and paste the code in back over here. Then you'll see this message that says your account was created successfully. So, go ahead and enter your email address or username, and then enter your password as well. Click on sign in. Then we'll scroll to the bottom here, and then click on install and authorize. And then after that, you should be fully signed in to your GitHub account, and everything should be synced up with Google AI Studio. Now, on the right-hand side, start by entering a repository name. This is basically where your website will be saved on GitHub. So, for this, I'm going to type something that I can easily remember. I'll go with my portfolio website. And for the description, I'll type repository for my Google AI Studio website. For the visibility, I'll leave this set to private. Once you're done here, go down and click on create GitHub repository. Then here, click on stage and commit all changes. And now your Google AI Studio website is available on GitHub. Let's go ahead and switch back over to Hostinger. Okay, and now with that done, go ahead and click on Node.js web app. And here, you can type in your domain name. For my website, I'll go with medicsportfoliowebsite.com. And as you can see here, this will be free for the first year. So, I'll click on this, then go down and click on next. Then right here, you'll need to enter your personal information to register the domain. Go ahead and confirm that everything is correct on your screen, then at the bottom, find the register button and go ahead and click on this. And then Hostinger is going to register your domain. Then from here, click on connect with GitHub. Go ahead and scroll down the page, then click on install and authorize. And then from here, you'll be looking for the repository that you just created. In this case, for me, it's my portfolio website. Go ahead and click on your repository, then click on continue. All right, and on this screen here, go for the framework preset, and in some cases, it may automatically select Express. Click on this, and scroll down to the bottom, and you'll find Vite here. Go ahead and click on this. And then after you've done that, scroll to the bottom here and find your environment variables. If your AI Studio website uses any AI features at all, things like a chatbot, image generation, or any kind of analysis tool, the features will not work after deployment unless we add an API key. So, we'll add in an API key here into the environment variables. Start by going back over to AI Studio. Go to the top left here and click on back to start. Click on the back button again. Click on dashboard. And then here, you'll see your API keys. You should have a default key listed right here. However, if you don't have one, you can go to the top right here and click on create API key. Once you have your key made, go down and click on the copy button right here. With that done, switch back over to Hostinger. Then under environment variables, click on add. And this is where we'll paste in that API key. Now, here's an important thing to know. Different AI Studio templates look for different variable names in the code. So, instead of guessing which one your project uses, we're just going to add the same key under the three most common names. That way, you're covered no matter what. For the first one here, go ahead and name this Gemini _ API _ key. And then under value, go ahead and paste in your key here. Then click on add more. And for the next name here, we'll name this Google _ API _ key, and paste in the same key again. Then click on add more. And for the last one here, we'll name this Vite _ Gemini _ API _ key. Then paste in the same key again. Then once all three are in, go down and click on finish. From here, go ahead and click on deploy. Hostinger will now build and deploy your website. Give this process a minute or two to finish, and then it will be live. Okay, now the deployment has officially completed. To view your website, click on this link right here. And as you can see right here, everything seems to be functioning properly, which is great. However, if you see a blank white page here, don't panic. This is actually a really common issue and it has nothing to do with Hostinger. The problem is a setting inside the project itself. So, let me quickly show you how to fix this. Start by going back over to Google AI Studio. Then let's go back here. Click on build. Click on your apps. And then find the website that you just deployed. Click into it. And then here at the bottom on the left, you want to enter a prompt. I'm going to leave this prompt in the video description for you to copy and paste. All this does is update a small configuration setting so your site loads correctly after deployment. So, if you're running into that blank white page issue after deployment, go ahead and enter this prompt right here. And for any other changes that you make to your Google AI Studio website, those will automatically be synced up with your Hostinger account. Let me show you what I mean. So, down here let's say that I want to change up the color palette on my website. So, here I'm going to type, let's change the color palette to a warmer look. Then I'll send this prompt here. And then I'll wait for the changes to be made. All right, now those changes to my website have been made here. To sync those up with our actual deployment on Hostinger, go to the top right and click on the gear icon. Click on the arrow to go over to GitHub. Click on GitHub here. And here you're going to see all the files that were changed. Go down and click on stage and commit all changes. It's going to upload your changes to GitHub. And now let's go ahead and switch back over to the deployed website. Let's go ahead and give those changes a couple minutes to update and sync up with Hostinger. And then after a few minutes here, click on the refresh button. And you'll see the website is updated in real time. You make the changes in AI Studio, push the changes to GitHub, and it shows up on your live site. And then if you see this default website title here at the top within your browser tab, this is something that you also have to change within Google AI Studio. You'll just want to tell AI Studio what you want your website title to be and request the change here and then commit it to GitHub just like I showed you. Now let's switch back over to Hostinger. Then go down here. Click on go to dashboard. And then after that, you'll be brought into your Hostinger dashboard. Right here you'll find your website link. You can open up your environment variables and settings again right here. You'll see some information regarding the status of your deployment. Below that, you'll see your current deployment. You'll find some of your essential settings right here. And then on the right, you'll see some performance information as well. And then on the left side, you'll find some other tabs. You have your dashboard, deployments, runtime logs, your hosting plan and performance, analytics information. You'll find your security settings and domain settings. Then you have your files, databases, and advanced settings as well. And then if you ever need any help finding something specific here within your dashboard, just go to the top right and click on ask AI. Nicely done. Your Google AI Studio website is now fully live on a real domain. And if you haven't signed up for your hosting plan just yet, don't forget to go to this link on screen right here or click the first link in the video description. Using that link will make sure you're getting the lowest pricing available. Thank you for watching this video. If you found it helpful, make sure to leave a like on it and subscribe for more tutorials in the future. With that said, I'll see you in the next video.