Kiki/🎮🍉⌨️🍩💻
Setiap file konten di Jekyll — baik artikel (_posts) maupun halaman (_pages) — diawali dengan blok khusus yang disebut front matter. Blok ini ditulis dalam format YAML dan diapit oleh tiga tanda hubung (---). Di sinilah kamu mendefinisikan metadata halaman: judul, tanggal, kategori, layout yang digunakan, dan variabel-variabel kustom apapun yang kamu butuhkan.
Anatomi Front Matter
---
layout: post
title: "Judul Artikel Kamu"
date: 2026-08-12 10:00:00 +0700
author: kiki
categories: [Tutorial, Jekyll]
tags: [jekyll, front-matter, tutorial]
image: /assets/images/thumbnail.jpg
description: "Deskripsi singkat artikel untuk SEO dan preview media sosial."
---
Front matter harus diletakkan di bagian paling atas file, sebelum konten Markdown apapun. Jika posisinya salah atau formatnya tidak valid, Jekyll akan gagal memproses file tersebut.
Variabel Bawaan Jekyll
layout
Menentukan template layout yang digunakan untuk merender halaman ini.
layout: post # menggunakan _layouts/post.html
layout: page # menggunakan _layouts/page.html
layout: default # menggunakan _layouts/default.html
layout: none # tidak menggunakan layout sama sekali
title
Judul halaman. Tersedia via page.title di template.
title: "Cara Install Jekyll di Windows"
date
Tanggal dan waktu publikasi. Bisa override tanggal yang ada di nama file.
date: 2026-08-12 # tanggal saja
date: 2026-08-12 10:30:00 # dengan waktu
date: 2026-08-12 10:30:00 +0700 # dengan timezone WIB
permalink
Override URL default halaman ini.
permalink: /panduan-front-matter/
permalink: /tutorial/:year/:title/
published
Set false untuk menyembunyikan artikel dari build tanpa menghapus file.
published: false # artikel tidak akan muncul di situs
published: true # default
categories
Satu atau lebih kategori. Bisa berupa string atau array.
# Format array (direkomendasikan)
categories: [Tutorial, Jekyll]
# Format YAML list
categories:
- Tutorial
- Jekyll
# Single category
categories: Tutorial
tags
Tag untuk artikel. Mirip kategori tapi biasanya lebih spesifik.
tags: [jekyll, yaml, front-matter]
Variabel Umum yang Sering Dipakai
image
Path gambar thumbnail untuk artikel. Digunakan oleh layout tema dan tag SEO untuk Open Graph.
image: /assets/images/artikel-thumbnail.jpg
description
Deskripsi singkat untuk meta tag SEO dan preview media sosial.
description: "Panduan lengkap front matter Jekyll beserta semua variabel yang tersedia."
author
Nama atau ID penulis. Berguna untuk blog multi-penulis.
author: kiki
excerpt
Override cuplikan artikel yang ditampilkan di halaman daftar post. Jika tidak diisi, Jekyll otomatis mengambil paragraf pertama.
excerpt: "Pengenalan singkat tentang front matter yang akan memancing pembaca untuk lanjut membaca."
Variabel Kustom
Kamu bisa mendefinisikan variabel apapun di front matter dan mengaksesnya via page.nama_variabel:
---
layout: post
title: "Review Laptop Gaming"
harga: 15000000
rating: 4.5
tersedia: true
warna:
- Hitam
- Silver
spesifikasi:
prosesor: "Intel Core i7-14700H"
ram: "32GB DDR5"
storage: "1TB NVMe SSD"
---
Akses di template Liquid:
Harga: Rp {{ page.harga | number_with_delimiter }}
Rating: {{ page.rating }}/5
{% for warna in page.warna %}
- {{ warna }}
{% endfor %}
Prosesor: {{ page.spesifikasi.prosesor }}
Default Front Matter via _config.yml
Daripada mengisi variabel yang sama berulang-ulang di setiap artikel, kamu bisa mendefinisikan nilai default di _config.yml:
defaults:
# Default untuk semua post
- scope:
path: "_posts"
type: "posts"
values:
layout: post
author: kiki
comments: true
image: /assets/images/default-thumbnail.jpg
# Default untuk semua halaman
- scope:
path: "_pages"
type: "pages"
values:
layout: page
# Default untuk folder/path tertentu
- scope:
path: "tutorial"
values:
layout: tutorial
category: Tutorial
Nilai di front matter artikel akan override nilai default jika didefinisikan.
Format YAML yang Perlu Diperhatikan
String dengan Karakter Khusus
Gunakan tanda kutip jika judul mengandung tanda titik dua, tanda seru, atau karakter khusus lain:
# Salah — tanda : akan menyebabkan error YAML
title: Tutorial: Cara Install Jekyll
# Benar
title: "Tutorial: Cara Install Jekyll"
title: 'Tutorial: Cara Install Jekyll'
Boolean Values
published: true # bukan "true" (dengan kutip)
featured: false # bukan "false" (dengan kutip)
Angka
order: 1 # integer
price: 99.99 # float
Multi-line String
description: >
Ini adalah deskripsi panjang yang
ditulis dalam beberapa baris, tapi
akan digabung menjadi satu baris.
excerpt: |
Ini adalah teks multi-baris
yang mempertahankan baris baru.
Cocok untuk kutipan atau puisi.
Mengakses Front Matter di Template
Semua variabel front matter tersedia lewat objek page:
{{ page.title }}
{{ page.date | date: "%d %B %Y" }}
{{ page.author }}
{{ page.description }}
{{ page.image }}
{% if page.featured %}
<span class="badge">Featured</span>
{% endif %}
{% for tag in page.tags %}
<span class="tag">{{ tag }}</span>
{% endfor %}
Contoh Front Matter Lengkap
---
layout: post
title: "Panduan Lengkap Front Matter Jekyll"
date: 2026-08-12 09:00:00 +0700
author: kiki
categories: [Tutorial, Jekyll]
tags: [jekyll, yaml, panduan, front-matter]
image: /assets/images/front-matter-jekyll.jpg
description: "Panduan komprehensif tentang front matter Jekyll: variabel bawaan, variabel kustom, dan cara menggunakan default values."
comments: true
published: true
---
Kesimpulan
Front matter adalah jantung dari sistem konten Jekyll. Dengan memahami variabel bawaan dan kemampuan mendefinisikan variabel kustom, kamu punya fleksibilitas penuh untuk membangun sistem konten yang sesuai kebutuhan — mulai dari blog sederhana hingga situs dokumentasi yang kompleks.
Manfaatkan fitur defaults di _config.yml untuk menghindari pengulangan dan menjaga front matter artikel tetap ringkas.