How to Deploy Your Astro Site

Astro is a modern static site builder that enables fast, optimised frontend delivery using a component-based architecture. In this guide, we walk you through deploying an Astro project to an Ubuntu server using CloudRay, a platform for managing infrastructure and running automation Bash scripts at scale.

This guide assumes you have a basic Astro project already created. However, if you’ve not created an Astro project, checkout the Astro getting started Guide to learn more and choose from the several examples to build your own Astro project.

Adding Servers to CloudRay
Create a Deployment Script
Define the Variable Group
Run the Deployment Script
Next Step
Summary

Adding Servers to CloudRay

Before getting started, make sure your machine is added to a CloudRay project and connected using the CloudRay Agent.

Create a Deployment Script

Now that your machine is connected to CloudRay, let’s create a reusable Bash script to automate the deployment process. You need to follow these steps to create the script in CloudRay.

Screenshot for deployment script of Astro site

Go to Scripts in your CloudRay project
Click New Script
Name: Deploy Astro Site. You can give it any name of your choice
Copy this code:

#!/bib/bash

# Exit immediately if a command exits with a non-zero status
set -e

# -----------------------------
# Install Node.js and dependencies
# -----------------------------
apt update && apt install -y curl unzip git
curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
apt install -y nodejs

# -----------------------------
# Clone the Astro Project
# -----------------------------
rm -rf {{clone_dir}}
git clone {{repo_url}} {{clone_dir}}
cd {{clone_dir}}

# -----------------------------
# Build the Astro Project
# -----------------------------
npm install
npm run build

# -----------------------------
# Deploy to Target Directory
# -----------------------------
mkdir -p {{deploy_dir}}
cp -r dist/* {{deploy_dir}}

# -----------------------------
# Install and Configure Nginx
# -----------------------------
apt install -y nginx
rm -f /etc/nginx/sites-enabled/default

cat > /etc/nginx/sites-available/astro-site <<EOF
server {
    listen 80;
    server_name _;

    root {{deploy_dir}};
    index index.html;

    location / {
        try_files \$uri \$uri/ =404;
    }
}
EOF

ln -s /etc/nginx/sites-available/astro-site /etc/nginx/sites-enabled/astro-site
nginx -t && systemctl restart nginx

Here is what the Deploy Astro Site does:

Install Node.js and dependencies
Clone your Astro project from a Git repository
Build the Astro site
Copy the production files to {{deploy_dir}}
Installs and configure Nginx

Define the Variable Group

Now, before running the deployment script, you need to define values for the placeholders {{repo_url}}, {{deploy_dir}}, and {{clone_dir}} used in the scrips. CloudRay processes all scripts as Liquid templates. This allows you to use variables dynamically across different servers.

Screenshot of adding a new variable group

To ensure that these values are automatically substituted when the script runs, follow these steps to create a variable Group:

Navigate to Variable Groups: In your CloudRay project, go to “Scripts” in the top menu and click on “Variable Groups”.
Create a new Variable Group: Click on “Variable Group”.
Add the following variables:

repo_url: The URL of your GitHub repository
deploy_dir: Your Astro deployment directory
clone_dir: This is the name of the GitHub repository

Since the variables is setup, proceed with running the scripts with CloudRay

Run the Deployment Script

CloudRay uses Runlogs to execute scripts on your servers while providing real-time logs of the execution process.

Once the script is saved, you can deploy your Astro site by creating a Runlog:

Navigate to Runlogs: In your CloudRay project, go to the Runlogs section in the top menu.
Create a New Runlog: Click on New Runlog.
Configure the Runlog: Fill in the required details:

Server: Select the server you added earlier.
Script: Choose the “Deploy Astro Site”
Variable Group (optional): Select the variable group you created earlier.

Execute the Script: Click on Run Now to start the execution.

Screenshot of the output of the setup Nextjs script

CloudRay will automatically connect to your server, run the Deploy Astro Site, and provide live logs to track the process. If any errors occur, you can review the logs to troubleshoot the issue.

Once the deployment is complete, you can visit http://<your-server-ip>. You should see your Astro site up and running

Next Step

To improve your deployment and security:

You can use Let’s Encrypt to add HTTPS support
Set up automatic redeployment with webhooks or CI/cd

Summary

With CloudRay, deploying your Astro site to Ubuntu becomes a structured and repeatable process. Scripts remain organised, server access is centralised, and you can easily tweak configurations with variable groups.