Membuat dan Menampilkan Postingan Di Situs Hugo
icon-hugo

⛾ Home hugo Jumat, 04 November 2022 (Diupdate: Kamis, 19 Januari 2023) - 📗 3 Menit

Disini kita akan belajar membuat sebuah artikel atau postingan menggunakan perintah di terminal dan menampilkannya ke situs hugo.

Persiapan

Lewatkan langkah ini, jika kamu sudah pernah membuat file yang sama dengan file-file html dibawah.

Pertama, buat beberapa file.html di dalam folder _default dan partials.

Lihat daftar file-filenya dibawah ini.

 1layouts
 2    ├── _default
 3    |        ├── baseof.html
 4    |        ├── list.html
 5    |        ├── single.html
 6    ├── partials
 7    |        ├── head.html
 8    |        ├── header.html
 9    |        ├── footer.html
10    ├── shortcoodes
11    ├── index.html
12    ├── 404.html

Pastikan untuk membuat semua file yang dibutuhkan dan pastikan juga jalur filenya sesuai dengan ilustrasi diatas.

Membuat postingan pertama di Hugo

Setelah kita selesai membuat folder dan file yang dibutuhkan. Kita sudah bisa membuat postingan atau artikel pertama kita.

  1. Buka terminal kamu.

  2. Gunakan terminal dengan perintah berikut untuk membuat sebuah postingan (postingan atau artikel tersebut disimpan di dalam folder content).

1hugo new postingan1.md

Postingan atau artkel hugo dibuat menggunakan file markdown. Jika kamu belum tau apa itu file markdown.

Silahkan belajar tentang file markdown disini.

  1. Setelah itu, ketik beberapa penggalan kata atau teks didalam file postingan1.md tadi.

Hasilnya akan terlihat seperti ini:

1---
2title: "Postingan1"
3date: 2022-10-11T17:10:34+08:00
4draft: true
5---
6Kucing adalah sejenis mamalia karnivora dari keluarga _Felidae_. Kata "kucing" biasanya merujuk kepada "kucing" yang telah dijinakkan, tetapi bisa juga merujuk kepada "kucing besar" seperti singa dan harimau.

Tiga garis kesamping - - - adalah sebuah batas dari yang namanya front matter.

Ini akan saya bahas kedepannya (bukan sekarang). Untuk sekarang, kita fokus saja ke belajar cara membuat postingan.

  1. Kita akan mencoba untuk menampilkan teks yang sudah kita ketik tadi ke halaman utama (home page) situs hugo.

Caranya adalah dengan menggunakan template kode hugo.

Template kode hugo berisi function dan variable yang sudah dibuat hugo.

Function dan variable tersebut dapat kita gunakan untuk mengatur konten, tata letak, mengatur halaman, dan mengatur keseluruhan dari situs hugo.

Selain menggunakan function dan variable bawaan hugo. Kita juga bisa membuat variable kita sendiri dengan data kustom sesuai keinginan dan kebutuhan.

Saya akan membahas itu nanti. Sekarang kita fokus untuk menampilkan postingan atau artikel di situs hugo.

Silahkan salin kode dibawah ini ke file index.html (hapus kode sebelumnya jika masih ada).

1{{ define "main" }}
2    {{ range .Site.RegularPages }}
3        <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
4        <span>{{ .Date }}</span>
5        {{ .Summary }}
6    {{ end }}
7{{ end }}
  1. Buka terminal di visual studio code kamu dengan menggunakan tombol kombinasi Ctrl + Shift + ‘ atau buka terminal eksternal (Cari dan masuk ke folder belajarhugo).

Kemudian ketik perintah dibawah ini:

1hugo server -D
  1. Buka situs hugo kamu di browser. Ketik localhost:1313 di pencarian browser kemudian tekan Enter.

Pada halaman browser, kita akan melihat postingan yang sudah kita buat tadi.

Jika kita coba klik judul postingan tersebut, maka kita akan diarahkan ke halaman mandiri dari postingan atau artikel-nya.

Eits… belum selesai, masih terdapat satu masalah, masalahnya adalah halamannya tidak menampilkan apa yang sudah kita ketik di file postingan1.md.

Supaya postingan yang kita buat ditampilkan dengan benar.

Kita perlu memanggil isi dari postingan (judul, tanggal/waktu postingan, dan isi postingan) dengan menggunakan variable dan function hugo.

  1. Salin dan tempel kode dibawah ini ke file single.html:
1{{ define "main" }}
2    <h1>{{ .Title }}</h1>
3    <div>{{ .Date }}</div>
4    {{ .Content }}
5{{ end }}
  1. Kemudian, buka kembali situs hugo di browser. Klik postingan atau artikel yang tadi kita buat.

Kita akan melihat postingan secara keseluruhan (refresh halamannya jika tidak terjadi apa-apa).

Jangan lupa simpan filenya ya 😄.

Kategori: Hugo

captcha-img