Tutorial Hugo, Memasang Komentar Disqus

deuxly.id

Bagi pengguna Static Site Generator (SSG) seperti Hugo salah satu tantangan terbesar adalah hilangnya fitur dinamis yang biasanya ada di platform seperti WordPress, salah satunya adalah kolom komentar. Karena Hugo hanya menghasilkan file HTML statis, kita tidak memiliki database bawaan untuk menyimpan interaksi pembaca. Namun, interaksi adalah nyawa dari sebuah blog. Tanpa kolom komentar, blog terasa seperti jalan satu arah.

Untungnya, solusi pihak ketiga hadir untuk menjembatani kekurangan ini. Salah satu yang paling populer, stabil, dan mudah digunakan adalah Disqus. Platform ini memungkinkan Anda menyematkan sistem komentar yang kaya fitur ke dalam halaman statis Anda hanya dengan beberapa baris konfigurasi.

Dalam artikel ini, kita akan membahas secara mendalam tentang cara memasang komentar Disqus di Hugo , mulai dari pendaftaran akun, konfigurasi kode, hingga tips agar loading blog hugo Anda tetap ngebut. Mari kita mulai transformasi blog statis Anda menjadi ruang diskusi yang hidup.

Mengapa Memilih Komentar Disqus untuk Hugo?

Sebelum masuk ke teknis pemasangan, penting untuk memahami mengapa Disqus menjadi standar industri untuk blog statis:

1. Tanpa Database: Anda tidak perlu menyewa server SQL atau memikirkan backend. Semua data komentar disimpan di server Disqus.

2. Fitur Anti-Spam: Disqus memiliki filter spam yang sangat kuat, melindungi blog Anda dari komentar sampah otomatis.

3. Hierarki Komentar: (Threaded Comments): Memungkinkan pembaca membalas komentar spesifik, menciptakan diskusi yang rapi.

4. Integrasi Sosial Media: Pengguna bisa login menggunakan Google, Facebook, atau Twitter.

Mendaftar dan Mendapatkan Shortname Disqus

Langkah pertama dalam tutorial cara memasang komentar Disqus di Hugo adalah mendapatkan identitas unik blog Anda, yang disebut Shortname.

1. Kunjungi situs resmi [Disqus.com(https://disqus.com).

2. Klik tombol Get Started dan lakukan pendaftaran akun (atau login jika sudah punya).

3. Setelah masuk, Anda akan dihadapkan pada dua pilihan. Pilih opsi: “I want to install Disqus on my site”.

4. Create a new site:

• Website Name: Masukkan nama blog Anda (misalnya: Dekode Blog). Nama ini akan menjadi dasar Shortname Anda.

• Category: Pilih kategori yang sesuai (misalnya: Tech).

5. Klik Create Site.

6. Pilih paket (pilih Basic/Free untuk penggunaan standar).

7. Penting: Setelah situs dibuat, perhatikan Shortname yang diberikan Disqus. Biasanya formatnya seperti deuxly-blog.disqus.com. Yang kita butuhkan hanya bagian depannya saja, yaitu deuxly-blog. Simpan ini baik-baik.

Konfigurasi Dasar di Hugo

Hugo sebenarnya sudah memiliki dukungan built-in untuk Disqus, yang membuat proses ini jauh lebih sederhana dibandingkan SSG lainnya. Anda hanya perlu mendefinisikan Shortname tadi ke dalam file konfigurasi utama Hugo Anda.

Buka file konfigurasi di root folder proyek Hugo Anda. File ini biasanya bernama hugo.toml, config.toml, atau config.yaml.

Jika menggunakan hugo.toml atau config.toml:

Tambahkan kode berikut di bagian atas file (di luar blok konfigurasi lain):

disqusShortname = "shortname-anda-disini"

Jika menggunakan config.yaml:

disqusShortname: shortname-anda-disini

Catatan: Ganti shortname-anda-disini dengan ID yang Anda dapatkan di Langkah 1 (contoh: deuxly). Jangan masukkan URL lengkap .disqus.com.

Menampilkan Komentar di Template (Layouts)

Setelah Hugo “mengenal” akun Disqus Anda, langkah selanjutnya dalam cara memasang komentar Disqus di Hugo adalah menentukan di mana komentar tersebut akan muncul. Biasanya, komentar diletakkan di bagian bawah artikel.

Anda perlu mengedit file layout tema Anda.

1. Masuk ke folder layouts.

2. Cari folder _default atau posts.

3. Buka file bernama single.html. Ini adalah template yang mengatur tampilan halaman artikel tunggal.

Jika Anda tidak menemukan folder layouts di root (karena Anda menggunakan tema yang diunduh di folder themes), JANGAN edit file di dalam folder themes langsung.

Cara yang benar (Override Theme): Salin file themes/nama-tema/layouts/_default/single.html ke folder layouts/_default/single.html di root proyek Anda.

Lalu, tambahkan kode Internal Template Hugo berikut di posisi yang Anda inginkan (biasanya sebelum penutup tag </article> atau </footer>:

{{ template "_internal/disqus.html" . }}

Kode satu baris di atas adalah “magic” dari Hugo. Hugo akan secara otomatis men-generate kode JavaScript lengkap yang dibutuhkan Disqus berdasarkan disqusShortname yang sudah Anda atur sebelumnya.

Mencegah Error di Localhost

1. Salah satu masalah umum saat mengembangkan blog adalah kolom komentar Disqus akan memuat di localhost (komputer Anda). Ini buruk karena:

2. Bisa mengacaukan data analitik diskusi.

3. Seringkali muncul pesan error karena URL localhost tidak terdaftar di Trusted Domains Disqus.

Untuk mengatasinya, kita bisa membungkus kode tadi dengan logika kondisional Hugo. Ubah kode di langkah 3 menjadi seperti ini:

{{ if not .Site.IsServer }}
    <div class="comments-area">
        <h3>Diskusi</h3>
        {{ template "_internal/disqus.html" . }}
    </div>
{{ end }}

Penjelasan: Kode .Site.IsServer akan bernilai true jika Anda menjalankan perintah hugo server. Dengan menambahkan not, kode Disqus hanya akan dirender saat situs sudah di-build dan di-deploy (live), dan akan hilang saat Anda sedang coding di komputer lokal.

Kustom Komentar Disqus di Hugo

Terkadang, template bawaan Hugo tidak cukup fleksibel untuk kebutuhan spesifik. Jika Anda ingin kontrol penuh, atau jika tema Anda tidak mendukung Internal Template, Anda bisa menggunakan metode manual.

Buat file baru di layouts/partials/comments.html dan isi dengan kode berikut (ambil kode Universal Embed Code dari dashboard Disqus Anda):

<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
    this.page.url = "{{ .Permalink }}";  
    this.page.identifier = "{{ .File.UniqueID }}"; 
    };
    (function() { 
    var d = document, s = d.createElement('script');
    s.src = 'https://SHORTNAME-ANDA.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Lalu panggil partial ini di single.html Anda dengan cara:

{{ partial "comments.html" . }}

Tips: Pastikan variabel this.page.identifier konsisten agar komentar tidak hilang jika Anda mengubah judul artikel atau URL di masa depan.

SEO & Lazy Loading Disuqs

Meskipun kita sudah membahas cara memasang komentar Disqus di Hugo, ada satu kelemahan Disqus: Skripnya cukup berat dan bisa memperlambat loading speed blog Anda. Ini bisa berdampak buruk pada skor SEO (Core Web Vitals).

Solusinya adalah menggunakan teknik Lazy Loading. Artinya, komentar Disqus hanya akan dimuat jika pengguna melakukan scroll sampai ke bawah halaman atau mengklik tombol “Tampilkan Komentar”.

Berikut adalah trik sederhana menggunakan tombol pemicu:

1. Buat tombol HTML di tempat Anda ingin komentar muncul:

<button id="load-comments" class="btn-disqus">Tampilkan Komentar</button>
<div id="disqus_thread"></div>

2. Tambahkan JavaScript sederhana di bagian bawah halaman (footer.html atau sebelum </body>:

document.getElementById('load-comments').onclick = function() {
    var d = document, s = d.createElement('script');
    s.src = 'https://SHORTNAME-ANDA.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    this.style.display = 'none'; // Sembunyikan tombol setelah diklik
};

Dengan cara ini, Google PageSpeed Insights tidak akan mendeteksi beban skrip Disqus saat halaman pertama kali dimuat.

Kesimpulan: Memasang Komentar Disqus di Hugo

Memasang sistem komentar pada blog statis tidaklah serumit yang dibayangkan. Dengan mengikuti tutorial cara memasang komentar Disqus di Hugo di atas, Anda kini telah membuka pintu interaksi dengan pembaca Anda.

Ingat, blog teknikal seperti Deuxly atau blog personal sangat membutuhkan feedback. Komentar bisa menjadi tempat untuk koreksi kode, diskusi ide baru.

Langkah Selanjutnya untuk Anda: Setelah komentar terpasang, cobalah lakukan deploy ke hosting Anda Netlify/Vercel/GitHub Pages . Buka salah satu artikel melalui HP atau browser lain, dan coba tinggalkan komentar “Tes” untuk memastikan semuanya berjalan lancar.

Selamat coding dan semoga komunitas blog Anda semakin ramai!

FAQ Seputar Komentar Disqus di Hugo