Topher walks through deploying Instatic, a static site generator with a database for user management and media libraries, on xCloud in six minutes using the one-click installer. He creates a page with the visual editor, showing its Canva-like interface, reusable components, and built-in AI integrations for design help.
Chapters
In this video, I'm going to show you how to set up Instatic on xCloud as a one-click install. If you're not familiar with Instatic, I'm going to show you what's going on here. This is their website, and basically it's a static site generator, but it uses a database, so you get the advantage of things like user management and a media library and plugins and A whole bunch of stuff. Um, I'm really excited about this. I've been a WordPress guy for 16 years and this is kind of the first thing that's made me think, hey, maybe this is the next thing. We'll see. Now this is in pre-alpha, so this is really early, but it looks really good. Um, they also published this cool video, which I really like. It shows a lot of the features. Um, if you're really interested, I recommend you check it out. Especially if you've never heard of it before. So here we are at my xCloud panel. I'm going to click new site and I'm going to choose One Click Apps and I'm going to search and it's right there. And I have 2 servers already, but they are not compatible. They're both WordPress. So I'm going to deploy on a new server. I could deploy on this one, but I'm going to do a new server. Let's give it a name. Now I might do more than one site in here, so I'm going to call the server that. I'm going to skip the tag. It needs to be Docker Nginx, so leave that alone. You can choose the size you want. Because I'm just putting up one site, I'm going to choose the smallest. If you are doing multiple sites, you might want to do more. Choose your region, coupon code if you have it, and pay and deploy. All right, I'll be back in just a sec after this finishes deploying. All right, the site is set up, the server's all set up, and it's ready to go. I didn't have to do anything. It took about, I don't know, 6 minutes. So I'm going to fire this up. I'm going to close these other tabs. And here's our site. Let me zoom a little bit for you. And the first thing we need to do is set up the CMS. So this is Topher's site. My name is Topher. You're never going to believe that. All right. So now we are logged in. We have created an account. We could jump right to creating a new page, but there is a setup flow here. I want to point out that it says the setup identity is complete, but there's stuff in there that you might want. For example, there's a meta title, meta description. You could set up a favicon. Here are keyboard shortcuts for everything, publishing endpoints and preferences. So there's a whole bunch of stuff in there. Um, but we're going to choose a core framework and we have 3 options. Uh, you could do nothing and just basically build your own thing, variables only, uh, or a full framework. I'm going to choose full framework because I'm pretty new at this. So we'll import framework. Here we are. And then, uh, there's create first page, install a plugin, and invite your team. I want to point out. That they don't really have plugins yet. As I said, this is very new. So if you go to browse plugins, you'll get this. Um, so we're going to skip that part. Uh, invite your team. I don't have a team, but all it is is making users. So we're going to skip that too. Um, before I create my first page, I'm going to scroll down a little bit. There's this really nice overview panel, um, that is at the top once this stuff is done. Tells you how much storage you're using. We're using SQLite for the database, which is super duper fast. Media, posts, pages, activity, the domain, plugins, all that stuff. So let's go to create a new page. And one of the cool things about this is that it shows you all 3 breakpoints All at the same time. A bug that I've noticed is that, like, I want to zoom out right now so you get to see more of this, but that doesn't work on this particular page. So I'm going to go back one and do this. Actually, let's go to zero. Yeah. And then add a new page. Okay. Now let's see if I can zoom. Yes. Okay. Uh, so the way it works is, uh, here's your body. Oh, can I zoom back out a little bit? Yes, you can scroll all kinds of places. Um, so it's kind of like Canva or not Canva, Figma. Uh, you want to keep this right here. Um, so right at the top here, you can add a container, add text. Add an image or add to canvas. Click add to canvas. You have things like containers, loops, which can be a wide variety of data sources, which are great. Text, list, image, link, button, SVG. So a ton of stuff. And you'll notice it says escape right here. That's how you get out of basically every window. You can add a layout and there isn't one yet. You can, excuse me, you can create components to reuse all over the site. So I'm going to go right to add container. And right now it is a div and it has no, no ID. So I'm going to call mine just main. And so now over here on the left, you can see that it is a main and you can change the HTML tags. I'm going to make it Main. And once you have that, then you can edit all this stuff. And there's a little menu here on the right to get to it. So there's layout, position, size, spacing, typography, background, border, effects, and interaction. So I'm going to set a max width of 1120 pixels. There we go. Then I'm going to add another one. I'm going to add a container and we'll call this one head. And they're not IDs, they're classes actually. And as you can see here, you can do flex, grid, all kinds of stuff. So if I was really building this out within the head div, I would Put in 2 divs, one for the site title and one for the nav on the right, et cetera. I'm not a great designer, so I'm not going to dive down this too much. But speaking of that, one of the cool things is that you can connect a whole bunch of AIs. It comes with Anthropic, OpenAI, and OpenRouter, but Ollama lets you do a local one and custom endpoint if you've got anything else. You can hook it up. And so they can create a design for you. They can take an existing codebase and pull it in here and configure it with this. Can do a ton of stuff. It's really slick. Um, as I mentioned, no plugins yet. Media is a pretty standard media library. Uh, you upload images. Uh, you can also do videos. Um, Here's data. So right now we have a page. You can also have posts, components, and layouts, and you can make custom tables, which are great. I don't do that much in WordPress. I did it a ton before WordPress, and maybe I would do that a lot more here. But those are some options there. Content takes you right back to posts. Site edits your page. And then we have our dashboard. And for the overview, you can choose days, 7 days, 30 days, all, et cetera. You can add blocks. There's, there's a lot here. So one of the things, many of the things I love, I love the idea of plugins. That's one of the things that made WordPress great is plugins. I love that it does static sites and yet lets you do database stuff. to build grids, um, just include sheets of data. Um, static sites are hard to do that with. So I'm pretty excited about this. And all I had to do to get it set up is go into xCloud, say I want a new server or a new site, pick in static and hit go. And we're ready to go. Give it a shot.
