Bitdoze Logo
5 min read
vps
Dragos

How To Deploy Static Website Astro.JS on VPS Servers

Step-by-step guide to deploying an Astro.js static site on a VPS server using CloudPanel, with NVM, SSL, and Cloudflare CDN.

How To Deploy Static Website Astro.JS on VPS Servers
#Cloudpanel#Astro#Tutorials

Free hosting platforms like Cloudflare Pages, 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.

DigitalOcean $100 Free Vultr $100 Free Hetzner €⁠20 Free Hostinger VPS

Prerequisites

Before you start, you need:

You can also deploy Astro on a VPS with Coolify or 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

Video walkthrough

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.

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.

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:

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

Install NVM (Node Version Manager):

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:

nvm install 22
nvm alias default 22

Verify the installation:

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:

cd htdocs
rm -rf www.yourdomain.com
git clone [email protected]: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:

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 or 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:

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:

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 for Git-based deployments.

DigitalOcean $100 Free Vultr $100 Free Hetzner €⁠20 Free 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.

DigitalOcean $100 Free Vultr $100 Free Hetzner €⁠20 Free Hostinger VPS

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

CloudPanel Setup Course

For more Astro deployment options:

Related Posts