Chapter 4

Chapter 4: Setup Domain & SSL/HTTPS

Chapter terakhir! Kita akan setup custom domain dan enable HTTPS dengan SSL certificate gratis.

Buy Domain

Beli domain dari domain registrar:

1. Namecheap - namecheap.com

  • ✅ Cheap prices
  • ✅ Free WHOIS privacy
  • Price: $10-15/year

2. Cloudflare - cloudflare.com

  • ✅ Cheapest prices (at-cost)
  • ✅ Integrated DNS & CDN
  • Price: $8-10/year

3. Google Domains - domains.google.com

  • ✅ Clean interface
  • ✅ Free privacy protection
  • Price: $12-15/year

4. Porkbun - porkbun.com

  • ✅ Very cheap
  • ✅ Good for developers
  • Price: $7-10/year

Point Domain to Server

Setelah beli domain, setup DNS records:

Step 1: Get Server IP

# Di terminal
ssh deploy@YOUR_SERVER_IP

# Note your IP:
# Example: 139.59.123.45

Step 2: Add DNS Records

Login ke domain registrar dashboard dan tambahkan DNS records:

TypeNameValueTTL
A@139.59.123.453600
Awww139.59.123.453600

Penjelasan:

  • @ = root domain (yourdomain.com)
  • www = www subdomain (www.yourdomain.com)
  • 139.59.123.45 = Your server IP
  • 3600 = TTL (Time To Live) in seconds

Step 3: Verify DNS Propagation

DNS changes bisa butuh waktu 1-48 jam. Check status:

# Check A record
dig yourdomain.com +short
# Output: 139.59.123.45

# Check www record
dig www.yourdomain.com +short
# Output: 139.59.123.45

# Online tool:
# https://dnschecker.org

Update Nginx Config

Edit nginx config untuk use domain name:

sudo nano /etc/nginx/sites-available/yourdomain.com

Update server_name:

server {
    listen 80;
    listen [::]:80;

    # Update this line:
    server_name yourdomain.com www.yourdomain.com;

    root /var/www/yourdomain.com/html;
    index index.html;

    # ... rest of config ...
}

# Test config
sudo nginx -t

# Reload nginx
sudo systemctl reload nginx

Install SSL Certificate (Let’s Encrypt)

Let’s Encrypt = FREE SSL certificate yang trusted oleh semua browser.

Step 1: Install Certbot

# Install Certbot
sudo apt install certbot python3-certbot-nginx -y

# Verify installation
certbot --version

Step 2: Get SSL Certificate

# Get certificate & auto-configure nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

# Follow prompts:
# Enter email: your-email@example.com
# Agree to terms: Y
# Share email with EFF: Y or N (your choice)
# Redirect HTTP to HTTPS: 2 (YES, recommended)

Output:

Congratulations! You have successfully enabled
https://yourdomain.com and https://www.yourdomain.com

IMPORTANT NOTES:
- Certificate expires: 2024-06-10
- To renew: certbot renew

Step 3: Verify HTTPS

Buka browser: https://yourdomain.com

Harusnya:

  • ✅ Padlock icon di address bar
  • ✅ “Connection is secure”
  • ✅ No warnings

Certbot Auto-configured Nginx

Certbot sudah update nginx config Anda menjadi:

# HTTP - Redirect to HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name yourdomain.com www.yourdomain.com;

    return 301 https://$server_name$request_uri;
}

# HTTPS
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name yourdomain.com www.yourdomain.com;

    # SSL Configuration
    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    root /var/www/yourdomain.com/html;
    index index.html;

    # ... rest of config ...
}

SSL Certificate Auto-Renewal

Let’s Encrypt certificates expire setelah 90 hari. Certbot sudah setup auto-renewal.

Test Renewal

# Dry run (test tanpa actually renew)
sudo certbot renew --dry-run

# Output harusnya:
# Congratulations, all simulated renewals succeeded

Manual Renewal (jika perlu)

# Renew all certificates
sudo certbot renew

# Renew specific domain
sudo certbot renew --cert-name yourdomain.com

# Reload nginx after renewal
sudo systemctl reload nginx

Check Renewal Cron Job

# Certbot sudah setup systemd timer
sudo systemctl list-timers | grep certbot

# Or check cron
sudo cat /etc/cron.d/certbot

Advanced SSL Configuration

Strong SSL Settings

Edit nginx config:

sudo nano /etc/nginx/sites-available/yourdomain.com

Add di dalam server block (HTTPS):

# SSL Configuration
ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

# SSL protocols & ciphers
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384';

# SSL session cache
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;

# OCSP stapling
ssl_stapling on;
ssl_stapling_verify on;
resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;

# Security headers
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

# Test & reload
sudo nginx -t && sudo systemctl reload nginx

Test SSL Security

Check SSL configuration quality:

SSL Labs Test:

  1. Go to: ssllabs.com/ssltest
  2. Enter: yourdomain.com
  3. Wait for results (2-3 minutes)
  4. Target: A+ rating

Security Headers:

  1. Go to: securityheaders.com
  2. Enter: https://yourdomain.com
  3. Target: A rating

Cloudflare Integration (Optional)

Tambahkan CDN & DDoS protection gratis:

Step 1: Add Site to Cloudflare

  1. Sign up di cloudflare.com
  2. Add site: yourdomain.com
  3. Select Free plan

Step 2: Change Nameservers

Cloudflare akan kasih 2 nameservers:

nameserver1.cloudflare.com
nameserver2.cloudflare.com

Update di domain registrar:

  1. Go to domain management
  2. Change nameservers
  3. Wait 1-24 hours for propagation

Step 3: Configure Cloudflare

DNS Settings:

  • ✅ Proxied (orange cloud) untuk A records
  • SSL/TLS mode: Full (strict)

Benefits:

  • ✅ Free CDN (faster global access)
  • ✅ DDoS protection
  • ✅ Auto HTTPS rewrites
  • ✅ Caching & optimization

Update Hugo Config

Edit Hugo config file:

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

# Enable HTTPS canonical URLs
canonifyURLs = false  # Let Hugo use baseURL as-is

Rebuild & redeploy:

hugo --minify
./deploy.sh

Monitoring & Maintenance

SSL Certificate Expiry

# Check certificate expiry
echo | openssl s_client -servername yourdomain.com -connect yourdomain.com:443 2>/dev/null | openssl x509 -noout -dates

# Output:
# notBefore=Mar 10 12:00:00 2024 GMT
# notAfter=Jun 10 12:00:00 2024 GMT

Monitor Site Uptime

Setup monitoring:

Backup Certificate

# Backup Let's Encrypt certificates
sudo tar -czf ~/letsencrypt-backup.tar.gz /etc/letsencrypt/

# Download to local
scp deploy@YOUR_SERVER_IP:~/letsencrypt-backup.tar.gz .

Troubleshooting

Certificate Not Trusted

Problem: Browser shows “Not Secure” warning

Check:

# Verify certificate
sudo certbot certificates

# Check nginx config
sudo nginx -t

# Check if HTTPS port open
sudo ufw status | grep 443

# Reload nginx
sudo systemctl reload nginx

Certbot Renewal Failed

Check logs:

sudo tail -f /var/log/letsencrypt/letsencrypt.log

Common issues:

  1. ✅ Port 80 must be open (for renewal)
  2. ✅ Domain must resolve to server IP
  3. ✅ Nginx must be running

Manual renewal:

sudo certbot renew --force-renewal

Mixed Content Warnings

Problem: Page loads over HTTPS but some resources (images, CSS, JS) use HTTP

Fix in Hugo:

# hugo.toml
baseURL = 'https://yourdomain.com/'  # Use HTTPS!

Or use protocol-relative URLs:

<!-- Bad -->
<img src="http://yourdomain.com/image.jpg">

<!-- Good -->
<img src="https://yourdomain.com/image.jpg">

<!-- Best (protocol-relative) -->
<img src="//yourdomain.com/image.jpg">

Performance Optimization

Enable HTTP/2

Already enabled by Certbot! Verify:

curl -I --http2 https://yourdomain.com

# Look for:
# HTTP/2 200

Enable Brotli Compression (Advanced)

# Install module
sudo apt install nginx-module-brotli -y

# Add to nginx.conf
sudo nano /etc/nginx/nginx.conf

Add in http block:

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

http {
    # ... existing config ...

    # Brotli
    brotli on;
    brotli_comp_level 6;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml+rss text/javascript;
}

sudo nginx -t && sudo systemctl reload nginx

Kesimpulan

Sekarang site Anda:

✅ Punya custom domain ✅ HTTPS/SSL enabled (A+ rating possible) ✅ Auto-redirect HTTP → HTTPS ✅ SSL auto-renewal configured ✅ Security headers enabled ✅ Production-ready!

Next Steps (Optional)

  • 🚀 Setup CDN dengan Cloudflare
  • 📊 Add Google Analytics
  • 🔍 Submit sitemap ke Google Search Console
  • 💬 Add Disqus comments
  • 📧 Setup email forwarding
  • 🔄 Setup CI/CD pipeline

Selamat! Portfolio Anda sudah live di internet! 🎉

Previous: ← Chapter 3 - Deploy Hugo Site

Tutorial Selesai! Lanjut explore deployment lainnya atau kembali ke tutorials page.

Next →
Chapter 3: Deploy Hugo Site ke Server
Back to All Tutorials