In this post, I’m not gonna teach you the complex terms, unlike the YouTube tutorials, and I won't say “Learn CI/CD in 1 hour.”
Let’s cut the noise. We all know what it is and why we need it. I’m gonna stick to How.
Prerequisite: You own a personal VPS (like DigitalOcean or EC2) and you have a Next.js app running on it manually.
Let’s assume you are tired of dragging files. Here is how we automate it:
1. Configure the repo: Go to the GitHub repo, and select the action tab, find Node.js in Continuous integration. Then just commit the file, we’ll set this up later.
2. The Handshake (SSH Keys) 🔑 GitHub needs permission to enter your server without a password.
Generate an SSH key pair locally.
Add the Public Key to your VPS (~/.ssh/authorized_keys).
Copy the Private Key.
3. The Vault (GitHub Secrets) 🔒 Never put passwords in your code. Go to Repo Settings > Secrets and add:
SSH_PRIVATE_KEY (The key you just copied)
HOST (Your VPS IP address)
USERNAME (Usually 'root' or 'ubuntu')
4. The Worker (The YAML File) 🤖 Create .github/workflows/deploy.yml and paste this. This is the exact logic that logs in and updates your site:
YAML
name: Deploy to VPS
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Deploy via SSH
uses: appleboy/ssh-action@v1.0.3
with:
host: ${{ secrets.HOST }}
username: ${{ secrets.USERNAME }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
script: |
# Go to your project folder
cd /var/www/my-next-app
# Get the new code
git pull origin main
# Install new packages & rebuild
npm install
npm run build
# Restart the live server
pm2 restart next-app
5. The Result? You push code from the IDE, and you go grab a coffee. ☕
By the time you sit back down, GitHub has logged in, pulled the changes, rebuilt the site, and restarted the server using PM2.
No dragging files. No manual SSH. No "oops, I broke production."
It’s not magic, it’s just a script. And you can set it up this weekend.