Deploy an Astro static site from GitHub to xCloud using push-to-deploy. The tutorial builds a travel agency site with Claude, generates two GitHub repos, configures xCloud with the build repo, and shows PageSpeed Insights scores proving the site's mobile performance.
Chapters
Yesterday I used Claude to build an Astro CMS website. Then I had Claude deploy it to GitHub, and then I had xCloud's push to deploy create the site on their server, and it all took just a few minutes. I'm going to show you how I did it. Astro is a JavaScript-based CMS. And you build templates that are flat files and it generates static HTML files, which makes it extremely fast on the website side. Now I want to show you a little bit what I did in Claude. Now I want to clarify, I said it went really fast. The part where I built the site with Claude took quite a while because I don't know if you're aware, but the first time you do anything in Claude, it asks a million questions. Are you sure you want to do this? Is this okay, etc.? And you always have the option to say yes, but don't ask me about this in the future. Which means the next time I build an Astro site, it's going to go really, really fast. But because it took a while, I'm not going to show you the part where I actually built it because it's just asking me questions like, can I create a directory, etc.? So moving on, I asked Claude to describe the project. It built a site called Incredible India Travel Company. I should tell you my prompt was build a travel agency for India using the colors of the Indian national flag or design and pulling images from the wordpress.org photos repository. And I want a homepage, an about page, and a contact page. So right here it says, you can see it made 3 pages, 7 India-themed photos, and there's a static site. Yeah, I actually had Claude make repositories on GitHub. One to store the, the source files and one to store the actual site itself. And so here's the build output. And I can show you there are the repositories it made. So this is the source files and this is the build. Now this is the website that it made and this is the homepage. You can see some photos here. Here's my about page and some more photos and the contact. Now I want to clarify, I didn't pick those photos for the most part. It picked some. Um, there was one of a dog that I didn't like, so I had it pick a different photo for that. Um, but I just told Claude, go get a different photo, and it did, and it changed the description and everything. So it made the site, but then I want it on xCloud. And I did it yesterday, but I tore it back down because I'm going to show you how to do it this time. So we're going to go to new site and I'm going to do deploy via Git. And here you can choose any repository. Because I have connected xCloud and GitHub, it knows about my repositories. If you were installing something else, you could just put in a URL here, but I'm going to choose India site build and it's going to figure out what it is. And it is a Node app. So you can, I'm using a staging domain for this. I'm just gonna call it india.onewp.site. Serving mode is static build. Web root is dist. I'm gonna take all of these. Let's see what's under advanced. Yeah, we don't need a database because this is a static file. So there's the summary. And we hit deploy. And there we are. The site is done. So let's click visit site and it's done. We click about and it looks exactly like the other one. And I'm going to do a quick page speed test. And there we are. Okay, so this is great. Let's go find that. It says start planning your trip. And the one locally has this color. So we're going to go back to xCloud and I'm going to go to the Git tab and I'm going to point out that we have enabled push to deploy. So, um, All I have to do is push a new version of the site to Git— GitHub, and it will use it. So let's come back here and say— and it has made the changes, and I'm going to proceed. And there we are. Claude updated Git, pushed it to the repo, and xCloud saw the change, pulled it in, and now we have that same button. So now let's run PageSpeed again. And there we have hundreds all the way across on mobile, which is pretty hard to do actually. Mobile's pretty particular. Uh, so it's crazy fast. I mean, you can watch how long it takes to reload. That was it. Uh, and these are some big images. So, uh, this is very, very impressive. Uh, so to walk through it real quick, I used Claude to create an Astro site. It made 2 repositories, one for the build files, one for the site itself. And then xCloud was able to just connect to my GitHub. and pull in the site and upload changes every time I push them to GitHub. So that's really, really cool. It's really slick, uh, and this can work for just about any kind of website. So give it a shot.
