---
title: "How To Deploy Static Website Astro.JS on VPS Servers"
description: "Step-by-step guide to deploying an Astro.js static site on a VPS server using CloudPanel, with NVM, SSL, and Cloudflare CDN."
date: 2026-07-02
categories: ["vps"]
tags: ["cloudpanel","astro","tutorials"]
---

import Button from "../../components/widgets/Button.astro";
import { Picture } from "astro:assets";
import img1 from "../../assets/images/23/cloudpanel-change-root.jpeg";
import img2 from "../../assets/images/23/cloudflare_dns.jpeg";
import YouTubeEmbed from "../../components/widgets/YouTubeEmbed.astro";

Free hosting platforms like [Cloudflare Pages](https://www.bitdoze.com/deploy-astrojs-cloudflare/), Vercel, and Netlify work well for Astro sites. But they come with limits: build minutes, bandwidth caps, or platform lock-in. If you want full control over your server, deploying Astro on your own VPS is straightforward.

CloudPanel is a free hosting panel that runs on Nginx. It handles site management, SSL, and user isolation through a web UI. You can deploy Astro as a Static HTML site and let CloudPanel serve the built files directly, no Node.js process running at runtime.

<Button link="https://go.bitdoze.com/do" text="DigitalOcean $100 Free" />
<Button link="https://go.bitdoze.com/vultr" text="Vultr $100 Free" />
<Button link="https://go.bitdoze.com/hetzner" text="Hetzner €⁠20 Free" />
<Button link="https://go.bitdoze.com/hostinger-vps" text="Hostinger VPS" />

## Prerequisites

Before you start, you need:

- **A VPS server.** Any provider works. If you're choosing one, check the [DigitalOcean vs Vultr vs Hetzner](https://www.wpdoze.com/digitalocean-vs-vultr-vs-hetzner/) comparison.
- **CloudPanel installed.** Follow the [Install CloudPanel and Host Node.js Apps](https://www.bitdoze.com/install-cloudpanel-host-nodejs/) guide if you don't have it yet.
- **A domain name** pointed to your VPS IP.

You can also deploy Astro on a VPS with [Coolify](https://www.bitdoze.com/coolify-install-heroku-alternative/) or [EasyPanel](https://www.bitdoze.com/deploy-astro-easypanel/) if you prefer a different panel.

> If you want to monitor CPU, memory, and disk space on your server, check: [How To Monitor Server and Docker Resources](https://www.bitdoze.com/sever-monitoring/)

## Video walkthrough

<YouTubeEmbed
  url="https://www.youtube.com/embed/kMtVBvO87pg"
  label="How To Deploy Static Website Astro.JS on VPS Servers"
/>

## Deploy Astro.js on VPS with CloudPanel

There are two approaches: creating a **Static HTML site** (recommended for pure static output) or a **Node.js site** in CloudPanel. The Static HTML approach is simpler. CloudPanel serves the built files directly from Nginx with no Node.js process running.

### Step 1: Add a static site in CloudPanel

1. Log in to your CloudPanel admin panel.
2. Go to **Sites** > **Add Site** > **Create a Static HTML Site**.
3. Enter your domain name and create the site user credentials.
4. After the site is created, edit it and change the **Root Directory** to point to the `dist` directory:

```
htdocs/www.yourdomain.com/dist
```

Astro outputs its production build into `dist/` by default. CloudPanel needs to serve from that directory, not the project root.

<Picture
  src={img1}
  alt="CloudPanel change root directory"
/>

### Step 2: Point DNS to your VPS

Add an A record in your DNS provider pointing your domain to the VPS IP address. If you use Cloudflare, add the A record there and enable the proxy for CDN benefits and DDoS protection.

<Picture
  src={img2}
  alt="Cloudflare DNS settings"
/>

### Step 3: Generate an SSL certificate

In CloudPanel, go to your site's **SSL/TLS** section and click **New Let's Encrypt Certificate**. CloudPanel handles the certificate generation and Nginx configuration automatically.

Your site will now be accessible over HTTPS.

### Step 4: Install Node.js on the site user

Astro needs Node.js to build the site. CloudPanel creates isolated Linux users per site, so you need to install Node.js under the site user, not as root.

SSH into your VPS and switch to the site user:

```bash
ssh root@your-server-ip
sudo su - www.yourdomain.com
```

Install NVM (Node Version Manager):

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.5/install.sh | bash
source ~/.bashrc
```

Install Node.js 22 LTS. This is the minimum version Astro 6 requires:

```bash
nvm install 22
nvm alias default 22
```

Verify the installation:

```bash
node -v
# Should output v22.x.x
```

### Step 5: Clone and set up your Astro project

Remove the default CloudPanel placeholder files and clone your project:

```bash
cd htdocs
rm -rf www.yourdomain.com
git clone git@github.com:your-username/your-astro-repo.git www.yourdomain.com
cd www.yourdomain.com
npm install
```

If you don't have a project yet, you can create one from scratch:

```bash
cd htdocs
rm -rf www.yourdomain.com
npm create astro@latest www.yourdomain.com
cd www.yourdomain.com
npm install
```

For a ready-made blog theme, check [Bitdoze Astro Theme](https://github.com/bitdoze/bitdoze-astro-theme) or [AstroWind](https://github.com/arthelokyo/astrowind).

Make sure the project name matches the directory CloudPanel expects (`www.yourdomain.com`).

### Step 6: Build the site

Once you've configured your site and added content, build the production version:

```bash
npm run build
```

This generates the static files in the `dist/` directory. Since CloudPanel's root directory is already set to `dist/`, your site is now live.

After building, verify it works by visiting your domain in a browser.

### Step 7: Rebuilding after changes

Every time you push new content or make changes, you need to rebuild:

```bash
cd htdocs/www.yourdomain.com
git pull
npm run build
```

If you want automatic deployments on every push, set up a deploy webhook:

1. Create a simple shell script on your VPS that pulls and rebuilds.
2. Use a GitHub webhook or CloudPanel's cron jobs to trigger it.

Alternatively, you can set up [CloudPanel's DPLOY](https://www.cloudpanel.io/docs/v2/dploy/installation/) for Git-based deployments.

<Button link="https://go.bitdoze.com/do" text="DigitalOcean $100 Free" />
<Button link="https://go.bitdoze.com/vultr" text="Vultr $100 Free" />
<Button link="https://go.bitdoze.com/hetzner" text="Hetzner €⁠20 Free" />
<Button link="https://go.bitdoze.com/hostinger-vps" text="Hostinger VPS" />

## Alternative: use CloudPanel's Node.js site type

Instead of the Static HTML approach, you can create a **Node.js site** in CloudPanel. This gives you a managed Node.js environment with NVM built in, so you don't need to install it manually.

1. Click **Add Site** > **Create a Node.js Site**.
2. Select Node.js version **22 LTS**.
3. Set the app port (e.g., 3000).
4. SSH in as the site user, clone your project, and build with `npm run build`.
5. Point the root directory to `dist/`.

The Node.js site type is mainly useful if you later want to switch to SSR with an adapter. For a purely static site, the Static HTML approach uses fewer resources since there's no Node.js process running.

## Conclusions

Deploying Astro on your own VPS with CloudPanel is a practical option when you outgrow free hosting limits or want more control. The Static HTML site type is the simplest approach: CloudPanel serves the built files directly from Nginx, no Node.js process needed at runtime.

Put Cloudflare in front of it for CDN caching and security, and you get performance comparable to any managed hosting platform.

<Button link="https://go.bitdoze.com/do" text="DigitalOcean $100 Free" />
<Button link="https://go.bitdoze.com/vultr" text="Vultr $100 Free" />
<Button link="https://go.bitdoze.com/hetzner" text="Hetzner €⁠20 Free" />
<Button link="https://go.bitdoze.com/hostinger-vps" text="Hostinger VPS" />

If you want a web panel that also works as a reverse proxy for Docker containers, check this course:

<Button
  link="https://webdoze.net/courses/cloudpanel-setup/"
  text="CloudPanel Setup Course"
/>

For more Astro deployment options:

- [Deploy Astro.js on Cloudflare Pages](https://www.bitdoze.com/deploy-astrojs-cloudflare/) (free, zero-config hosting)
- [Astro deployment docs](https://docs.astro.build/en/guides/deploy/) (covers every supported platform)