Tutorial Hugo Part 3: Cara Pasang Tema dan Konfigurasi Lengkap

deuxly.dev

Dec 29, 2025

12 min read

0 Views

deuxly.dev: Setelah paham struktur folder di Part sebelumnya, sekarang kita masuk ke tahap memasang tema Hugo agar blog kamu punya tampilan yang layak. Jujur aja, Hugo tanpa tema itu ibarat rumah tanpa cat dan perabotan, cuma kerangka kosong yang ngga enak dipandang.

Artikel: Memahami Struktur Direktori Hugo

Di artikel ini, aku akan pandu kamu cara instalasi tema (kita pakai PaperMod sebagai contoh karena ini tema paling populer dengan 9,000+ stars di GitHub) dan melakukan konfigurasi lengkap di file hugo.yaml. Bukan cuma instalasi basic, tapi sampai Kustom yang proper.

Tenang, prosesnya ngga kaya ngoding dari nol kok.

Daftar Isi

Kenapa PaperMod? Perbandingan Tema Hugo Populer

Sebelum install, penting buat tau kenapa kita pilih PaperMod dibanding tema lain:

Tema	Total Stars di GitHub	Kecepatan	Fitur	Cocok buat
PaperMod	9,000+	Sangat Cepat	Blog-focused, Dark mode	Blog personal/teknis
Ananke	1,200+	Cepat	Minimalist	Portfolio
Mainroad	700+	Sedang	Magazine style	News/content heavy
Clarity	1,000+	Cepat	Dokumentasi	Teknikal docs
Stack	4,500+	Cepat	Card based	Magazine/portfolio

Keunggulan PaperMod:

✅ PageSpeednya punya skor 95-100 diluar batas
✅ Dark/Light mode toggle otomatis
✅ SEO optimized (structured data built-in)
✅ Archive, search, tags, categories support
✅ Reading time & word count
✅ Social share buttons
✅ Table of contents otomatis
✅ Actively maintained (update rutin)

Cara Install Tema Hugo: Git Submodule vs ZIP Download

Ada 3 cara install tema Hugo, tapi cuma 1 cara yang benar buat jangka panjang:

❌ Download ZIP (JANGAN!)

# Download ZIP dari GitHub
# Extract ke themes/PaperMod

Masalah:

Update tema = harus download ulang manual
Kustom kecampur dengan kode tema
Conflict saat ada update
Ngga trackable di Git

❌ Git Clone (SALAH JUGA!)

cd themes
git clone https://github.com/adityatelange/hugo-PaperMod

Masalah:

Nested Git repository (tema punya .git sendiri)
Conflict dengan Git blog kamu
Susah sync saat push ke GitHub

✅ Git Submodule (CORRECT!)

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

Keuntungan:

✅ Tema terhubung ke repository asli
✅ Update cukup 1 command: git submodule update --remote
✅ Kustom terpisah (di root project)
✅ Professional workflow (dipakai developer berpengalaman)
✅ Kompatibel dengan deployment otomatis (Vercel/Netlify)

Step by Step: Memasang Tema PaperMod dengan Git Submodule

Inisialisasi Git (Kalau Belum)

Buka terminal di folder project Hugo kamu:

cd blog-saya
git init

Output

Initialized empty Git repository in /path/to/blog-saya/.git/

Tambah Tema sebagai Submodule

Jalanin command ini:

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

Penjelasan flag:

--depth=1 = download cuma commit terakhir (lebih cepat, size lebih kecil)
themes/PaperMod = lokasi install tema

Output yang benar:

Cloning into '/path/to/blog-saya/themes/PaperMod'...
remote: Enumerating objects: 250, done.
remote: Counting objects: 100% (250/250), done.
Submodule 'themes/PaperMod' registered for path 'themes/PaperMod'

Verifikasi Instalasi

Cek apakah tema berhasil didownload:

ls themes/PaperMod

Output yang benar:

LICENSE README.md assets images layouts theme.toml

Cek file .gitmodules (otomatis terbuat):

cat .gitmodules

Output:

[submodule "themes/PaperMod"]
path = themes/PaperMod
url = https://github.com/adityatelange/hugo-PaperMod.git

Commit Submodule

git add .gitmodules themes/PaperMod
git commit -m "Add PaperMod theme as submodule"

Kenapa ini penting?

Git track submodule sebagai pointer ke commit tertentu
Saat clone repo, orang lain bisa install tema yang sama persis

Konfigurasi Tema PaperMod: Dari Basic sampai Advanced

Konfigurasi Basic (Minimal buat Jalan)

Buka file hugo.yaml di root folder. Hapus isi default, ganti dengan:

baseURL: "https://namablogmu.com/"
languageCode: "id-ID"
title: "Blog Tekno Keren"
theme: "PaperMod"

params:
  author: "Namamu"
  defaultTheme: "auto"

Test:

hugo server -D

Buka http://localhost:1313 - tema udah aktif tapi masih default.

Konfigurasi Menengah (Recommended)

baseURL: "https://namablogmu.com/"
languageCode: "id-ID"
title: "Blog Tekno Keren"
theme: "PaperMod"
paginate: 10

# Enable emoji support
enableEmoji: true

# Table of contents & Highlight settings
markup:
  tableOfContents:
    endLevel: 3
    ordered: false
    startLevel: 2
  highlight:
    anchorLineNos: false
    codeFences: true
    guessSyntax: false
    lineNos: true
    style: "monokai"

params:
  # Theme mode: light, dark, or auto
  defaultTheme: "auto"

  # Profile mode (homepage setting)
  profileMode:
    enabled: true
    title: "Selamat Datang di Blog Saya"
    subtitle: "Berbagi tutorial web development dan teknologi"
    imageUrl: "/images/avatar.jpg"
    imageTitle: "Avatar"
    buttons:
      - name: "Blog"
        url: "/posts/"
      - name: "About"
        url: "/about/"

  # Social icons
  socialIcons:
    - name: "github"
      url: "https://github.com/username"
    - name: "twitter"
      url: "https://twitter.com/username"
    - name: "email"
      url: "mailto:email@example.com"

  # Features
  ShowReadingTime: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true

  # SEO & Meta
  author: "Namamu"
  description: "Blog tentang web development, Hugo, dan teknologi"
  keywords: ["Hugo", "Web Development", "Tutorial"]

# Menu Navigation
menu:
  main:
    - identifier: "home"
      name: "Home"
      url: "/"
      weight: 1
    - identifier: "posts"
      name: "Blog"
      url: "/posts/"
      weight: 2
    - identifier: "categories"
      name: "Kategori"
      url: "/categories/"
      weight: 3
    - identifier: "tags"
      name: "Tags"
      url: "/tags/"
      weight: 4
    - identifier: "about"
      name: "About"
      url: "/about/"
      weight: 5

Konfigurasi Tingkat Lanjut (Full Kustom)

baseURL: "https://deuxly.dev/"
languageCode: "id-ID"
title: "deuxly - Blog Web Development"
theme: "PaperMod"
paginate: 10
enableEmoji: true
enableRobotsTXT: true

# Build settings
buildDrafts: false
buildFuture: false
buildExpired: false

# Minify output settings
minify:
  disableCSS: false
  disableHTML: false
  disableJS: false
  disableJSON: false
  disableXML: false

# Sitemap configuration
sitemap:
  changefreq: "weekly"
  filename: "sitemap.xml"
  priority: 0.8

# Output formats (Penting buat Search!)
outputs:
  home:
    - HTML
    - RSS
    - JSON

# Taxonomies
taxonomies:
  category: "categories"
  tag: "tags"
  series: "series"

# Markdown renderer settings
markup:
  goldmark:
    renderer:
      unsafe: true # Allow HTML in markdown
  highlight:
    anchorLineNos: false
    codeFences: true
    guessSyntax: false
    lineNos: true
    noClasses: false
    style: "monokai"
  tableOfContents:
    endLevel: 3
    ordered: false
    startLevel: 2

params:
  env: "production"
  title: "deuxly Blog"
  description: "Tutorial web development, Hugo, dan teknologi terkini"
  keywords: ["Hugo", "Web Development", "Static Site", "Tutorial"]
  author: "Deuxly"

  # Theme settings
  defaultTheme: "auto"
  disableThemeToggle: false

  # Profile mode settings
  profileMode:
    enabled: true
    title: "👋 Halo, Selamat Datang!"
    subtitle: |
      Blog tentang web development dengan fokus pada Hugo static site generator.
      Belajar cara membuat blog yang cepat, aman, dan gratis.
    imageUrl: "/images/avatar.png"
    imageWidth: 120
    imageHeight: 120
    imageTitle: "Avatar deuxly"
    buttons:
      - name: "📚 Baca Tutorial"
        url: "/posts/"
      - name: "🔖 Kategori"
        url: "/categories/"

  # Homepage Info (Alternative to ProfileMode)
  homeInfoParams:
    Title: "Blog deuxly"
    Content: "Tutorial web development dan teknologi"

  # Social icons
  socialIcons:
    - name: "github"
      url: "https://github.com/username"
    - name: "twitter"
      url: "https://twitter.com/username"
    - name: "rss"
      url: "/index.xml"
    - name: "email"
      url: "mailto:hello@deuxly.dev"

  # Analytics
  analytics:
    google:
      SiteVerificationTag: "your-google-site-verification"

  # Blog Features
  ShowReadingTime: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: true
  tocopen: true

  # Cover image settings
  cover:
    hidden: false
    hiddenInList: false
    hiddenInSingle: false

  # Edit post link
  editPost:
    URL: "https://github.com/username/blog/tree/main/content"
    Text: "Suggest Changes"
    appendFilePath: true

  # Fuse Search Options
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    keys: ["title", "permalink", "summary", "content"]

# Menu Navigation
menu:
  main:
    - identifier: "home"
      name: "🏠 Home"
      url: "/"
      weight: 1
    - identifier: "posts"
      name: "📝 Blog"
      url: "/posts/"
      weight: 2
    - identifier: "categories"
      name: "📂 Kategori"
      url: "/categories/"
      weight: 3
    - identifier: "tags"
      name: "🏷️ Tags"
      url: "/tags/"
      weight: 4
    - identifier: "archives"
      name: "📦 Arsip"
      url: "/archives/"
      weight: 5
    - identifier: "search"
      name: "🔍 Search"
      url: "/search/"
      weight: 6
    - identifier: "about"
      name: "👤 About"
      url: "/about/"
      weight: 7

# Privacy Settings
privacy:
  googleAnalytics:
    anonymizeIP: true
    disable: false
    respectDoNotTrack: true
    useSessionStorage: false

Fitur PaperMod yang Wajib Diaktifin

Archive Page (Daftar Semua Artikel)

Buat file content/archives.md:

---
title: "Arsip"
layout: "archives"
url: "/archives/"
summary: "Semua artikel yang pernah dipublish"
---

Search Page (Pencarian Artikel)

Buat file content/search.md:

---
title: "Pencarian"
layout: "search"
placeholder: "Cari artikel..."
---

Tambah di hugo.yaml:

outputs:
  home:
    - HTML
    - RSS
    - JSON # Required for search!

Cover Image buat Artikel (Thumbnail)

Di front matter artikel:

---
title: "Tutorial Hugo"
image: "cover.jpg" # buat page bundle

# ATAU

image: "/images/tutorial-hugo.png" # buat static folder
cover:
  image: "cover.jpg"
  alt: "Tutorial Hugo"
  caption: "Belajar Hugo dari nol"
  relative: true # true = page bundle, false = static
---

Table of Contents (Daftar Isi)

Di artikel:

---
title: "Tutorial Panjang"
ShowToc: true
TocOpen: true # Terbuka otomatis
---

Otomatis aktif kalau ShowShareButtons: true di config.

Support: Twitter, LinkedIn, Reddit, Facebook, WhatsApp, Telegram.

Menjalankan Server Lokal dan Testing

Start Development Server

hugo server -D

Flag yang berguna:

-D = show drafts
--disableFastRender = full rebuild setiap perubahan
--navigateToChanged = browser auto-scroll ke perubahan
-p 8080 = custom port (default 1313)

Output yang benar:

Web Server is available at http://localhost:1313/
Press Ctrl+C to stop

Test Checklist

Buka http://localhost:1313 dan cek:

Homepage muncul dengan profile mode
Dark/light mode toggle berfungsi
Menu navigasi klik semua link
Buat artikel dummy: hugo new posts/test.md
Artikel muncul di /posts/
Reading time & word count muncul
Code syntax highlighting berfungsi
Table of contents generate otomatis
Share buttons muncul
Search page (/search/) berfungsi
Archive page (/archives/) list semua artikel

Troubleshooting Hugo: Masalah Umum dan Solusi

Tema ngga Muncul (Tampilan Putih Polos)

Masalah: Browser cuma show text hitam-putih tanpa styling

Kemungkinan:

Nama tema salah di config

# ❌ SALAH
theme: "papermod" # lowercase

# ✅ BENAR
theme: "PaperMod" # Exact match dengan nama folder

baseURL ngga sesuai

# Development (lokal)
baseURL: http://localhost:1313/ # Atau biarkan kosong

# Production
baseURL: https://deuxly.dev/ # Harus match dengan domain

Submodule belum di-init

# Kalau clone repo, Jalanin:
git submodule update --init --recursive

Fix:

# 1. Restart server
Ctrl+C
hugo server -D

# 2. Clear cache
rm -rf resources/ public/
hugo server -D

# 3. Hard refresh browser
Ctrl+Shift+R (Windows) atau Cmd+Shift+R (Mac)

CSS ngga Load (Styling Berantakan)

Gelaja: Layout ada tapi warna/font aneh

Penyebab: Browser cache lama

Fix:

# 1. Clear Hugo cache
rm -rf resources/

# 2. Restart server dengan flag
hugo server -D --disableFastRender

# 3. Browser hard refresh
# Chrome: Ctrl+Shift+Delete → Clear cache

Submodule Error saat Clone

Gelaja: Folder themes/PaperMod kosong setelah git clone

Penyebab: Submodule ngga auto-download

Fix:

# Setelah clone, Jalanin:
git submodule init
git submodule update

# Atau shortcut:
git clone --recurse-submodules https://github.com/user/blog.git

Update Tema Hilangkan Kustom

Gejala: Abis update tema, custom CSS hilang

Penyebab: Edit file tema langsung (di themes/PaperMod/)

Fix:

❌ JANGAN edit di:
themes/PaperMod/assets/css/custom.css

✅ EDIT di root project:
assets/css/extended/custom.css ← PaperMod will merge this

Cara update tema yang aman:

git submodule update --remote --merge

Kustom di root project ngga akan hilang.

Gejala: Navigasi bar kosong

Penyebab 1: Config menu salah indentasi

# ❌ SALAH (indentasi)
menu:
main: - name: Home

# ✅ BENAR
menu:
  main:
    - name: "Home"
      url: "/"
      weight: 1

Penyebab 2: Tema ngga support menu di header

Cek themes/PaperMod/layouts/partials/header.html - harus ada {{ range .Site.Menus.main }}

Search ngga Berfungsi

Gejala: Search page muncul tapi ngga ada hasil

Penyebab: Missing JSON output

Fix di hugo.yaml:

outputs:
  home: 
    - HTML 
    - RSS 
    - JSON # ← Wajib buat search!

Rebuild:

rm -rf public/
hugo

Cek public/index.json harus ada.

Cara Update Tema PaperMod

Check Ketersediaan Update

cd themes/PaperMod
git fetch
git log HEAD..origin/master --oneline # List commits baru

Update ke Versi Terbaru

# Dari root project
git submodule update --remote --merge

# Commit update
git add themes/PaperMod
git commit -m "Update PaperMod theme to latest version"

Update ke Commit Spesifik (Rollback)

cd themes/PaperMod
git checkout abc1234 # Commit hash tertentu
cd ../..
git add themes/PaperMod
git commit -m "Pin PaperMod to stable commit"

Kustom Lanjutan (Tanpa Ngerusak Tema)

Custom CSS

Buat file assets/css/extended/custom.css:

/* PaperMod akan auto-load file ini */
:root {
  --primary: #007bff;
  --secondary: #6c757d;
}

.post-title {
  color: var(--primary);
  font-size: 2.5rem;
}

/* Dark mode override */
.dark .post-title {
  color: #4dabf7;
}

Custom JavaScript

Buat file assets/js/extended/custom.js:

// PaperMod auto-load
console.log('Custom JS loaded');

// Example: Auto-expand TOC on desktop
if (window.innerWidth > 768) {
document.querySelector('.toc')?.classList.add('open');
}

Override Layout/Partial

Contoh: Custom footer

Copy file tema:

cp themes/PaperMod/layouts/partials/footer.html layouts/partials/

Edit layouts/partials/footer.html (di root, bukan themes/)
Hugo bakal pakai versi root, ignore tema

File structure:

blog-saya/
├── layouts/
│ └── partials/
│ └── footer.html ← Hugo pakai ini
└── themes/
└── PaperMod/
└── layouts/
└── partials/
└── footer.html ← Ignored

Latihan Terbaik: Workflow Profesional

Pisahkan Config Development & Production

Struktur:

config/
├── \_default/
│ └── hugo.yaml ← Base config
├── development/
│ └── hugo.yaml ← Override buat lokal
└── production/
└── hugo.yaml ← Override buat deploy

Development:

hugo server # Auto pakai config/development/

Production:

hugo --environment production

Gunakan .gitignore yang Proper

# Hugo build
/public/
/resources/\_gen/

# Theme (tracked by submodule)
# themes/PaperMod/\* ← JANGAN gitignore!

# OS
.DS_Store
Thumbs.db

# Editor
.vscode/
.idea/

# Temporary
_.bak
_~

Commit Pesan yang Jelas

# ❌ Jelek
git commit -m "update"

# ✅ Bagus
git commit -m "feat: Add search functionality to PaperMod theme"
git commit -m "fix: Resolve CSS loading issue in dark mode"
git commit -m "chore: Update PaperMod theme to v7.0"

Test Sebelum Deploy

# 1. Build production
hugo --environment production --minify

# 2. Test output
cd public
python3 -m http.server 8000

# 3. Open http://localhost:8000
# 4. Check: All pages, images, links

Backup Config

# Commit config changes separately
git add hugo.yaml
git commit -m "config: Update PaperMod settings for better SEO"

Rekomendasi Tema Hugo Alternatif

Kalau PaperMod kurang cocok, ini alternatif bagus:

Buat Blog Tutorial

Stack (4,500 stars) - Card-based, modern
Clarity (1,000 stars) - Documentation-focused

Buat Portfolio

Ananke (1,200 stars) - Minimalist, clean
Hugo Profile (600 stars) - Resume/CV style

Buat Magazine/Berita

Mainroad (700 stars) - Multi-column layout
Newsroom (300 stars) - News-style

Cara Ganti Tema

# Remove tema lama
git submodule deinit -f themes/PaperMod
git rm -f themes/PaperMod
rm -rf .git/modules/themes/PaperMod

# Add tema baru
git submodule add https://github.com/CaiJimmy/hugo-theme-stack themes/Stack

# Update config
# hugo.yaml: theme: "Stack"

Kesimpulan

Kamu baru aja belajar Cara Memasang Tema Hugo dengan metode Git Submodule cara yang profesional dan bagus buat jangka panjang. Dengan PaperMod, blog kamu sekarang punya:

✅ Tampilan modern dengan dark/light mode
✅ Performa tinggi (PageSpeed 95-100)
✅ SEO-optimized out of the box
✅ Fitur lengkap (search, archive, TOC, share buttons)
✅ Easy to update tanpa kehilangan Kustom sebelumnya

Langkah selanjutnya:

Eksperimen dengan konfigurasi PaperMod
Buat 3-5 artikel buat testing
Customize CSS/JS sesuai brand kamu
Deploy ke Vercel (review Part 1 )

Di Part 4, kita akan belajar cara menulis artikel dengan Markdown, termasuk syntax lengkap, shortcodes custom, dan tips produktivitas.

Deuxly

Tutorial Hugo Part 3: Cara Pasang Tema dan Konfigurasi Lengkap

Kenapa PaperMod? Perbandingan Tema Hugo Populer

Cara Install Tema Hugo: Git Submodule vs ZIP Download

❌ Download ZIP (JANGAN!)

❌ Git Clone (SALAH JUGA!)

✅ Git Submodule (CORRECT!)

Step by Step: Memasang Tema PaperMod dengan Git Submodule

Inisialisasi Git (Kalau Belum)

Tambah Tema sebagai Submodule

Verifikasi Instalasi

Commit Submodule

Konfigurasi Tema PaperMod: Dari Basic sampai Advanced

Konfigurasi Basic (Minimal buat Jalan)

Konfigurasi Menengah (Recommended)

Konfigurasi Tingkat Lanjut (Full Kustom)

Fitur PaperMod yang Wajib Diaktifin

Archive Page (Daftar Semua Artikel)

Search Page (Pencarian Artikel)

Cover Image buat Artikel (Thumbnail)

Table of Contents (Daftar Isi)

Social Share Buttons

Menjalankan Server Lokal dan Testing

Start Development Server

Test Checklist

Troubleshooting Hugo: Masalah Umum dan Solusi

Tema ngga Muncul (Tampilan Putih Polos)

CSS ngga Load (Styling Berantakan)

Submodule Error saat Clone

Update Tema Hilangkan Kustom

Menu ngga Muncul

Search ngga Berfungsi

Cara Update Tema PaperMod

Check Ketersediaan Update

Update ke Versi Terbaru

Update ke Commit Spesifik (Rollback)

Kustom Lanjutan (Tanpa Ngerusak Tema)

Custom CSS

Custom JavaScript

Override Layout/Partial

Latihan Terbaik: Workflow Profesional

Pisahkan Config Development & Production

Gunakan .gitignore yang Proper

Commit Pesan yang Jelas

Test Sebelum Deploy

Backup Config

Rekomendasi Tema Hugo Alternatif

Buat Blog Tutorial

Buat Portfolio

Buat Magazine/Berita

Cara Ganti Tema

Kesimpulan

Artikel Terkait

Komentar (0)