Cara Deploy Hugo ke Netlify Vercel dan GitHub Pages: Panduan Lengkap
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
| 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
- Build command:
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.21SSL:
- Auto-provisioned
- Auto-renewal
GitHub Pages Custom Domain
Add CNAME file:
File
static/CNAME:www.yourdomain.comDNS 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.153Enable 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-pagesataumain)
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
Link Postingan: https://www.tirinfo.com/cara-deploy-hugo-netlify-vercel-github-pages/