Preamble

It must be acknowledged that Hexo blogs offer considerably more convenient deployment settings compared to Astro blogs. As a first-time user of Astro, I found that deploying an Astro blog on a VPS requires considerable time and exploration. Below, I share a one-click deployment script, along with explanations of the script and parameter configurations.

The primary tool required is rsync. To ensure security, I have configured my VPS to accept only key-based authentication, which necessitates the use of a specified private key during the upload process.

Regarding why rsync is employed as the preferred tool, it primarily offers the advantage of circumventing the necessity to configure repositories and perform operations such as add, commit, and push, as required by Git, thereby streamlining the deployment process. Furthermore, rsync facilitates efficient file synchronization by comparing files and uploading only those that have been modified or newly created, thereby avoiding redundant transfers of identical files. This approach effectively conserves both computational resources and time, rendering it an exceptionally efficient solution.

Script

#!/bin/bash

# Astro Blog Compilation and Upload Script
# macOS Exclusive

set -e

# Color Definitions
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color

# Configuration Variables
REMOTE_HOST="Add your own IP" # NEED TAILOR!!!
REMOTE_PORT=port # NEED TAILOR!!!
SSH_KEY="$HOME/.ssh/your private key" # NEED TAILOR!!!
DIST_DIR="dist" 

echo -e "${BLUE}========================================${NC}"
echo -e "${BLUE}Astro Blog Compilation and Upload Tool${NC}"
echo -e "${BLUE}========================================${NC}"
echo ""

# Verify Necessary Files and Tools
echo -e "${YELLOW}[1/4] Verifying environment...${NC}"

if [ ! -f "package.json" ]; then
    echo -e "${RED}✗ Error: package.json not found. Please run this script from the project root directory.${NC}"
    exit 1
fi

if ! command -v npm &> /dev/null; then
    echo -e "${RED}✗ Error: npm is not installed${NC}"
    exit 1
fi

if ! command -v rsync &> /dev/null; then
    echo -e "${RED}✗ Error: rsync is not installed${NC}"
    exit 1
fi

if [ ! -f "$SSH_KEY" ]; then
    echo -e "${RED}✗ Error: SSH key does not exist: $SSH_KEY${NC}"
    exit 1
fi

echo -e "${GREEN}✓ Environment verification complete${NC}"
echo ""

# Step 1: Compilation
echo -e "${YELLOW}[2/4] Compiling Astro project...${NC}"
read -p "Proceed with compilation? (y/n) " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
    if npm run build; then
        echo -e "${GREEN}✓ Compilation successful${NC}"
    else
        echo -e "${RED}✗ Compilation failed${NC}"
        exit 1
    fi
else
    echo -e "${YELLOW}⊘ Compilation skipped${NC}"
fi
echo ""

# Check dist Folder
if [ ! -d "$DIST_DIR" ]; then
    echo -e "${RED}✗ Error: $DIST_DIR directory not found${NC}"
    exit 1
fi

dist_size=$(du -sh "$DIST_DIR" | cut -f1)
echo -e "${BLUE}dist directory size: $dist_size${NC}"
echo ""

# Step 2: Obtain Upload Target Path
echo -e "${YELLOW}[3/4] Configuring upload parameters...${NC}"
read -p "Enter the target path on the remote server (default: /var/www/blog): " remote_path
remote_path=${remote_path:-/var/www/blog}
echo ""

# Step 3: Upload
echo -e "${YELLOW}[4/4] Uploading files to server...${NC}"
echo -e "${BLUE}Remote server: $REMOTE_HOST:$REMOTE_PORT${NC}"
echo -e "${BLUE}SSH key: $SSH_KEY${NC}"
echo -e "${BLUE}Target path: $remote_path${NC}"
echo ""

read -p "Confirm upload? (y/n) " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
    echo -e "${YELLOW}Starting upload...${NC}"
    
    if rsync -avz --delete \
        -e "ssh -p $REMOTE_PORT -i $SSH_KEY" \
        "$DIST_DIR/" \
        "root@$REMOTE_HOST:$remote_path/"; then
        echo ""
        echo -e "${GREEN}========================================${NC}"
        echo -e "${GREEN}✓ Upload successful!${NC}"
        echo -e "${GREEN}========================================${NC}"
    else
        echo -e "${RED}✗ Upload failed${NC}"
        exit 1
    fi
else
    echo -e "${YELLOW}⊘ Upload cancelled${NC}"
    exit 0
fi

Usage Instructions

  1. Save the script: Save the script as deploy.sh

    chmod +x deploy.sh
  2. Run the script:

    ./deploy.sh

PS: Before selecting the path, ensure that the directory has been created on your server.

Detailed Explanations

Script Functionality Overview:

The script verifies the presence of npm, rsync, and SSH keys in the environment. It provides an interactive compilation prompt allowing users to execute npm run build conditionally. Following compilation, it displays the size of the dist directory. The script permits customization of the remote server’s target directory with a default value of /var/www/blog. Prior to executing rsync, the script requests user confirmation. Distinct colors are used throughout the output to enhance readability and distinguish different types of information.

rsync Command Parameter Explanations:

  • -avz: Archive mode, verbose output, and compressed transfer
  • --delete: Removes files in the remote directory that do not exist locally (maintains synchronization)
  • -e "ssh -p $REMOTE_PORT -i $SSH_KEY": Establishes connection using the specified port and SSH key

Important Considerations:

Ensure that SSH key permissions are correctly configured: chmod 600 ~/.ssh/your_private_key. The script currently uses root as the remote user; this may be modified to alternative usernames as needed. It is recommended to test the SSH connection before the initial script execution: ssh -i ~/.ssh/your_private_key your_account@your_ip.

I trust this tutorial will prove beneficial in facilitating the efficient deployment of your blog.

Automatically Deploy Your Astro Blog

Author

Shayne Wong

Publish Date

10 - 17 - 2025

License

Shayne Wong

Avatar
Shayne Wong

All time is no time when it is past.