Chapter 3

Chapter 3: Deploy Hugo Site ke Server

Sekarang kita akan build Hugo site dan upload ke server yang sudah di-setup.

Build Hugo Site

Di komputer lokal Anda, di directory Hugo project:

# Masuk ke Hugo project directory
cd /path/to/your/hugo-site

# Build untuk production
hugo --minify

# Output akan ada di folder ./public
ls public/

Output:

blog/  css/  index.html  js/  tutorials/  ...

Folder public/ ini yang akan kita upload ke server.

Upload Methods

Ada 3 cara upload file ke server:

Method 1: SCP (Simple & Direct)

Mac/Linux:

# Upload folder public ke server
scp -r public/* deploy@YOUR_SERVER_IP:/var/www/yourdomain.com/html/

# Contoh:
scp -r public/* deploy@139.59.123.45:/var/www/yourdomain.com/html/

Windows (PowerShell):

scp -r public/* deploy@YOUR_SERVER_IP:/var/www/yourdomain.com/html/

Atau pakai WinSCP (GUI):

  1. Download WinSCP
  2. Connect: Host: YOUR_SERVER_IP, User: deploy
  3. Drag & drop folder public/* ke /var/www/yourdomain.com/html/

Rsync hanya upload file yang berubah:

# Install rsync (jika belum ada)
sudo apt install rsync

# Sync files
rsync -avz --delete public/ deploy@YOUR_SERVER_IP:/var/www/yourdomain.com/html/

# Flags:
# -a : archive mode (preserve permissions)
# -v : verbose (show progress)
# -z : compress during transfer
# --delete : delete files di server yang tidak ada di local

Method 3: Git Deploy (Advanced)

Setup Git repository di server:

Di server:

# Install git
sudo apt install git -y

# Create bare repo
mkdir -p ~/repos/site.git
cd ~/repos/site.git
git init --bare

# Create post-receive hook
cat > hooks/post-receive << 'EOF'
#!/bin/bash
GIT_WORK_TREE=/var/www/yourdomain.com/html
git --work-tree=$GIT_WORK_TREE checkout -f
EOF

chmod +x hooks/post-receive

Di komputer lokal:

# Add remote
git remote add production deploy@YOUR_SERVER_IP:~/repos/site.git

# Push to deploy
git add .
git commit -m "Deploy update"
git push production master

Automated Deploy Script

Buat script untuk automate build & deploy:

deploy.sh:

#!/bin/bash

echo "🏗️  Building Hugo site..."
hugo --minify

if [ $? -eq 0 ]; then
    echo "✅ Build successful!"
    echo "📤 Uploading to server..."

    rsync -avz --delete \
        public/ \
        deploy@YOUR_SERVER_IP:/var/www/yourdomain.com/html/

    if [ $? -eq 0 ]; then
        echo "✅ Deploy successful!"
        echo "🌐 Site is live at: http://yourdomain.com"
    else
        echo "❌ Deploy failed!"
        exit 1
    fi
else
    echo "❌ Build failed!"
    exit 1
fi

Usage:

# Make executable
chmod +x deploy.sh

# Run deploy
./deploy.sh

Set Correct Permissions

Di server, pastikan permissions benar:

# Set ownership to www-data (nginx user)
sudo chown -R www-data:www-data /var/www/yourdomain.com/html/

# Set directory permissions
sudo find /var/www/yourdomain.com/html/ -type d -exec chmod 755 {} \;

# Set file permissions
sudo find /var/www/yourdomain.com/html/ -type f -exec chmod 644 {} \;

Verify Deployment

1. Check Files

# Di server
ls -la /var/www/yourdomain.com/html/

# Harusnya ada:
# index.html, css/, js/, blog/, tutorials/, dll

2. Test in Browser

Buka http://YOUR_SERVER_IP atau http://yourdomain.com

Harusnya site Anda muncul!

3. Check Nginx Logs

# Access log
sudo tail -f /var/log/nginx/yourdomain.com.access.log

# Error log (kalau ada masalah)
sudo tail -f /var/log/nginx/yourdomain.com.error.log

Optimize Hugo Config for Production

Edit config.toml / hugo.toml:

baseURL = 'https://yourdomain.com/'
languageCode = 'id'
title = 'Your Site Title'

# Production optimization
[minify]
  disableCSS = false
  disableHTML = false
  disableJS = false
  disableJSON = false
  disableSVG = false
  disableXML = false

[imaging]
  quality = 85
  resampleFilter = "Lanczos"

# Sitemap
[sitemap]
  changefreq = 'weekly'
  filename = 'sitemap.xml'
  priority = 0.5

Setup Automatic Backups

Backup Script

Create di server:

sudo nano /usr/local/bin/backup-site.sh

Content:

#!/bin/bash

# Config
BACKUP_DIR="/home/deploy/backups"
SITE_DIR="/var/www/yourdomain.com/html"
DATE=$(date +%Y%m%d_%H%M%S)
BACKUP_FILE="site_backup_$DATE.tar.gz"

# Create backup directory
mkdir -p $BACKUP_DIR

# Create backup
cd /var/www
tar -czf "$BACKUP_DIR/$BACKUP_FILE" yourdomain.com/html/

# Keep only last 7 backups
cd $BACKUP_DIR
ls -t | tail -n +8 | xargs -r rm

echo "✅ Backup created: $BACKUP_FILE"
# Make executable
sudo chmod +x /usr/local/bin/backup-site.sh

# Test
sudo /usr/local/bin/backup-site.sh

Automate with Cron

# Edit crontab
crontab -e

# Add line (backup setiap hari jam 2 pagi):
0 2 * * * /usr/local/bin/backup-site.sh >> /home/deploy/backup.log 2>&1

Update Workflow

Ketika Anda update content:

# 1. Edit content di local
nano content/blog/new-post.md

# 2. Test locally
hugo server -D

# 3. Build
hugo --minify

# 4. Deploy
./deploy.sh

# atau manual:
rsync -avz --delete public/ deploy@YOUR_SERVER_IP:/var/www/yourdomain.com/html/

CI/CD with GitHub Actions (Optional)

Automate deploy on git push:

.github/workflows/deploy.yml:

name: Deploy Hugo Site

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
        extended: true

    - name: Build
      run: hugo --minify

    - name: Deploy to Server
      uses: easingthemes/ssh-deploy@v2
      env:
        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
        REMOTE_USER: ${{ secrets.REMOTE_USER }}
        TARGET: /var/www/yourdomain.com/html/
        SOURCE: public/

Setup Secrets di GitHub:

  1. Go to repository Settings
  2. Secrets → New repository secret
  3. Add:
    • SSH_PRIVATE_KEY: Your SSH private key
    • REMOTE_HOST: Server IP
    • REMOTE_USER: deploy

Troubleshooting

404 Not Found

Penyebab: File tidak ditemukan atau path salah

Check:

# Verify files di server
ls -la /var/www/yourdomain.com/html/

# Check nginx config
sudo nginx -t

# Check logs
sudo tail /var/log/nginx/error.log

CSS/JS Tidak Load

Penyebab: baseURL salah di Hugo config

Solusi:

# hugo.toml
baseURL = 'https://yourdomain.com/'  # Pastikan ada trailing slash!

Rebuild:

hugo --minify

Permission Denied saat Upload

Solusi:

# Di server, set ownership ke user deploy
sudo chown -R deploy:deploy /var/www/yourdomain.com/html/

# Atau tambahkan deploy ke www-data group
sudo usermod -aG www-data deploy

Rsync Connection Failed

Check:

  1. ✅ SSH connection works: ssh deploy@SERVER_IP
  2. ✅ Path correct
  3. ✅ Permissions correct

Performance Testing

Test site speed:

# GTmetrix
# Go to: https://gtmetrix.com
# Enter: yourdomain.com

# PageSpeed Insights
# Go to: https://pagespeed.web.dev/
# Enter: yourdomain.com

# Check response time
curl -o /dev/null -s -w 'Total: %{time_total}s\n' http://yourdomain.com

Monitoring Site Uptime

Free monitoring services:

Kesimpulan

Sekarang Anda sudah:

✅ Build Hugo site untuk production ✅ Upload ke server dengan SCP/Rsync ✅ Set correct permissions ✅ Create deploy script ✅ Setup backup automation ✅ Know troubleshooting steps

Di chapter selanjutnya, kita akan setup domain dan SSL/HTTPS!


Previous: ← Chapter 2 - Install Nginx Next: Chapter 4 - Setup Domain & SSL →