skip to content

Deploy the Website Conveniently

2 min read

# web
# bash
Not in series

At First, I need to manually delete the original html folder and upload a new one to update my website.

Thus, I wrote an automatic script to deploy the website conveniently.

Script

#!/bin/bash
set -e
 
echo "Building the Astro project..."
cd /Users/weilai/Documents/Website/astro-chiri
npm run build
 
echo "Removing old Blogs directory..."
rm -rf /Users/weilai/Documents/Website/html5up-dimension/Blogs
 
echo "Moving built files to Blogs directory..."
mv /Users/weilai/Documents/Website/astro-chiri/dist /Users/weilai/Documents/Website/html5up-dimension/Blogs
 
HOST="user@your.server.com"
SRC="/Users/weilai/Documents/Website/html5up-dimension/"
DST="/usr/share/nginx/html"
 
echo "Syncing files to remote server..."
rsync -az --delete \
      -e "ssh" \
      "$SRC" "$HOST:$DST"
 
echo "Updating permissions on remote server..."
ssh "$HOST" "sudo chown -R www-data:www-data $DST"
 
echo "Deployment completed successfully!"

To avoid entering password every time I update the website, I upload my Macbook’s public key to the ECS server:

# Generate Public Key (Enter to Use Default Path)
ssh-keygen -t ed25519 -C "macbook-$(whoami)"
 
# Copy the Pulic Key to Server
ssh-copy-id -i ~/.ssh/id_ed25519.pub user@your.server.com

Beautiful Output

Color reference from 阿昆的科研日常

Clear output of npm run build:

npm run build > /dev/null

Colorful Output Using RGB

#!/bin/zsh
# foreground color
fg_rgb() {
  local r=$1 g=$2 b=$3
  printf '\033[38;2;%d;%d;%dm' "$r" "$g" "$b"
}
# background color
bg_rgb() {
  local r=$1 g=$2 b=$3
  printf '\033[48;2;%d;%d;%dm' "$r" "$g" "$b"
}
# reset
reset() { printf '\033[0m'; }
 
# example
fg_rgb 17 50 93; echo '17 50 93'; reset
bg_rgb 50 80 131; echo '50 80 131'; reset

Final Script

#!/bin/zsh
# foreground color
fg_rgb() {
  local r=$1 g=$2 b=$3
  printf '\033[38;2;%d;%d;%dm' "$r" "$g" "$b"
}
# background color
bg_rgb() {
  local r=$1 g=$2 b=$3
  printf '\033[48;2;%d;%d;%dm' "$r" "$g" "$b"
}
# reset
reset() { printf '\033[0m'; }
 
 
set -e
 
bg_rgb 17 50 93; echo "Building the Astro project..."; reset
echo
 
cd /Users/weilai/Documents/Website/astro-chiri
npm run build > /dev/null
 
bg_rgb 50 80 131; echo "Removing old Blogs directory..."; reset
echo
 
rm -rf /Users/weilai/Documents/Website/html5up-dimension/Blogs
 
bg_rgb 115 107 157; echo "Moving built files to Blogs directory..."; reset
echo
 
mv /Users/weilai/Documents/Website/astro-chiri/dist /Users/weilai/Documents/Website/html5up-dimension/Blogs
 
HOST="user@your.server.com"
SRC="/Users/weilai/Documents/Website/html5up-dimension/"
DST="/usr/share/nginx/html"
 
bg_rgb 183 131 175; echo "Syncing files to remote server..."; reset
echo
 
rsync -az --delete \
      -e "ssh" \
      "$SRC" "$HOST:$DST"
 
bg_rgb 245 166 115; echo "Updating permissions on remote server..."; reset
echo
 
ssh "$HOST" "sudo chown -R www-data:www-data $DST"
 
bg_rgb 252 219 114; echo "Deployment completed successfully!"; reset

Effect