I RANKED on Google INSTANTLY with This AI Tech Stack!

- We have created a website with placeholder images taken from unsplash. This is about the limit of what Bolt can do. We need to build a full website. - We are learning how to use GitHub, which is an absolute nightmare to learn, but once you have learned it, it's so worth it. - A netlify domain will publish the changes to your website instantly, so it means they can add continuously new content, new css, new features, new whatever the hell they want to their websites using Ada. - Speaker A and his team are building a website which is SEO optimized, using Astro Write Down and ADA Sonnet. They are adding pages, adding source sources, and checking the DNS connection. - Speaker A tells Ada how to add a page, change the homepage, add a few more images, and improve the SEO of the website. The homepage doesn't have an SVG favicon. - Speaker A talks about how to build a website using APIs in a video after this video. The video is going to show how to generate a website that will rank on Google.

Welcome back to the second part of this series of videos that we're doing. This is the blog as you can see it now, or the website that we've built so far with Bolt. To be honest with you, this is about the limit of what Bolt can do. Beyond this. What it starts to do is just again because of context window, it starts to forget, it starts to delete, it starts to replace things with placeholder code, etc. Etc. Now, just for context, all that we've done since yesterday's video is I just said create five individual blog posts. Now, if you're curious if you want to make a website like this, we're making loads and loads of videos about how to use Bolt new and also now other technology to continue the building process. But this is what we've created. We've created a website with placeholder images taken from unsplash. This is basically the website. So we've got destinations for Amalfi experiences, cuisine, we've got a gallery, and then we've got a blog. Now, as far as Google knows, this is a perfectly legitimate website, right? It has no other knowledge. So it just assumes, just based on like how it views websites, that this is a website that has been properly made, etc. Now one thing I can see that's missing throughout is actually internal links. I did say in the original Bolt prompt make sure to internally link, but it obviously just completely ignored that. So how can we take this now from bulk into something where we can really start to build a full website? So on the top here we can press open in Stackblitz normally, although not at the moment, this isn't working for some reason. Normally what you can do is you can press create repository and then create and then that already exists. So we'll just create one of the two on the end for some reason. I don't know why this is no longer working. This used to be really, really easy and cool, but yeah, so what you can do instead is you can download the project here and then show it in folder and then we can extract all because it's zipped obviously. So we'll extract it and then we'll go back one post and then right click show more options because I'm on Windows 11 and then open with code. So what this does is it opens it on your local machine. So you should be able to do MPX Astro Build. Okay, there we go. I did NPM Astro Build and what that did was it built the application locally and then NPM run dev should. If I'm not mistaken, which I'm never mistaken, as you guys know, should. Okay, so now we have a local version of our website, right? It's the same thing. This is just a netlify app version which is live to the Internet. If I sent this to my producer now, he could open it on his computer and view on his computer. The local version is my version. If I send that link to him, it will not open because unless he also has the same server running on the same port, which is 4321. So that was a little bit of useless information. But yeah, just so you know, that's how this actually works. So what we can now do is we can use something called Ada. So I'm just going to go on Google, type in Ada Chat. One thing actually that we have to do. I want you to open Visual Studio code, but right click it and run it as administrator. Now, ADA requires administrative privileges, so that's why we have to do that. We're going to open it up again, just do NPM run dev, just to make sure it's working. Okay, perfect. Now what we're going to do is we're going to do ADA Sonnet. Now you might have to install ADA first, so you can do PIP install, I believe ADA Chat with a hyphen, but again, just read the documentation. Not really going to go into this right now on how to install ADA, etc. But it should just be something like, yeah, it's this basically. So just install it, export your API key, and then you should be able to just do Ada Sonnet like that. And that will start ADA Chat. So we'll say yes. So it will now start a GitHub repo. We have Claude Haiq and 3.5 sonnet and we're ready to go. So we're going to do slash add and then I'm just going to add SRC if I can. No. Okay. So yeah, apparently you need to get add. I didn't realize that, but I guess that makes sense because it didn't have a copy of what I was working on. So we'll do add here. And now when I type something, you'll see these pop up. This is kind of what I was trying to get it to do before. Now I wonder if I can just add source. Yes, I can. Beautiful. So what I've done there is I've added everything inside the source folder. So we've got pages here. I should have actually probably just added pages, to be honest with you, but that's okay. So what I'M going to do is right. I'm going to add another one here. So new terminal. And then I'll do NPM run dev which will start it. And then every time ADA changes something, we'll be able to see the changes immediately here on the local host. So let's just say for example, code. Wait, I'll do Ask first. I recommend giving context to ADA first. So ask. I am going to ask you to create MarkMD files which represent pages on the website, which will help improve the ranking of this website. Please read all of the files. Oh, sorry. Astro files. I hate the terminal. Why can't I just click there? Which represent pages on this website, which will help the SEO and ranking of the website. Before starting, I want you to understand that I want you to internally link using the pages that exist. If you don't know where this list of unsplashed images came from, please watch part one of this video and also use this list of images whenever adding a new image. Okay, understood. I'll create Astro files that help you improve the SEO ranking website. I'll make sure to use internal linking and existing pages and incorporate images from the FIDA list. Let me know when you're ready to start creating a specific page. So now you can go page by page and start creating content. So I'll say code, add a new the Astro page to Cuisine. Make sure to add it to the index page so it can be clicked and improve its ranking from there. What should we say? Make it about risotto. Okay, so we have here Risotto al lemone. Risotto I frutti dimare, Risotto al pescator. It's literally perfect. The fact that you can just do this, it's so interesting to me. So the really cool thing about the main difference between ADA and something like Bolt is ada's not just going to delete your old content. Okay? It's just going to continue making content. It just adds things. It will not take things away, which is exactly what you need when you're kind of trying to make an entire website. So we'll say, yes, create a new file. We've now created a new file. Perfect. That's also been committed. So let me show you something really cool here, guys. Now let's go on here. No, here. And then we'll go on Cuisine. There should be a new page. Risotto. We'll click here. This has now been built by Ada, not by Bolt. Okay. That was completely built by Ada. Now let me show you something really, really cool. Okay, what we're going to do is let's pretend from the last video we didn't actually connect our URL. But you know, it's very, very easy to just set up a custom domain. You've got to wait 10, 15 minutes for the HTTPs and then you secure it. And then what we can do is if I go on site configuration, continuous deployment. Okay, now let me just check something here because I'm not actually sure where the GitHub repo was created. Should be okay. I haven't actually committed it yet, as far as I know. That's fine, we'll do that later. Let's just make a few more pages first. But what I was going to show you was you can actually push content from Ada directly to your live website. So tinyhomeshub, IO or whatever it might be using this GitHub system. Actually, screw it, let's just do it now. So we'll just quit out of here and we'll say Git status just to find out where we are in the GitHub process. So we're on the branch master, etc etc. So what I want to do is I'm just going to send this to chatgpt because I'm a bit of a noob with GitHub and I'm going to say help me push this to GitHub. So we need to set what's known as a remote origin, I believe, so git commit. Okay, we'll do that. Just bear with me guys, because if you can learn this stuff, it's going to completely change how you think about making websites. So we'll just say hi here. So now we need to actually go to GitHub and I actually, I think I might be logged into Harbors GitHub actually. So we'll just go here, new repository website, and then we'll make it private just so no one can see it and then create. Yeah, so this is what we have to do. So we'll follow that command here, we'll put that command. So we need to. If you don't know how to use GitHub, guys, it's an absolute nightmare to learn, but once you've learned it, it's so worth it. So we now set that as the like where I want this code to go now I'm going to push this code. Okay. I knew it. So I'm actually on the wrong fucking GitHub. I hate my life, honestly. Okay, so we'll do that again. Okay, so I need to remove the current origin because I Set it to the wrong one and then we'll add it to this origin and then we'll do Git push. Still some bloody work. God, I hate GitHub. Okay, I know what the problem is here. I need to. This is so stupid, guys. This is all my fault for being an idiot. I have to add myself. I've had to do this like 50 times recently just because I don't know how to log out on GitHub. So I'm making myself a bloody. There we go. Now if I do that, it should work. Okay, Jesus. Okay, so the upshot of all of that, guys, is as follows. If I now go to my repositories on GitHub, we have the website. Beautiful. This is what I needed. So now I'm just going to quickly go back to netlify here and I'm going to press Linker repository and we'll link. It's called Website, I believe. There we go. Beautiful. Main. Yes. NPM Run build. Yes. Dist. Yes, Deploy. Yes. So what this is now going to do is it's going to redeploy the website based on the GitHub repository. And the reason that's so important, I'll show you why that's so important. This is something that I didn't know was possible until very, very recently, but it's completely changed how I view website building, website production. Just everything that I thought was a given, like use WordPress, use Shopify, there's no point doing it yourself. All of that's out the window now, guys, honestly, it's all just out the bloody window. I'm so excited about this stuff specifically, you can probably tell. So what this is now doing is it's building, like I said, it's building the website based on the GitHub repository. I'll show you why this is so important in just one second. Okay, Complete, perfect. So now if I open this, you'll see. Okay, beautiful. Right, let's go to. Let me show you why this is so important. Let's go to layout here. And what we're going to do is we're going to look for welcome. So I'm going to write welcome to Big Boss Blog, right? And then I'm going to save that. And then when I just do this again quickly. So we'll do git add dot. So what it does is it realizes that we made a change in Index astro. So now we're going to commit that change. So now that change is committed on GitHub and now if I do git Push. Okay, that's now done that. Now, if I go on netlify, if I go on deploys, you'll see it's deploying it again. So what's going to happen in your opinion? Right? This is why this is so freaking cool, in my opinion, because now it's connected. Okay, now obviously I don't have a domain here, so it might seem a bit weird what I'm doing, but as soon as this is finished, it's going to reflect on the live website. Whether that's a netlify domain or if it's a real domain, it will publish the changes to your website instantly. So what does that mean? It means we can add continuously new content, new css, new features, new whatever the hell we want to our websites using Ada. And then watch when I refresh this. Okay, well, I changed the meta title instead of the actual title. You can see at the top here, it says welcome to Big Boss Blog. Right? So I've changed the website purely by pushing to GitHub. So again, what does that actually mean? It kind of only makes sense if I bought. If I buy a domain. So I might just quickly buy a domain. Screw it. Let's just buy domain, add a domain. Amalfi coast advent adventures.com really adventurous. Is that a word? Adventurers. That's a word, right? The only reason I'm buying this domain is because you might. I just don't want people to think that you can only do this with a. With a netlify domain. So I'm just going to register this just to show you guys what I'm talking about. Because now you'll be able to see that this is going directly to an actual website that's in production. So we've got to wait for that to do the DNS, etc. So while that's doing that, let's just go back to what we were doing before. So we'll do ADA Sonnet again and we'll do ADD this time we'll just add pages, I think. Okay, we'll just do add source sources, whatever. And now I'll say ask, do you have memory from the last chat we had? I actually don't know the answer to that question. So we'll see. Okay, so it doesn't have memories. I thought it did though. So that is kind of interesting. So we'll have to do this again. So ask, read my current Astro pages and understand what they are and what I'm trying to do. Building a website which is SEO optimized, using Astro Write Down. Okay, so I'm ask, can you store these images image links to be used throughout content you create? Okay, so now it's read those files. Perfect. Okay, let's do code. Add a new experience in the area of Amalfi. Based on your knowledge, ensure to internally link to already existing pages. Build things with SEO in mind. Use interesting formatting to create a good page and embed some of these images in the page. Okay, so while that's doing that. There we go. Perfect. So now we should be live on amalficoastadventures.com beautiful. At the bottom here, we just want to press verify DNS connection. Now it should have DNS as well. Beautiful. Look at that, guys. So quick. Honestly, that takes a lot longer with a hosting platform. So now, now the really cool thing. So this says welcome to Big Boss Blog, right? And it's live on my website, as you can see here. So let's just quickly go back to. I think I'm gonna leave the editing there. I already showed you how to add a page. It's just, it's doing some weird stuff. It's not letting me skip that scraping process. I'm getting kind of annoyed. So what I'm gonna do is I'm gonna undo that change, right? And then to be honest with you, I don't really like this homepage. But yeah, let's just quickly change the homepage. So we will get ADA backup just one more time before we finish and we'll do ADA sonnet. I'm just going to dive straight in. I'm going to say code, make. Index, Add. Index, Astro. Wait, add. What's that? Inside pages, pages, Index, Astro. Okay, I'm gonna say code, make this much more of a beautiful homepage for this website. And then I'll just add like four images instead of hundreds just because it seems to be messing up right now. Use some of these images. Wait, let's go to the. Let's go further down to make a really interesting and modern homepage. So let's say I don't really like this homepage. There we go. I can skip now. I'm going to redesign the homepage, make it a bit more interesting, make it a bit nicer, add a few more images. Just kind of improve the SEO. Because to be honest with you, a homepage like this is not going to do particularly well. Now another thing as well is it doesn't have an SVG favicon. So that's something else we could do while we're here is I can say add a Favicon as well. You can actually create a favicon using AI? I would guess if I go on public and look at the favicon, it should just be. Yeah, it's svg, which is a type of code for images. It's actually what we use for harbor to create the icons and things. So I'm pretty sure that I will be able to code a quick SVG. To be honest with you, I can just use ChatGPT for that as well. This is still running, so it should say it's made some changes. Yeah, maybe. Yeah, there we go. Source. Yeah, it says that the change has happened. The change hasn't shown here because this is my live website. Okay. But the change should have been shown here. So if I go on home. I mean, look at that, for God's sake. Like, it's just so fucking good. It's so good. This would take people so long to do on WordPress with no WordPress experience. Obviously, if you're an experienced WordPresser, you probably think I'm an idiot for saying that, but if you don't know what you're doing with WordPress, this shit takes so long to learn and you can just do it with AI so quickly and so easily. So what I want to do now is I'm just going to quickly say to Ada, guys, I'm going to be experimenting with this a lot. And I just say no. So I'll say no here and I'll say, code, change my Add favicon. Yeah, add favicon. There we go. Code make this favicon more appropriate for this website. So fucking easy. This is insane. It's like, how do you. It's building a website block by block, but as you want, instead of following like, you know, like following a template or whatever it might be, you can literally do whatever the hell you want. So if I'm not mistaken here, if I refresh this. There we go. Look at that new favicon. And just bit by bit, you can be like, okay, now add this. Now add this. Oh, I want this to be even longer. Or, you know, I want a Parallax animation. Or there's no limit here because it's next js. You can literally do whatever the hell you want. Okay, so now just final thing is we'll just quit out of Ada and we'll say git add dot and then we'll say git commit high three. And then let's just see if netlify. Netlify is doing something here. Deploys. Is deploying again. Okay, so. Oh, yeah, create a new favorite now. Okay, perfect. So it should now live like this is the local version, but if I go on, what is it? What did I just buy? Amalfi coast adventurers dot com. So we'll let this build and then as soon as it's built, we can then see live the new changes. How fucking cool is that? I'm sorry, that's just so cool, guys. I'm gonna leave it there. But that's how you can take it something from Bolt and start to work on it in a bit more serious way using something that's actually built for doing that. Now this will also work if you're coding an application. Okay. It's not just for websites, but I'm just really fascinated by the fact that you can do this for websites. Now the video after this video is going to be how to build a website using APIs. Okay, thanks for watching, guys. If you're watching all the way to the end, you're an absolute legend and I'll see you very, very soon. Some more content. Peace out. This video is going to show you exactly how to generate a website using AI that will rank on Google.