Deploy website Hugo ke modern hosting platforms memberikan kecepatan, reliability, dan features yang luar biasa. Panduan ini akan membahas tiga platform terbaik: Netlify, Vercel, dan GitHub Pages.

Platform Comparison

Deploy ke Netlify

Method 1: Drag & Drop (Quick)

1. Build Hugo Site Locally:

hugo --gc --minify

2. Drag public/ folder ke Netlify Dashboard:
   – Buka netlify.com
   – Drop folder public/
   – Site live dalam seconds!

Method 2: Git-based Deploy (Recommended)

Step 1: Push ke GitHub:

# Setup repository
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/my-hugo-site.git
git push -u origin main

Step 2: Connect ke Netlify:

1. Login ke Netlify Dashboard
2. Click “Add new site” → “Import an existing project”
3. Connect GitHub dan pilih repository
4. Configure build:
   – Build command: hugo --gc --minify
   – Publish directory: public
   – HUGO_VERSION: 0.123.0

Step 3: Environment Variables:

Di Site Settings → Build & deploy → Environment:

HUGO_VERSION: 0.123.0
HUGO_ENV: production
HUGO_ENABLEGITINFO: true

Method 3: Netlify CLI

# Install Netlify CLI
npm install -g netlify-cli
Login
netlify login
Initialize
netlify init
Deploy
netlify deploy --prod --dir=public
Continuous deploy
Sudah setup dengan 
netlify init, push ke Git akan auto-deploy

Netlify Configuration (netlify.toml)

File netlify.toml di root project:

[build]
  publish = "public"
  command = "hugo --gc --minify"
[build.environment]
HUGO_VERSION = "0.123.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
[[plugins]]
package = "netlify-plugin-hugo-cache-resources"
[context.production.environment]
HUGO_VERSION = "0.123.0"
HUGO_ENV = "production"
[context.deploy-preview.environment]
HUGO_VERSION = "0.123.0"
[context.branch-deploy.environment]
HUGO_VERSION = "0.123.0"
Redirects
[[redirects]]
from = "/old-url/"
to = "/new-url/"
status = 301
Headers
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "DENY"
X-XSS-Protection = "1; mode=block"
Referrer-Policy = "strict-origin-when-cross-origin"

Deploy ke Vercel

Method 1: Vercel Dashboard

Step 1: Prepare Repository:

Pastikan ada package.json jika menggunakan dependencies:

{
  "name": "my-hugo-site",
  "version": "1.0.0",
  "scripts": {
    "build": "hugo --gc --minify",
    "dev": "hugo server -D"
  }
}

Step 2: Import ke Vercel:

1. Buka vercel.com
2. Click “Add New…” → “Project”
3. Import Git Repository
4. Configure:
   – Framework Preset: Hugo
   – Build Command: hugo --gc --minify
   – Output Directory: public
   – Install Command: npm install (jika ada package.json)

Step 3: Environment Variables:

Di Project Settings → Environment Variables:

HUGO_VERSION: 0.123.0
HUGO_ENV: production

Method 2: Vercel CLI

# Install Vercel CLI
npm install -g vercel
Login
vercel login
Deploy
vercel --prod
Setup untuk continuous deployment
vercel
Follow prompts untuk connect Git

Vercel Configuration (vercel.json)

File vercel.json di root:

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "public"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        }
      ]
    }
  ]
}

Deploy ke GitHub Pages

Method 1: GitHub Actions (Recommended)

Step 1: Setup Repository:

git init
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main

Step 2: Create Workflow:

File .github/workflows/hugo.yml:

name: Deploy Hugo to GitHub Pages
on:
push:
branches:

main  # Set default branch

workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
defaults:
run:
shell: bash
jobs:
build:
runs-on: ubuntu-latest
env:
HUGO_VERSION: 0.123.0
steps:

name: Install Hugo CLI
run: |
wget -O ${{ runner.temp }}/hugo.deb 
https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
sudo dpkg -i ${{ runner.temp }}/hugo.deb

  - name: Install Dart Sass
    run: sudo snap install dart-sass

  - name: Checkout
    uses: actions/checkout@v4
    with:
      submodules: recursive
      fetch-depth: 0

  - name: Setup Pages
    id: pages
    uses: actions/configure-pages@v4

  - name: Install Node.js dependencies
    run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"

  - name: Build with Hugo
    env:
      HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
      HUGO_ENVIRONMENT: production
      HUGO_ENV: production
    run: |
      hugo \
        --gc \
        --minify \
        --baseURL "${{ steps.pages.outputs.base_url }}/"

  - name: Upload artifact
    uses: actions/upload-pages-artifact@v3
    with:
      path: ./public
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
Step 3: Enable GitHub Pages:
Go to repository Settings → Pages
Source: GitHub Actions
Push workflow file dan deploy akan berjalan otomatis
Method 2: Peaceiris Action (Simpler)
name: GitHub Pages
on:
push:
branches:

main

jobs:
deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:

uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0

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

  - name: Build
    run: hugo --minify

  - name: Deploy
    uses: peaceiris/actions-gh-pages@v3
    if: ${{ github.ref == 'refs/heads/main' }}
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./public
GitHub Pages Configuration
hugo.toml untuk GitHub Pages:
baseURL = 'https://username.github.io/repository-name/'
languageCode = 'en-us'
title = 'My Site'
Important untuk GitHub Pages relative URLs
canonifyURLs = true
relativeURLs = false
Custom Domain Setup
Netlify Custom Domain
Add Custom Domain:
 – Site Settings → Domain Management
 – Click “Add custom domain”
 – Enter: www.yourdomain.com
DNS Configuration:
 – Option A: Use Netlify DNS (Recommended)
Change nameservers ke Netlify
Otomatis SSL dan CDN
Option B: External DNS
 “`
 # CNAME record
 www.yourdomain.com → your-site-xxx.netlify.app
# A record untuk apex domain
 @ → 75.2.60.5
 “`
SSL Certificate:
 – Auto-provisioned oleh Let’s Encrypt
 – Auto-renew setiap 90 hari
Vercel Custom Domain
Add Domain:
 – Project Settings → Domains
 – Enter domain dan click “Add”
DNS Configuration:
 “`
 # CNAME
 www.yourdomain.com → cname.vercel-dns.com
# A record untuk apex
 @ → 76.76.21.21
 “`
SSL:
 – Auto-provisioned
 – Auto-renewal
GitHub Pages Custom Domain
Add CNAME file:
File static/CNAME:
www.yourdomain.com
DNS Configuration:
 “`
 # CNAME
 www.yourdomain.com → username.github.io
# Atau A records untuk apex
 @ → 185.199.108.153
 @ → 185.199.109.153
 @ → 185.199.110.153
 @ → 185.199.111.153
 “`
Enable HTTPS:
 – Repository Settings → Pages
 – Check “Enforce HTTPS”
Form Handling
Netlify Forms
Add form ke template:
<form name="contact" netlify>
  <p>
    <label>Name: <input type="text" name="name" required></label>
  </p>
  <p>
    <label>Email: <input type="email" name="email" required></label>
  </p>
  <p>
    <label>Message: <textarea name="message" required></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>
Configure di Netlify:
 – Forms automatically detected
 – Submissions viewable di dashboard
 – Setup notifications (email, Slack, webhook)
Vercel + Formspree
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>
GitHub Pages + Formspree
Sama dengan Vercel setup, gunakan Formspree atau layanan serupa.
Advanced Features
Netlify Functions
File netlify/functions/hello.js:
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from Netlify Functions!" })
  };
};
Vercel Edge Functions
File api/hello.js:
export default function handler(request, response) {
  response.status(200).json({ message: "Hello from Vercel!" });
}
Branch Deploys
Netlify:
– Setiap branch mendapat URL preview
– Great untuk testing dan review
Vercel:
– Preview deployments untuk setiap PR
– Comment dengan preview link otomatis
GitHub Pages:
– Hanya satu branch (biasanya gh-pages atau main)
Performance Monitoring
Netlify Analytics
Built-in analytics tanpa JavaScript
Real user metrics
Bandwidth dan request monitoring
Vercel Analytics
Web Vitals monitoring
Real-time data
Performance insights
GitHub Pages + Google Analytics
<!-- layouts/partials/analytics.html -->
{{ if hugo.IsProduction }}
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_ID');
</script>
{{ end }}
Troubleshooting
Issue: “Build failed”
Netlify:
– Check build logs di dashboard
– Verify HUGO_VERSION environment variable
– Ensure Hugo Extended untuk SCSS
Vercel:
– Check build output
– Verify framework preset Hugo
– Check package.json scripts
GitHub Pages:
– Check Actions logs
– Verify workflow file syntax
– Ensure hugo-version correct
Issue: “Assets not loading”
Check baseURL:
# hugo.toml
baseURL = "https://yourdomain.com/"  # Pastikan trailing slash
Issue: “Custom domain not working”
Check DNS:
– DNS propagation (bisa sampai 48 jam)
– Records correctly configured
– SSL certificate issued
Kesimpulan
Pilih platform berdasarkan kebutuhan:
Pilih Netlify untuk:
– Form handling built-in
– Identity/authentication
– Generous free tier
– Easy setup
Pilih Vercel untuk:
– Next.js integration
– Edge functions
– Performance analytics
– Preview deployments
Pilih GitHub Pages untuk:
– 100% free
– Simple sites
– Portfolio/personal sites
– Already using GitHub
Semua platform menawarkan:
– Global CDN
– Free SSL
– Custom domains
– Continuous deployment