# The EASY Way to Build a Beautiful Website with GPT-6 Astra (Full Tutorial)

Channel: Create a Pro Website
Video: https://www.youtube.com/watch?v=qbjsW6lvDwg
Duration: 23 min
Language: English
Words: 4776
Transcript page: https://viewrankai.com/tools/youtube-transcript/qbjsW6lvDwg

---

[0:00] In this video, I'm going to show you the fastest and easiest way to build an insanely professional website using Chat GPT Astra, also known as GPT-6. Now, if you're online recently, you've probably seen Astra creating some really amazing things. People are building insane three-dimensional websites in just a few minutes and making it look ridiculously

[0:21] easy. That is until you try it yourself. Suddenly, now you're dealing with prompts, skills, UI frameworks, and deployment, and all of these technical terms that are really confusing, especially for a beginner. Well, don't worry. I've been there, too, and it's actually way easier than it looks. That's why I'm going to walk you through my exact process, step by step, that I used to build this beautiful, professional website here. And I'm going to give you all the tools and resources that I personally use to make it stand out and not just look like any other generic AI-built website. So, here's what we're going to cover. First, we'll

[0:59] start by setting up your tools. Then, we'll define our brand so that Chat knows which direction to take with the website. Then, we'll build the website using GPT-6 Astra. And then, finally, I'll show you how to launch your website under your own custom domain name so that you can share it with anyone in the world. So, if you're ready, let's get started. Step number one is to set up

[1:19] our tools. Okay, so we actually need to set up three different tools. The first is to get an Open AI plan, specifically one that allows us to access GPT-6 or Astra. And the second thing that we're going to need is a Higgsfield plan. And this is a AI video generation that we're going to use to create that awesome scrolling

[1:39] video in the beginning of the website. And the third tool is called Node.js. It's simple, it's free, it just allows us to hook up our brand new website to a custom domain name. So, let's get started with an Open AI plan. So, over here in Chat GPT, I'm inside the desktop app, but you can also use the web browser as well. We're just going to come down here to our profile, and we're

[2:00] going to click on settings. And then inside the settings, we're just going to come up to usage and billing. And then you can see your plan right here. So, you might be on the free plan or the plus plan. We're going to click on view plans, and the minimum that you'll need is the plus plan. So, I'm already on the pro plan, so I'm just going to leave it. But, if not, just go ahead and switch to the plan, and then

[2:21] we can just go back. Cool. So, now the next thing we need to do is get a Higgsfield plan. And again, this is to generate that hero video that's playing in the beginning of our website. So, just go ahead and click on the link in the description, and that will take you here to higgsfield.ai. And what we're going to do from here is just click on sign up. But, I've already got a login, so I'm just going to click

[2:41] on login. And I'll just continue with Google. Awesome. So, once you've created an account or logged in, we're just going to come up here to our little profile. We're going to come down here to manage account. And then from here, you can just click on subscription. And then from here, you would just click

[2:57] on upgrade plan. And the plan that you're going to need is at least the plus plan. And you can do this annually or monthly. So, if you're just trying this out, you can totally do monthly, but you need at least the plus plan. But, I've already got it, so I'm just going to go ahead and leave it. So, I'm going to go ahead and just minimize this window. We're going to go back over to chat GPT, and now we need to hook up the Higgsfield plugin to chat GPT. So, to do this, just

[3:20] go ahead and click on plugins. And then from here, you'll see the little browse directory button. We're just going to click on that. And then we're just going to type in Higgsfield. And then you'll see Higgsfield right here. Just go ahead and click on install. And then from here, we're just going to say continue to Higgsfield. And then this is going to pop up in your browser window, and we're just going to

[3:40] click on allow. And then we'll just say open chat GPT. Awesome. So, now you can see the Higgsfield plugin was installed. So, now the last thing that we need to do is download node.js. So, to do this, just go over to nodejs.org right up here, and then you would just click on get node.js. And then you can just download the Mac installer here, or you can change this to any one of these operating systems that you want. And it's a very simple setup. It takes no longer than 20 seconds. So, just go ahead and download that, and then we'll just go back over to chat GPT. Cool. So, now we can move

[4:16] on to our next step, which is to define your brand. So, we need to have a company name, a logo, and our colors. And if you already have all these things, feel free to skip this step. But if not, you can actually ask chat GPT to do it for you. So, to do this, I just went over to new chat right over here and clicked on that. And then I said, what are some good names for a house painting business? And it gave me a bunch of different options. And I really liked Evercoat Painting Company. So, after that, I said, I need brand colors and a

[4:46] logo for Evercoat Painting Company. And it gave me this awesome image that looks really sleek, and I really like the colors. And the logo is pretty cool, too. So, after that, I said, can you give me the logo just by itself with no words? And this is just a PNG with a transparent background, so that I can put this anywhere on the website. So, now that I've got a name, my brand colors, and my logo, I also asked it, what sections should I include on this website? And it gave me all of the different sections, like a trust and social proof bar, my services section, before and after transformation, and so

[5:21] on. So, after it gave me all this stuff, I came down here and said, what images should I show in each section? And it'll tell me which ones I don't need an image for and which ones that I do. So, once it told me all the images that I need, I just asked it to create them one by one. So, I said, can you generate each image one by one? I want them to all look congruent and on brand. Also, please name each image file so that I know where it goes. And then from here, it just started generating the images, and all I had to tell it was, "Okay, go to

[5:51] the next one. Go to the next one. Go to the next one." And it just generated all of these images. And I downloaded all those images and put them in a folder. And you can see that folder here. So, I recommend putting these all in a folder, cuz then we're going to create a ChatGPT project, and we're going to give it all of these source images to use for our website. Now, you don't have to actually give it all of these right up front. You can just ask it to generate them using our Higgs Field plugin as it's making the website. But, as someone who loves

[6:22] branding, I really like to have more control. And the more that you give AI, the better that it's going to come out with the result. So, more direction equals better. So, once you have a bunch of images that you want to use on your website, the next thing that we need is an inspiration website to give it. And this inspiration website is just going to be something that you really like the

[6:41] layout or just the general style of it. And you can just use Pinterest for this, but I really like dribbble.com. And dribbble.com is awesome, and you can see it's dribbble with three b's. So, once you're here, you can just type into the search bar anything that you're looking for. So, I would just type in business. And then from here, we can just click on

[7:01] web design. And then you can see there are a ton of different inspiration websites that you can use to give to chat and say, "I really like the style. Use this as a reference." And I found one that I really like. Now, this is a portfolio website, but I love the layout of this. It's so clean. You can see each section perfectly. It's very clear. So, you can

[7:22] just go ahead and screenshot this. And we'll just drag a box over the whole thing. And then just make sure that you save that somewhere on your desktop, so we can give it to chat. So, once you've done that, our next step in defining our brand is to create a dedicated project inside of ChatGPT for this website build. So, to create a dedicated project, we're just going to go over to

[7:43] projects and click on the plus button. And then we're going to give it a project name. So, I'll just say website build. And then we're just going to say create project. And then underneath sources, if we click on that, here is where we can add our website images. So, we're just going to click on

[7:58] add sources. And then we can just click on upload. And then just navigate to where you put all of those images that we got earlier and just select all of them. And then just click on open. And then just give this a second to load all of these images in. Cool. So, once those are all uploaded, we can move on to the fun part, which is

[8:19] to build our website with Astra. So, the first thing that we're going to need to do is just click on work up at the top. And then we're going to want to change our GPT mode over to Astra. So, we're just going to go over here and I recommend Astra medium. You don't really need Astra high and light might be too light depending on how intense this website is, but medium to me has always been a good middle ground. So, we're

[8:44] just going to go ahead and select that. So, now the most important step in building our website with Astra is the prompt. So, I'm going to go ahead and type one in and explain why I'm using it. So, I said, build me a website for Evercoat Painting Company here in Boulder, Colorado. I'd like to use the attached reference image as inspiration for general style, but tailor the design towards a house painting business. And you can see that I've attached that image of the inspiration website. And I said, and I want to use my own branding colors and logo. I'd also like to include a hero section that plays a

[9:17] video as you scroll down the website and I'd like to include a few specific sections on the website. Please first ask me any questions that you need to complete this job. And that is the most important part right here is to say that you please want it to ask questions before completing the job. So, once you've got your prompt written out like this, we're going to go ahead and click

[9:36] send prompt. And you can see it's saying, "I'll check your logo and brand sheet first, then ask about the sections, scroll video, and business details." So, now you can see that it's asked me a bunch of different questions, and it says, "You can answer by number or just say you decide if I'm unsure." So, I'm going to go ahead and just answer these

[9:54] by number. Cool. So, the first question was, "Which sections do you want?" And it gave me a bunch of suggested sections. So, I said, "Go with your suggested order." The next question was, "Do you have the hero video ready?" So, I said, "I don't have the video yet. Let's build that with Higgsfield first before you build the

[10:11] website." The third question was, "What should I do with the main button?" I just said, "Request a free estimate." Next, "Which services and locations should we feature?" I just said, "You decide." It asked me if this is a real business and what my insurance and warranties were. So, I gave it a little bit of fake info here. And then for the last question, it's asking if it wants to be a one-page website or separate pages, and I just

[10:32] said, "You decide." So, once we've answered those questions, we can just go ahead and click on send prompt. And just like that, it is already using Higgsfield to create our hero video. So, it says that it's going to animate the house into an 8-second silent shot. So, it's just go ahead and generating that

[10:49] now. Okay. So, it finished generating the video, and to be honest, I don't love it. It kind of just looks like somebody's coming to rob this house. Uh so, we're going to give it a much more detailed prompt of shot by shot what we want to happen. There's going to be a lot more motion. But, don't worry, this is super easy with chat. So, what I did was just open up a completely new chat, just a regular ChatGPT chat, and I said, "What are some ideas for a cinematic hero video for a house painting business?" And it gave me a bunch of different options. And the one

[11:20] that I really liked the most was this painter's POV. And it basically it's just a POV of a painter opening up a fresh can of paint, dipping the brush, applying it to the house, and so on. So, I said, "Let's do the painter's POV. What are some shot-by-shot breakdowns for this idea?" And it gave me three different concepts. I've got concept A, B, and C. And I just liked concept A the most, and it gave me a shot-by-shot

[11:45] breakdown of this. So, then the next thing that I did was ask it to create this into a prompt. So, I said, "Let's go with concept A. Write a prompt that I can use to generate this with Higgsfield." And it gave me shot-by-shot each prompt with a lot of detailed info about how things should

[12:02] move, how they should look, and so on. So, what I did was just copy all these into a prompt right here, just on a regular window. And this is just so that it's easy to just drag and copy the whole thing. And I also asked it to generate the first frame and the last frame. And these are just image

[12:19] references. So, let me show you. So, you can see I've got my first frame and my end frame. So, this is my first frame, just opening up the paint can. And then my end frame will be a full shot of the house. So, I'm going to give it both these images and this full prompt. So, I said, "Let's try a different hero video. Use the first reference image as the starting frame, the second reference image as the ending frame, and then a shot-by-shot breakdown." So, I'm just

[12:44] going to copy all this. And then just go back over to our project. And I'm just going to paste that in. And then I'm just going to click on the plus button to add those two images. Cool. So, now we've got our shot-by-shot breakdown for our prompt. So, we're just going to go ahead and try that again. So, you can see it's going to use our two references as the opening and ending frames, and it's going to regenerate this video. So, just go ahead and give

[13:11] this a second. Okay. So, it went ahead and generated the new video. So, as you can see, this is looking a lot better now. We're zooming into the paint can, which is pretty cool. And then onto the brush. Got a little bit of paint there on the window. And a little bit of a glitch, but no big deal. We can always fix that later. For the sake of moving on, we're going to use this video. So, I'm just going to go ahead and type in the box here. Let's

[13:36] use this video and build the website. And then I'm just going to send this prompt. Cool. So, it says I'll build Evercode site around the video with the scroll controlled playback, and it's going to do our branding and everything. So, we're just going to give this a few minutes. And just like that, the website just finished. So, now we can just click on

[13:56] open our website. And then we'll just need to sign in with ChatGPT because this website is being hosted currently. It's just a temporary domain on ChatGPT site. So, we're just going to say continue with ChatGPT. And then we'll just select our account. And then we'll just say continue. And here we are on our website. And it looks like our hero video is not quite working, so we'll have to fix

[14:21] that. But, the rest of the site is looking beautiful. And I really love this before and after slider. That is so cool. And everything is looking pretty great. This meet the team section is awesome, too. It's using all the images that we gave it in the beginning. And the contact form for the free estimate. Wow, this looks fantastic. So, let's go ahead and fix the hero video at the top so that it actually plays that video. So, I'm just going to go back

[14:50] over to ChatGPT. And then now we are going to tell it that we want to fix that hero section. So, I said the hero video is not playing back while scrolling. It's stuck on the first couple frames. Can you fix this? Do not change anything else about the website. I'm going to go ahead and send

[15:06] that. Cool. So, it says that it'll inspect and fix that. So, we're just going to go ahead and give this a minute to regenerate the site. Cool. So, it just finished up. So, let's go ahead and click on open the updated website. And let's just see if this works now. Yep, that is looking much better. Wow, yeah, that is way better. And the

[15:29] rest of the website still looks okay. Everything else seems to be working. So, I think that we can move on to our next step. And that is to launch your website. So, as you can see, this URL is on ChatGPT's site. So, we want to actually choose our own URL with a custom .com domain. And in order to do this, we also need hosting. And hosting is basically just a server where you store all of your website files. And this server is connected to the internet, and it's running 24/7, so that your website will never go down. You could host this website on your own laptop, but the

[16:07] problem is that whenever you close the laptop, the website would go down globally. So, instead, we just rent hosting space on a server, and these are secured, maintained, and kept running 24/7. And by far, my all-time hosting company is Hostinger. My website is always super fast to load. It never goes down. I've never had any issues with them, and I've hosted hundreds of websites with Hostinger. So, just go ahead and click on the very first link in the description, and that will take you here

[16:35] to my co-branded landing page with them. And you'll know that you're in the right place whenever you see the Create a Pro Website coupon code applied up here, and you can also see my face right down here. So, we're just going to click on start now. And that link in the description is what's going to get you a huge discount on your hosting. It's going to be the most affordable hosting that you'll find anywhere on the internet. So, you can choose either plan that you want. I like the unlimited plan because you get unlimited websites and a lot more storage, but you can also just choose

[17:04] the premium if you want to go with the cheaper plan. This tutorial is going to work with either plan. So, I'm just going to click on choose plan. And then here is where you can choose your billing cycle. So, the longer months that you go with is going to be the biggest discount. You're going to save the most. But, if you're not ready to commit to 48 months, the shortest that I recommend going with is 12

[17:24] months. With the 12-month plan, you still get a huge discount, and you also still get your free domain name and your free mailboxes. And 1 month just really isn't enough time to get clients in the door with your website. So, 12 months is the shortest that I'm going to go with. And we're not going to be getting our domain name right here, because then you end up paying for it. We already have a free domain, so we're going to wait until the next section. So, as you can see, we've got our 12-month plan. We've got our free daily backup, free domain, and free domain privacy protection. And then just

[17:55] make sure that you've got this Creative Pro website coupon code applied, and that's going to get you an even bigger discount. So, now we can just click on continue. And then just go ahead and fill in your billing details, as well as your card info, and then you can just click on submit payment. Awesome. So, now from here, we can just

[18:13] click on get started. Cool. So, from here, you'll see that we can create a new site, or we can migrate an existing site. And we already have an existing site, because we already built it with Astra. So, we're just going to click on this button to migrate. And then from this window, we're going to go ahead and choose upload backup files, but don't worry, we're not actually really going to need to upload anything. And then we can just click on

[18:34] next. Awesome. So, now you can see that we have our free domain available to use. So, I'm going to go ahead and type one in. So, I did evercode painterco.com, and you can see it's free. So, I'm just going to go ahead and click on it. And then we can just click on next. And then from here, just make sure that all your details are correct, and then

[18:53] just click register. And just like that, it is hooking up our new domain name to our hosting plan. And you can see, domain added to your site. So, now we can just click on continue. Cool. So, then it's going to bring us here to upload our website files, but we don't actually need to do this, because we can just deploy this right to our new

[19:13] domain name straight through Chat GPT. So, let me show you how to do that. We're just going to go back over to Chat GPT. And then we're just going to come down to plugins. And then in the search bar here, we're just going to type in Hostinger. And then you can see Hostinger connector, deploy and manage your hosting. So, we're just going to go

[19:30] ahead and click on the plus button. Cool. So, once that's finished installing, we're also going to need this main Hostinger plugin as well. So, we're just going to click on that. And then it's going to ask us to connect our account. So, just make sure that you're signed in with the correct email, and then just click allow. Awesome. So, now you can see Hostinger plugin was installed. So, now let's just

[19:51] go back over to our projects. And then we'll just click on our project, which is called website build. And then we're just going to go back to that same chat that we've been working through the entire tutorial. And what you'll need to do is write in this prompt. Package the complete finished website into a deployment-ready zip file for Hostinger. Include all the website files, assets, images, videos, dependencies, and configuration required for the site to work exactly as it does here. And then it's going to give you the zip folder. So, then just go ahead and download that. And then here is the most important part. So, now we cannot

[20:27] work in the browser version of Chat GPT anymore. We need to switch to the desktop version. So, I'm just going to open that up. And then we are immediately going to actually quit Chat GPT and reopen it. Because now that we installed those Hostinger connectors, we need to quit out of it and restart it. So, we just quit. So, now I'm just going to open it

[20:48] back up again. So, once you open it back up, we're just going to go over to our website build project, and we're just going to start a new chat. And then once you do that, make sure that you click on work. And then we're going to change this mode back to medium for Astra GPT-6. And then we can just say deploy the Evercode website to my Hostinger account using this domain name. And then we're

[21:11] just going to click on the plus button. And we're just going to go files and folders. And then just navigate to that zip folder that we downloaded just a second ago, click on it, and then just click open. And then we can just send this prompt. And if it comes up with any checks like this where it's asking for permission,

[21:30] feel free to just allow. And just like that, our website is now live at our new domain name. So now I'm just going to right click on this and open in an external browser. And congratulations, we have now got our new website loaded up to our new domain name up here, and everything is working properly. We've got an awesome scrolling animation here in the beginning, and the rest of the website is looking fantastic. I especially love this before and after slider here. And we'll just go ahead and check the rest of the website, and everything looks like it is looking great. And we'll just check our buttons

[22:10] to make sure that they work. Yep, looks like they do. All these are working. And then anytime you want to make a change to this website, you can just simply go back to the chat, and then just ask it to make whatever change, and then re-export a new zip file. And then you would just go back over to the desktop version of ChatGPT, and then ask it to redeploy. Okay, so that was how to build and launch a beautiful website with ChatGPT 6 Astra. [music] If you enjoyed this video, feel free to give it

[22:44] a like. It really helps my channel grow. And if you want to see more AI website tutorials, then consider subscribing to the channel. And feel free to leave me a comment if there's anything that I missed, anything that you want to see on the next tutorial. I'm always checking my comments. All right, my name is Dale from Creative Pro Website, and I will

[23:00] see you on the next one.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt