livereload.js Terikut ke Production Saat `hugo deploy`: Penyebab dan Solusi

Dalam penggunaan Hugo, livereload.js seharusnya hanya muncul di mode development. Namun pada praktiknya, tidak jarang file ini justru ikut ter-deploy ke production meskipun deployment dilakukan menggunakan hugo deploy.

Masalah ini bukan bug Hugo, melainkan kesalahan pemahaman terhadap alur build dan deploy.

Pemisahan Konsep: Build vs Deploy di Hugo

Hugo memiliki dua proses yang terpisah secara tegas:

Command yang berkaitan:

Hal yang krusial:

hugo deploy tidak melakukan build ulang.

Penyebab livereload.js Terikut ke Production

Kasus yang paling sering terjadi adalah workflow berikut:

hugo server
# stop server
hugo deploy

Penjelasan:

• hugo server membangun HTML dalam mode development
• Hugo otomatis menyuntikkan livereload.js
• Output disimpan di folder public/
• hugo deploy menganggap isi public/ valid dan langsung meng-upload

Akibatnya, file hasil development ikut masuk ke production.

Arti Pesan No changes required.

Saat menjalankan:

hugo deploy

Dan muncul:

No changes required.

Artinya:

• Hugo membandingkan isi public/ lokal dengan remote
• Tidak menemukan perbedaan
• Tidak melakukan upload apa pun

Pesan ini bukan error. Namun jika public/ berisi hasil build dari hugo server, maka artifact yang salah dianggap final.

Peran Environment (development vs production)

Hugo menggunakan environment untuk menentukan perilaku build.

Cek environment aktif:

hugo env

Output yang benar untuk production:

Environment: production

Jika masih development, maka:

• LiveReload tetap aktif
• .Site.IsServer bernilai true
• Risiko livereload.js ikut ke output sangat tinggi

Kesalahan Umum yang Sering Terjadi

Mengira hugo deploy otomatis rebuild

Tidak. Deploy hanya meng-upload.

Deploy setelah hugo server

Ini hampir pasti menyebabkan livereload.js ikut.

Menggunakan --minify di hugo deploy

hugo deploy --minify

Error:

unknown flag: --minify

Karena:

• --minify hanya berlaku untuk hugo
• Bukan hugo deploy

Workflow Build & Deploy yang Benar

Langkah aman untuk production

rm -rf public && HUGO_ENV=production hugo --minify && hugo deploy

Penjelasan:

• Menghapus artifact lama
• Build ulang dengan environment production
• Deploy output yang bersih

Verifikasi Sebelum Deploy

Pastikan tidak ada livereload.js di output:

grep -R "livereload" public/

Jika tidak ada hasil, output aman untuk production.

Best Practice Inject LiveReload di Template

Hindari hardcode:

<script src="/livereload.js"></script>

Gunakan conditional bawaan Hugo:

{{ if .Site.IsServer }}
  {{ partial "livereload.html" . }}
{{ end }}

Atau lebih eksplisit:

{{ if and .Site.IsServer (eq hugo.Environment "development") }}
  {{ partial "livereload.html" . }}
{{ end }}

Dengan pendekatan ini:

• Development tetap nyaman
• Production bebas LiveReload

Workflow Ideal

Development

hugo server

Production

rm -rf public
hugo --minify
hugo deploy

Penutup

livereload.js ikut ke production terjadi karena artifact development yang dideploy tanpa rebuild production.

Pemahaman yang benar:

• hugo server hanya untuk development
• hugo adalah proses build
• hugo deploy hanya meng-upload hasil build

Dengan workflow yang benar, masalah ini dapat dihindari sepenuhnya.