Panduan Lengkap Deploy Hugo ke Cloudflare Pages, Netlify, dan Vercel

Update: 3 February 2026

Baca: 5 menit

Panduan Lengkap Deploy Hugo ke Cloudflare Pages, Netlify, dan Vercel

Deployment adalah tahap akhir dalam pengembangan website Hugo yang menentukan bagaimana website Anda akan diakses oleh pengunjung. Dalam panduan ini, kita akan membahas secara detail cara deploy Hugo ke tiga platform hosting paling populer: Cloudflare Pages, Netlify, dan Vercel. Masing-masing platform memiliki keunggulan dan fitur unik yang membuatnya cocok untuk berbagai kebutuhan proyek.

Pemilihan platform hosting yang tepat sangat penting untuk performa, biaya, dan kemudahan pengelolaan website Hugo Anda. Cloudflare Pages menawarkan integrasi sempurna dengan ekosistem Cloudflare termasuk CDN dan edge functions. Netlify menyediakan fitur CI/CD yang powerful dan integrasi dengan Netlify CMS. Vercel unggul dalam developer experience dan optimasi untuk frontend frameworks, namun juga sangat capable untuk static sites seperti Hugo.

Deploy Hugo ke Cloudflare Pages

Cloudflare Pages adalah platform modern yang menawarkan performa tinggi dengan CDN global Cloudflare, edge functions, dan integrasi seamless dengan Git repository.

Menyiapkan Proyek untuk Cloudflare Pages

Pastikan struktur proyek Hugo Anda siap untuk deployment:

my-hugo-site/
├── content/
├── layouts/
├── static/
├── assets/
├── hugo.toml
├── package.json
└── .gitignore

Buat .gitignore yang meng-exclude folder build:

public/
resources/
.hugo_build.lock
node_modules/

Konfigurasi Hugo untuk Production

# hugo.toml
baseURL = "https://yoursite.pages.dev/"
languageCode = "id"
title = "My Hugo Site"

[build]
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.139.2"

Koneksi ke Cloudflare Pages

Login ke Cloudflare Dashboard dan navigate ke Pages
Klik “Create a project” dan pilih “Connect to Git”
Authorize Cloudflare untuk mengakses repository Anda
Pilih repository yang berisi proyek Hugo
Configure build settings:
- Framework preset: Hugo
- Build command: hugo --minify
- Build output directory: public
- Environment variables: HUGO_VERSION = 0.139.2
Klik “Save and Deploy”

Custom Domain di Cloudflare Pages

Untuk menambahkan custom domain:

Di project Pages, navigate ke “Custom domains”
Klik “Set up a custom domain”
Masukkan domain Anda
Ikuti instruksi untuk configure DNS di registrar atau Cloudflare DNS
Cloudflare akan otomatis provision SSL certificate

Cloudflare Pages Functions

Cloudflare Pages mendukung edge functions untuk fungsionalitas tambahan:

// functions/_middleware.js
export async function onRequest(context) {
  const response = await context.next();
  
  // Add security headers
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  
  return response;
}

Deploy Hugo ke Netlify

Netlify adalah platform deployment yang sangat populer untuk static sites dengan fitur CI/CD yang powerful dan developer-friendly.

Konfigurasi untuk Netlify

Buat netlify.toml di root proyek:

[build]
  publish = "public"
  command = "hugo --minify"

[build.environment]
  HUGO_VERSION = "0.139.2"
  HUGO_ENABLEGITINFO = "true"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Cache-Control = "public, max-age=31536000"

[[headers]]
  for = "*.css"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "*.js"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "*.webp"
  [headers.values]
    Cache-Control = "public, max-age=31536000"

Deploy ke Netlify

Login ke Netlify dan klik “Add new site”
Pilih “Import an existing project”
Connect ke Git provider (GitHub, GitLab, atau Bitbucket)
Pilih repository Hugo Anda
Configure build settings (akan dibaca dari netlify.toml)
Klik “Deploy site”

Netlify Identity dan Forms

Netlify menyediakan fitur untuk form handling tanpa backend:

# hugo.toml
[taxonomies]
  category = "categories"
  tag = "tags"

[frontmatter]
  [frontmatter.date]
    lastmod = ["lastmod", ":file", ":default"]

Form di HTML:

<form name="contact" method="POST" data-netlify="true">
    <input type="hidden" name="form-name" value="contact">
    <p>
        <label>Nama: <input type="text" name="name" required></label>
    </p>
    <p>
        <label>Email: <input type="email" name="email" required></label>
    </p>
    <p>
        <label>Pesan: <textarea name="message" required></textarea></label>
    </p>
    <p>
        <button type="submit">Kirim</button>
    </p>
</form>

Netlify Edge Functions

Untuk fungsionalitas serverless:

// netlify/functions/edge/redirect.js
export default async (request, context) => {
  const url = new URL(request.url);
  
  // Redirect old URLs
  if (url.pathname.startsWith('/old-path/')) {
    const newPath = url.pathname.replace('/old-path/', '/new-path/');
    return context.redirect(newPath, 301);
  }
  
  return context.next();
};

Deploy Hugo ke Vercel

Vercel adalah platform yang terkenal dengan developer experience yang excellent dan optimasi untuk frontend projects.

Konfigurasi untuk Vercel

Buat vercel.json di root proyek:

{
  "buildCommand": "hugo --minify",
  "outputDirectory": "public",
  "framework": "hugo",
  "version": 2,
  "build": {
    "env": {
      "HUGO_VERSION": "0.139.2"
    }
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    },
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/:path*"
    }
  ]
}

Deploy ke Vercel

Login ke Vercel dan klik “Add New Project”
Import repository dari Git provider
Vercel akan auto-detect Hugo dan configure build settings
Klik “Deploy”

Vercel CLI

Deploy dari command line dengan Vercel CLI:

# Install Vercel CLI
npm i -g vercel

# Login
vercel login

# Deploy
vercel --prod

# Dengan environment variables
vercel --env HUGO_VERSION=0.139.2

Vercel Edge Functions

// api/redirect.js
export const config = {
  runtime: 'edge',
};

export default async function handler(request) {
  const url = new URL(request.url);
  
  if (url.pathname.startsWith('/blog/')) {
    return new Response(null, {
      status: 301,
      headers: {
        'Location': url.pathname.replace('/blog/', '/artikel/'),
      },
    });
  }
  
  return new Response('Not Found', { status: 404 });
}

Perbandingan Platform

Fitur	Cloudflare Pages	Netlify	Vercel
CDN	Cloudflare Global	Netlify CDN	Vercel Edge
Build minutes	Unlimited	500/mounth (free)	100 hours (free)
Bandwidth	Unlimited	100GB/month	100GB/month
Custom domain	Ya	Ya	Ya
SSL	Auto (Cloudflare)	Auto (Let’s Encrypt)	Auto
Edge Functions	Workers/Pages Functions	Functions/Lambda	Edge Functions
Form handling	Workers/API	Built-in	API required
Deploy preview	Ya	Ya	Ya
Branch deploys	Ya	Ya	Ya

CI/CD Pipeline dengan GitHub Actions

Untuk kontrol lebih atas build process, gunakan GitHub Actions:

# .github/workflows/deploy.yml
name: Deploy Hugo Site

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0

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

      - name: Build
        run: hugo --minify

      - name: Deploy to Cloudflare Pages
        if: startsWith(github.ref, 'refs/heads/main')
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: my-hugo-site
          directory: public
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

      - name: Deploy to Netlify
        if: startsWith(github.ref, 'refs/heads/main')
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: './public'
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Best Practices Deployment

Untuk deployment yang sukses dan maintainable, beberapa best practices perlu diperhatikan: selalu gunakan environment variables untuk konfigurasi yang berbeda antar environment, implementasikan deploy preview untuk setiap pull request untuk testing sebelum production, configure proper caching headers untuk static assets, monitor performa website setelah deployment dengan tools seperti Lighthouse, dan setup automated builds dengan webhooks untuk trigger rebuild saat konten berubah.

Kesimpulan

Deployment Hugo ke platform hosting modern seperti Cloudflare Pages, Netlify, atau Vercel memberikan performa excellent dan kemudahan pengelolaan. Pilih platform yang paling sesuai dengan kebutuhan proyek Anda dan manfaatkan fitur-fitur yang mereka tawarkan untuk memaksimalkan performa website Hugo Anda.