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

Feature	Netlify	Vercel	GitHub Pages
CDN	Global Edge Network	Edge Network	Fastly CDN
CI/CD	Built-in	Built-in	GitHub Actions
Custom Domain	Yes + Free SSL	Yes + Free SSL	Yes + Free SSL
Form Handling	Built-in	Third-party	Third-party
Identity	Built-in	Third-party	No
Functions	Netlify Functions	Vercel Functions	No
Analytics	Built-in	Built-in	Google Analytics only
Deploy Previews	Yes	Yes	No
Branch Deploys	Yes	Yes	Single branch
Price	Generous free tier	Generous free tier	Free

Deploy ke Netlify

Method 1: Drag & Drop (Quick)

Build Hugo Site Locally:

hugo --gc --minify

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:

Login ke Netlify Dashboard
Click “Add new site” → “Import an existing project”
Connect GitHub dan pilih repository
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:

Buka vercel.com
Click “Add New…” → “Project”
Import Git Repository
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

Cara Deploy Hugo ke Netlify Vercel dan GitHub Pages: Panduan Lengkap