Deploying My Portfolio Website: From Zero to Production with VPS, Staging, and GitHub Actions

Intro

Gw Adit, frontend dev yang stack utama Next.js + Tailwind + shadcn/ui. Tahun lalu gw bikin portfolio pake Next.js App Router, DAW-inspired design (timeline, tracks, clips), sama feature-based folder structure. Tapi selama ini portfolio cuma live di Vercel. Gak ada control penuh ke infrastructure.

Jadi gw mutusin: Deploy ke VPS sendiri. Gw pake Tencent Cloud Lighthouse karena low-cost, performa solid buat workload kecil. Setup staging environment (staging subdomain), otomasi CI/CD via GitHub Actions, plus monitoring (Prometheus + Grafana + Uptime Kuma) sama Telegram notifications buat health checks sama deploy alerts.

Artikel ini dokumen lengkapnya, dari nol (beli VPS) sampai production live, sama staging pipeline yang reliable. Jadi kalo lo juga mau deploy portfolio ke VPS, bisa follow step-by-step ini.

📦 Tech Stack & Prerequisites

Core:

Frontend: Next.js 15 (App Router), React, Tailwind CSS, shadcn/ui
Backend/Server: Node.js 22 LTS, PM2 buat process management, Nginx sebagai reverse proxy
Infrastructure: Tencent Cloud Lighthouse (Ubuntu 24.04 LTS) dengan Cloudflare DNS
CI/CD: GitHub Actions pake appleboy/ssh-action sama telegram-action
Monitoring: Prometheus + Node Exporter + Nginx Exporter + Alertmanager (ngirim alert ke Telegram), plus Uptime Kuma buat monitor uptime sama bisa trigger service restart

Domain & SSL:

Domain pake Cloudflare, contoh: YOUR_DOMAIN.com
Production: YOUR_DOMAIN.com → port 3000 (Next.js)
Staging: staging.YOUR_DOMAIN.com → port 3002 (Next.js dev mode)
SSL: Let's Encrypt pake DNS-01 challenge (Cloudflare plugin) karena HTTP-01 gabisa karena Basic Auth di nginx

Notifications:

Telegram bot (@YOUR_BOT_USERNAME) ke chat_id YOUR_CHAT_ID
Notif untuk deploy success/failure, health checks, sama rollback alerts

☁️ 1. Tencent Cloud Lighthouse Setup

Why Lighthouse? Lighthouse pilihannya karena harganya murah, cuma ~$2-3/month buat 2 vCPU, 2 GB RAM, plus 40 GB SSD. Performanya solid untuk workload kecil kayak portfolio. Lokasi Singapore, latency ke Jakarta oke. Include bandwidth 500GB per bulan, more than enough.

Step 1: Buy Lighthouse Instance

Login ke Tencent Cloud Console → Cloud Virtual Machine (CVM) → Lighthouse
Create instance:
- OS: Ubuntu 24.04 LTS
- Region: Singapore
- Instance type: Lighthouse (2 vCPU, 2 GB RAM, 40 GB SSD)
- System disk: 40 GB SSD (included)
- Network: Assign public IP, enable port 22 (SSH), 80/443 (HTTP/HTTPS), plus monitoring ports (9090, 4000, 8384, 9113, 9652)
- Security group: Allow inbound 22 (SSH), 80 (HTTP), 443 (HTTPS), and monitoring ports
Create → generate SSH key or password (disarankan SSH key)

Step 2: SSH Setup & Initial Security

bash
Loading...
Loading syntax highlighting...

Security tweaks:

Change SSH port (optional, 22 → custom port misal 2222)
Disable password auth, pake SSH key only
Install ufw atau fail2ban (opsional)

🐧 2. VPS Provisioning: System Packages & Tools

bash
Loading...
Loading syntax highlighting...

Buat folder structure untuk apps:

bash
Loading...
Loading syntax highlighting...

🔧 3. Next.js App: Build & Run Configuration

Project setup (local/dev):

bash
Loading...
Loading syntax highlighting...

PM2 config: File ecosystem.config.js di root project:

javascript
Loading...
Loading syntax highlighting...

Start both:

bash
Loading...
Loading syntax highlighting...

🌐 4. Nginx Reverse Proxy + SSL

Why Nginx?

Port 80/443 → single entry point (better security + SSL termination)
Rate limiting, security headers, gzip compression
Multiple apps via subpath/subdomain (nanti bisa scale)

Nginx config untuk production (/etc/nginx/sites-available/portfolio.conf):

nginx
Loading...
Loading syntax highlighting...

Enable & test:

bash
Loading...
Loading syntax highlighting...

🪪 5. SSL Certificate with Certbot (DNS-01 Challenge)

Karena production domain pake Cloudflare, dan nginx sudah pake Basic Auth (monitoring subdomains), HTTP-01 challenge gagal. Solusi: pake DNS-01 challenge via Cloudflare API.

Setup Cloudflare API token:

Cloudflare Dashboard → My Profile → API Tokens
Create Token → Edit zone DNS → Zone: YOUR_DOMAIN.com
Copy token

Issue cert untuk production:

bash
Loading...
Loading syntax highlighting...

~/.secrets/cloudflare.ini:

dns_cloudflare_email = your-email@example.com
dns_cloudflare_api_token = YOUR_CLOUDFLARE_API_TOKEN

Issue cert untuk staging (staging subdomain):

bash
Loading...
Loading syntax highlighting...

Auto-renew (crontab):

bash
Loading...
Loading syntax highlighting...

🚀 6. GitHub Actions CI/CD Pipeline

Workflow Production (`deploy.yml`)

Path: .github/workflows/deploy.yml

yaml
Loading...
Loading syntax highlighting...

Workflow Staging (`deploy-dev.yml`)

yaml
Loading...
Loading syntax highlighting...

GitHub Secrets:

VPS_HOST: YOUR_VPS_IP
VPS_USER: YOUR_USERNAME
VPS_SSH_KEY: Private SSH key (RSA 4096) untuk akses VPS
TELEGRAM_BOT_TOKEN: Token bot Telegram
TELEGRAM_CHAT_ID: YOUR_CHAT_ID

📜 7. Deploy Script: Production & Staging

Production Deploy Script (`/home/YOUR_USERNAME/apps/next-portfolio-blog/deploy.sh`)

bash
Loading...
Loading syntax highlighting...

Staging Deploy Script (`/home/YOUR_USERNAME/apps/next-portfolio-blog-dev/deploy.sh`)

bash
Loading...
Loading syntax highlighting...

Key differences prod vs staging:

Prod: npm ci --omit=dev --ignore-scripts (faster, no dev deps)
Staging: npm ci (full dev deps for hot reload, dev mode)
Prod: Next.js start (static build) vs Staging: npm run dev (dev server)
Port: 3000 (prod) vs 3002 (staging)
PM2 process name: portfolio-blog vs portfolio-blog-dev

📊 8. Monitoring Stack (Prometheus + Grafana + Uptime Kuma)

Architecture:

VPS (YOUR_VPS_IP)
├── Prometheus (9090)        → scrapes metrics
├── Alertmanager (9093)      → alerts → Telegram
├── Grafana (4000, /grafana/) → dashboards (Basic Auth)
├── Node Exporter (9100)     → system metrics
├── Nginx Exporter (9113)    → nginx metrics
├── PM2 Exporter (9652)      → app process metrics
└── Uptime Kuma (3001)       → uptime monitoring, service restart capabilities

Deploy monitoring? Bisa pake docker-compose atau manual services. Prometheus juga bisa jalan sebagai systemd service atau via PM2.

Uptime Kuma Setup: Tool ini penting buat monitor uptime sama bisa trigger restart service otomatis. Cara setup:

Install via npm: npm install -g uptime-kuma (atau pake Docker: docker run -d --restart=always -p 3001:3001 -v /path/to/data:/app/data louislam/uptime-kuma)
Akses: http://YOUR_VPS_IP:3001
Tambah monitors:
- HTTP(s) ke https://YOUR_DOMAIN.com (production)
- HTTP(s) ke https://staging.YOUR_DOMAIN.com (staging)
- TCP ke YOUR_VPS_IP:3000 (Next.js prod)
- TCP ke YOUR_VPS_IP:3002 (Next.js dev)
- Ping ke YOUR_VPS_IP
Service restart: Uptime Kuma bisa setup webhook → GitHub Actions atau custom script yang otomatis restart PM2 services kalo downtime terdeteksi.
Status page: Bisa enable public status page di Uptime Kuma kalo perlu share uptime ke client.

Prometheus config snippet (/home/YOUR_USERNAME/dashboard/monitoring/prometheus.yml):

yaml
Loading...
Loading syntax highlighting...

Grafana access: http://YOUR_VPS_IP:4000 (Basic Auth: YOUR_GRAFANA_USER (default: admin))

Alertmanager rules → Telegram jika:

CPU > 85% for 5m
Memory < 10% free
HTTP 5xx from nginx exporter
PM2 process down

(Rinci setup monitoring ini di dokumentasi terpisah, tapi intinya semua metrics dikumpul dan visualisasi di Grafana, plus uptime tracking via Uptime Kuma.)

🔄 9. Rollback & Recovery Strategy

Git-based rollback (built into deploy script):

Setiap deploy: simpan commit hash ke $ROLLBACK_DIR/last_known_good.commit
Kalau build/health check gagal → git reset --hard $CURRENT_COMMIT + rebuild + reload PM2
Rollback juga terkirim Telegram notification

Manual rollback script (rollback.sh untuk production, rollback-dev.sh untuk staging):

bash
Loading...
Loading syntax highlighting...

Database/backup? Portfolio ini statis (Markdown content, no DB). Tapi kalo ada data (misal transactions ledger via Zenstack), setup backup routine (cron + remote storage).

🏗️ 10. Directory Structure on VPS

/home/YOUR_USERNAME/
├── apps/
│   ├── next-portfolio-blog/          # production (branch: main)
│   │   ├── .git/
│   │   ├── .next/                    # build output
│   │   ├── node_modules/
│   │   ├── ecosystem.config.js       # PM2 config
│   │   └── deploy.sh                 # production deploy script
│   │
│   └── next-portfolio-blog-dev/       # staging (branch: dev)
│       ├── .git/
│       ├── .next/
│       ├── node_modules/
│       ├── ecosystem.config.js
│       └── deploy.sh                 # staging deploy script
│
├── dashboard/
│   └── monitoring/                    # Prometheus, Grafana, exporters configs
│
├── portfolio-deploy.log               # centralized deploy logs
├── portfolio-rollback/                 # last commit hash (prod)
└── portfolio-rollback-dev/             # last commit hash (staging)

📝 11. Feature-Based Folder Structure (Codebase Convention)

Untuk maintainability, repo pake feature-based structure (bukan page-based):

/src
├── features/
│   ├── landing-page/                  # homepage route (/)
│   │   ├── sections/                  # ALL landing page sections grouped
│   │   │   ├── hero/
│   │   │   ├── about/
│   │   │   ├── work/
│   │   │   ├── contact/
│   │   │   └── index.ts               # export all sections
│   │   ├── page.tsx                   # landing page composable
│   │   └── layout.tsx
│   │
│   ├── blog/                          # /blog route
│   │   ├── page.tsx
│   │   └── components/
│   │
│   └── projects/                      # /projects/[slug] route
│       ├── page.tsx
│       └── ProjectDetail/
│
├── components/
│   ├── ui/                            # shadcn/ui components (reusable)
│   ├── layout/                        # Navbar, Footer, etc.
│   └── theme/                         # ThemeProvider, DarkMode
│
├── lib/                               # utilities (only if shared by 2+ features)
│   ├── utils.ts
│   └── constants.ts
│
├── content/                           # Markdown content (blog posts, projects)
├── public/                            # static assets
└── styles/                            # global CSS

Rule of thumb:

Each feature = route/page group
sections/ only exist di feature yang punya many sections (like landing-page)
_shared/ untuk utils yang dipakai >2 feature (bukan di lib/)
Data local ke feature, jangan global state kecuali truly shared

✅ 12. Checklist & Verification

Before claiming "deploy done", verify:

🎯 Conclusion

Dengan setup ini, portfolio auto-deploy setiap push ke:

main → production (YOUR_DOMAIN.com)
dev → staging (staging.YOUR_DOMAIN.com)

Kenapa setup ini worth it?

Isolation: Staging terpisah dari production. Break things tanpa takut bikin production down.
Speed: Staging jalan di dev mode (npm run dev), gak perlu build step, hot reload langsung.
Safety: Auto rollback kalo build atau health check gagal, plus Telegram alerts.
Observability: Prometheus + Grafana dashboards lengkap, ditambah Uptime Kuma buat tracking uptime.
Cost-effective: Cuma perlu satu Lighthouse VPS, ~$2-3/bulan.
Full control: Bisa custom apapun, dari security headers sampe performance tuning.

Next improvements yang bisa ditambahkan:

Blue-green deployment (dual directories, swap symlink). Zero downtime
Preview deployments per PR (temporary subdomain pr-123.staging.YOUR_DOMAIN.com)
Cache optimization (nginx caching, Next.js Image Optimization pake Cloudinary)
CDN integration (Cloudflare Pages untuk static assets)

📚 Resources & References

Written by Adit — Frontend Developer, Jakarta Selatan.
Portfolio: https://YOUR_DOMAIN.com | GitHub: @YOUR_GITHUB_USERNAME

Deploying My Portfolio Website: From Zero to Production with VPS, Staging, and GitHub Actions

Intro

📦 Tech Stack & Prerequisites

☁️ 1. Tencent Cloud Lighthouse Setup

Step 1: Buy Lighthouse Instance

Step 2: SSH Setup & Initial Security

🐧 2. VPS Provisioning: System Packages & Tools

🔧 3. Next.js App: Build & Run Configuration

🌐 4. Nginx Reverse Proxy + SSL

🪪 5. SSL Certificate with Certbot (DNS-01 Challenge)

🚀 6. GitHub Actions CI/CD Pipeline

Workflow Production (`deploy.yml`)

Workflow Staging (`deploy-dev.yml`)

📜 7. Deploy Script: Production & Staging

Production Deploy Script (`/home/YOUR_USERNAME/apps/next-portfolio-blog/deploy.sh`)

Staging Deploy Script (`/home/YOUR_USERNAME/apps/next-portfolio-blog-dev/deploy.sh`)

📊 8. Monitoring Stack (Prometheus + Grafana + Uptime Kuma)

🔄 9. Rollback & Recovery Strategy

🏗️ 10. Directory Structure on VPS

📝 11. Feature-Based Folder Structure (Codebase Convention)

✅ 12. Checklist & Verification

🎯 Conclusion

📚 Resources & References

Related Posts

Why I Rebuilt My Portfolio

VPS Monitoring Stack — Grafana, Prometheus & Blackbox Exporter

Building a Habit Tracker with Next.js 16, Tailwind v4 & shadcn/ui

Intro

📦 Tech Stack & Prerequisites

☁️ 1. Tencent Cloud Lighthouse Setup

Step 1: Buy Lighthouse Instance

Step 2: SSH Setup & Initial Security

🐧 2. VPS Provisioning: System Packages & Tools

🔧 3. Next.js App: Build & Run Configuration

🌐 4. Nginx Reverse Proxy + SSL

🪪 5. SSL Certificate with Certbot (DNS-01 Challenge)

🚀 6. GitHub Actions CI/CD Pipeline

Workflow Production (deploy.yml)

Workflow Staging (deploy-dev.yml)

📜 7. Deploy Script: Production & Staging

Production Deploy Script (/home/YOUR_USERNAME/apps/next-portfolio-blog/deploy.sh)

Staging Deploy Script (/home/YOUR_USERNAME/apps/next-portfolio-blog-dev/deploy.sh)

📊 8. Monitoring Stack (Prometheus + Grafana + Uptime Kuma)

🔄 9. Rollback & Recovery Strategy

🏗️ 10. Directory Structure on VPS

📝 11. Feature-Based Folder Structure (Codebase Convention)

✅ 12. Checklist & Verification

🎯 Conclusion

📚 Resources & References

Related Posts

Why I Rebuilt My Portfolio

VPS Monitoring Stack — Grafana, Prometheus & Blackbox Exporter

Building a Habit Tracker with Next.js 16, Tailwind v4 & shadcn/ui

Workflow Production (`deploy.yml`)

Workflow Staging (`deploy-dev.yml`)

Production Deploy Script (`/home/YOUR_USERNAME/apps/next-portfolio-blog/deploy.sh`)

Staging Deploy Script (`/home/YOUR_USERNAME/apps/next-portfolio-blog-dev/deploy.sh`)