Menjalankan dan Membangun Situs

Menjalankan dan Membangun Situs Hugo
Pada tahap akhir pengembangan, kamu akan memerlukan server lokal untuk melihat hasil pekerjaanmu, serta membuat build untuk diunggah ke server produksi. Hugo menawarkan proses yang sederhana untuk kedua langkah ini.

Menjalankan Server Lokal Menggunakan hugo server

Server lokal adalah fitur bawaan Hugo untuk memudahkan proses pengembangan. Dengan menjalankan server ini, kamu dapat melihat perubahan secara langsung di browser tanpa perlu membangun ulang situs secara manual.

Cara Menjalankan Server Lokal:
Jalankan perintah berikut di terminal dari folder proyek Hugo:

hugo server

Output:
Setelah dijalankan, Hugo akan memberikan URL seperti berikut:

Web Server is available at http://localhost:1313/

Buka URL tersebut di browser untuk melihat situsmu.

Opsi Tambahan:

• -D: Menampilkan konten dalam status draft.
• -disableFastRender: Mematikan mode render cepat untuk memastikan semua perubahan diproses ulang.

Contoh:

hugo server -D --disableFastRender

Melihat Perubahan Secara Real-Time

Saat server lokal aktif, Hugo mendukung live reload. Artinya, setiap perubahan pada file konten, template, atau aset akan langsung diperbarui di browser tanpa perlu me-refresh halaman secara manual.

Catatan:

• Pastikan file yang diedit disimpan (CTRL+S atau CMD+S) agar Hugo mendeteksi perubahan.

• Perubahan yang terlihat tergantung pada cache browser. Jika tidak tampak, coba hapus cache atau gunakan mode incognito.

Membuat Build untuk Produksi dengan Perintah hugo

Ketika situs siap untuk dipublikasikan, Hugo dapat membangun versi produksi yang dioptimalkan. Perintah ini akan menghasilkan semua file HTML, CSS, JS, dan aset lainnya di folder public.

Cara Membuat Build
Jalankan perintah berikut:

hugo

Output:
Hugo akan membuat folder public di direktori proyekmu, yang berisi file statis siap diunggah ke server hosting.

Opsi Tambahan:

• --minify: Meminify (mengompresi) semua file HTML, CSS, dan JS.
• --environment production: Menetapkan variabel lingkungan ke produksi (berguna untuk tema atau konfigurasi tertentu).

contoh :

hugo --minify --environment production

Lokasi File Hasil Build:
Semua file akan disimpan di dalam folder public. Untuk melihatnya, buka folder tersebut atau akses file dengan server lokal menggunakan perintah seperti python -m http.server (untuk tes lokal).

Kesimpulan

• Gunakan hugo server untuk melihat situs di server lokal selama pengembangan.
• Gunakan fitur live reload untuk melihat perubahan secara real-time tanpa me-refresh browser.
• Gunakan hugo dengan opsi --minify untuk membuat build produksi yang siap diunggah ke server hosting. 🚀