Menu
📱 Lihat versi lengkap (non-AMP)
Hugo Deployment Hosting

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

Editor: Hendra WIjaya
Update: 3 February 2026
Baca: 6 menit

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

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

FeatureNetlifyVercelGitHub Pages
CDNGlobal Edge NetworkEdge NetworkFastly CDN
CI/CDBuilt-inBuilt-inGitHub Actions
Custom DomainYes + Free SSLYes + Free SSLYes + Free SSL
Form HandlingBuilt-inThird-partyThird-party
IdentityBuilt-inThird-partyNo
FunctionsNetlify FunctionsVercel FunctionsNo
AnalyticsBuilt-inBuilt-inGoogle Analytics only
Deploy PreviewsYesYesNo
Branch DeploysYesYesSingle branch
PriceGenerous free tierGenerous free tierFree

Deploy ke Netlify

Method 1: Drag & Drop (Quick)

  1. Build Hugo Site Locally:
hugo --gc --minify
  1. Drag public/ folder ke Netlify Dashboard:
    • Buka netlify.com
    • Drop folder public/
    • Site live dalam seconds!

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

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:

  1. Go to repository Settings → Pages
  2. Source: GitHub Actions
  3. 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

  1. Add Custom Domain:

    • Site Settings → Domain Management
    • Click “Add custom domain”
    • Enter: www.yourdomain.com
  2. 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
      
  3. SSL Certificate:

    • Auto-provisioned oleh Let’s Encrypt
    • Auto-renew setiap 90 hari

Vercel Custom Domain

  1. Add Domain:

    • Project Settings → Domains
    • Enter domain dan click “Add”
  2. DNS Configuration:

    # CNAME
    www.yourdomain.com  →  cname.vercel-dns.com
    
    # A record untuk apex
    @  →  76.76.21.21
    
  3. SSL:

    • Auto-provisioned
    • Auto-renewal

GitHub Pages Custom Domain

  1. Add CNAME file:

    File static/CNAME:

    www.yourdomain.com
    
  2. 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
    
  3. Enable HTTPS:

    • Repository Settings → Pages
    • Check “Enforce HTTPS”

Form Handling

Netlify Forms

  1. 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>
  1. 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

Artikel Terkait

Bagikan:

Link Postingan: https://www.tirinfo.com/cara-deploy-hugo-netlify-vercel-github-pages/