Build & Deploy a Website using Claude Code On xCloud | AI-Powered Web Development Tutorial

In this video, I'm going to show you how to build a website like this using Claude Code, then push it to GitHub where it will be maintained with as many branches as you want, and then use xCloud to auto deploy it to a website, which is this website. Now this Pulls photos from the WordPress photo repository using the REST API. It's— they're my photos. You can click and get a large version. There's the description. You can view the original on wordpress.org. And all of that came from this little description. So let's get started. All right, the first thing we want to do is go over a little bit of what I'm using to do this. I'm using Claude Code on the command line and I used Brew to install it. So now in my terminal I can type Claude and there we are. Additionally, I have a GitHub account set up. This one's empty. I don't have any repositories yet, but we're going to make one. And then lastly, of course, we're using xCloud and we're going to create a new site here that we're gonna put our content in. So the first thing I'm going to do is tell Claude to make the site, and we're going to do that by being really precise about what we want. So here's the story that I made for Claude, and I'm going to read it because it's kind of important. I want you to get photos from this URL. Now, that URL is the REST API for the WordPress Photos repository, and it's my photos. I want you to build a website to display them. They should be rendered in a grid of thumbnails, 4 wide and 3 tall. When clicked, they should show a larger version in a lightbox. Under each thumbnail, make a link to the original in WordPress.org. Show pagination at the bottom so that all photos can be seen. Do this using only HTML, CSS, and JavaScript. Make the main file be called index.html and put the CSS and JS files in their own folders respectively. Put the whole project in its own folder. Lastly, make a banner at the top that has the title Topher's Photos with the background being the latest photo. So I'm going to copy this and paste it into Claude. Now, through this process, Claude is going to ask permission to do basically everything because this is my first time through. And you could choose option 2 there and have it not ask you again in the future. Which is great for speeding up your workflow. But if you want to understand everything that's going on, I recommend letting it ask you every time. All right, here it's asking permission to create a folder, a series of folders, so we're going to say yes. And there's the index.html file, and there's our stylesheet, and there's our JavaScript. It is done. And because it's just HTML and CSS, we don't necessarily need a server to view view it. So I'm going to come over to my browser, click on Tolfer's Photos and the index file, and there they are. A little bit bigger. I can click to view it larger. It says photo detail under it. I'm not sure why. I didn't tell it to do that, but we're going to fix that in a few minutes. So there it is. It works, but it's just on my computer right now. The next thing we want to do is put it on GitHub. So I'm going to go over to GitHub, and we need to create, uh, an SSH key so that Claude can interact with this repository. So I'm going to go here and go to Settings and Session and GPG Keys and New SSH Key, and I'm going to make one of this type, the ed25519. 519. So let's get that going. So I'm going to open a new terminal window and I'm going to run this command, which is going to create an SSH key for me. And I'm going to put it right there, and I'm going to make a passphrase. And now I have a key. So I'm going to look in .ss8 and there's my public key. So I'm just going to edit it rather than copy it to my clipboard so that you can see what's in there. And these keys are really short. So there it is. So now I'm going to make up a title for it. Pretty simple. Um, yes. And then paste it right there and add SSH key. Now this is a security issue, so they asking me for my password again. Now I have an SSH key, so Claude can interact with GitHub now. So we're going to go back to here, to my repositories. And Claude can't make repository, it can only push to one. So we're going to create one and then Claude will be able to push to it. And I'm not going to change any other options. So we'll click Create Repository. And, uh, it's because it's public, I can use HTTPS to read from it. So we're gonna copy this and go back to Claude and say, so there are the git commands. I'm going to proceed. And there's the add command and the commit. And here's where we actually add the repo and it wants to authorize. Now it, it's asking to use a bash command called gh, which is the GitHub client, which I don't have. So this is probably gonna fail and then ask me to switch and use regular Git. And there it is. And here it can't figure out which key to use, so it's going to check all of them. Fortunately, I only have 3. Okay, this makes sense. Usually I use SSH add and it adds all my keys. Because I added this one after that, it didn't work, or it didn't add it. So I'm gonna have to give permission. Here. So I'm going to copy this and in another window do it. There we go. And then it wants me to manually push this. Um, you know what, let's just say try again so that I don't have to manually do it. There we go, the push worked once I authorized my key. So let's reload the GitHub page here, and it's very simple. I want a README. So I'm going to say now we reload, we have this cool README. So now we have our website built and on Git. So now we're going to go to xCloud and create a site and set up Git to pull it. So let's go to new site. And here we have clone a Git repository under the WordPress thing and also under custom PHP. It doesn't really matter which one you use because, uh, you're going to put whatever you get in there, and they're, they're basically the same. So I'm just going to use this one. I'm going to choose demo site so I don't have to use a real domain name, and we'll call it Photos Display and click Next. Now it wants a PHP version. We're not using PHP, so it doesn't really matter. I'm going to choose 8.5 just because. Webroot is gonna— I'm gonna leave it blank I just want it in the root. We don't need a database for this project, and I'm not going to use Backup Seed right now. So we click Next, and here's where we set up Git. Um, it's not a private repository, so we click Public, and then it needs the repo URL, which is here. We're going to use the main branch. Here you can put in a deployment script, which you would probably need for a lot of PHP stuff, but we don't need that at all. So I'm going to take everything out. My .env file, I'm just going to leave it at the default and hit next. All right, there we are. So that's our staging URL. It's not ready yet, it needs to provision. So we click start and now it's provisioning. And there we are. Now that took a lot less time than setting up a WordPress site or basically anything else. Because essentially this is empty. So we're going to visit the site now. And there we are. It pulled from Git. So I'm going to go back here and we're going to go to the Git menu over here. And here's where we could change stuff. Now we want to make it so that any time I push to the branch, it auto-deploys. So I'm going to turn on push to deploy. And there's our development URL. So we're going to copy that. And now we need to go to GitHub and make a deployment key. So we're going to— or not deployment key, a webhook. So we're going to put our URL in there under webhooks. Content type is JSON. And that's pretty much it. We don't have to change anything else. So what this does is when I make a commit and push it to main, then it's going to ping this URL which says, hey, go pull the new stuff. So we add webhook. There we go. Now we also need deploy keys, and that is right here. So we copy that, add a deploy key, uh, we'll call it Tofu Cloud, and add key. There. Now, uh, GitHub has a key with which to deploy here. So now I want to point out, I, I enabled automatic push to deploy, but you can do a manual deploy now. Like, I could do it right now without changing main at all. Um, but we want— what do I want here? I want the photo description under each large photo. So let's go back to Claude. Photo in the lightbox, show the photo description, and under that, a link to the original on WordPress.org, then push to GitHub. So there are the changes it wants to make to the HTML. Here are the changes to the JavaScript and the changes to the, uh, this is also JavaScript. Oh, I see it's changing lines. That's fine. Here's the new CSS, and here's where we're adding it to Git, and it is pushed. So now I want to show you here. So it did not deploy, and I know why, because when I clicked this to enable push to deploy, I did not save my changes. There we go. So now if I wanted to deploy what I just did, I either need to make another change or do a deploy now. I'm going to deploy now, and then I'll show you how the auto works. So we can come down here and you can see that it is running, and you can even view the actions. Of what's going on in here. Oh, not yet. And now it's finished. So now let's reload the one on the server. Ah, it still says photo detail. I— oh, you know what? I'll bet I need to refresh without cache. Yes. Uh, I don't like that it says photo detail. I'm gonna ask Claude to remove that, and I'm gonna shorten the banner and put a little padding between it. Theoretically, I, I said I wanted to do several things. I should do them in different commands so they are in different git commits to make it easier to roll back. I'm not gonna do that for the sake of speed, but keep that in mind that individual tasks should be individual commits so that you can deal with them individually. There we go. So there's our HTML, there's our JavaScript, little more JavaScript, there's our CSS, more CSS, more CSS. And here we're going to push it. It says committed and pushed. I'm going to come over here and you can see that it is automatically deploying. Now let's reload without cache. And those words are gone. There's a link to the original and the top is, is half as tall like I asked. I don't like it very much. I would make it a little taller, but that's just CSS. So there we are. We used Claude to create this page, push it to GitHub, and then used xCloud to pull it from GitClub and set up our website.