Cara Membuat Halaman Kategori di Jekyll Tanpa Plugin

Salah satu fitur penting blog yang sering dicari adalah halaman kategori — halaman yang menampilkan semua artikel berdasarkan topik tertentu. Di WordPress ini sudah otomatis tersedia, tapi di Jekyll kamu perlu membuatnya sendiri.

Ada dua pendekatan: menggunakan plugin jekyll-archives, atau membuatnya secara manual tanpa plugin. Di artikel ini kita bahas keduanya, dengan fokus pada metode tanpa plugin yang kompatibel dengan semua hosting termasuk GitHub Pages.

---

Struktur Kategori di Jekyll

Di Jekyll, kategori didefinisikan di front matter setiap artikel:

---
layout: post
title: "Judul Artikel"
categories: [Tutorial, Jekyll]
---

Atau bisa juga dengan format array:

categories:
  - Tutorial
  - Jekyll

Jekyll akan otomatis mengumpulkan semua kategori dari semua artikel ke dalam variabel site.categories.

---

Cara 1: Satu Halaman untuk Semua Kategori

Cara paling sederhana adalah membuat satu halaman yang menampilkan semua kategori beserta artikel-artikelnya.

Buat file _pages/categories.html:

---
layout: page
title: Kategori
permalink: /categories/
---




  <section id="api">
    <h2>API <span>(1)</span></h2>
    <ul>
      
        <li>
          <a href="/memahami-restful-api-untuk-pemula/">Memahami RESTful API: Konsep, Metode, dan Best Practices</a>
          <small>01 August 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="backend">
    <h2>Backend <span>(2)</span></h2>
    <ul>
      
        <li>
          <a href="/memahami-restful-api-untuk-pemula/">Memahami RESTful API: Konsep, Metode, dan Best Practices</a>
          <small>01 August 2026</small>
        </li>
      
        <li>
          <a href="/rest-api-vs-graphql-vs-grpc/">REST API vs GraphQL vs gRPC: Memilih Protokol Komunikasi yang Tepat</a>
          <small>02 June 2025</small>
        </li>
      
    </ul>
  </section>

  <section id="cloudflare">
    <h2>Cloudflare <span>(1)</span></h2>
    <ul>
      
        <li>
          <a href="/analisis-traffic-cloudflare-automated-vulnerability-scanner/">Analisis Traffic Cloudflare: Mengapa Website Anda Tiba-tiba Diberondong Puluhan Ribu Request Bot Scanner?</a>
          <small>28 July 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="containerization">
    <h2>Containerization <span>(1)</span></h2>
    <ul>
      
        <li>
          <a href="/mengenal-docker-dan-containerization/">Mengenal Docker dan Containerization: Mengapa Penting Bagi Developer Modern?</a>
          <small>30 June 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="database">
    <h2>Database <span>(2)</span></h2>
    <ul>
      
        <li>
          <a href="/apa-itu-with-nolock-sql-server/">Apa Itu WITH (NOLOCK) pada SQL Server dan Kapan Harus Menggunakannya?</a>
          <small>26 July 2026</small>
        </li>
      
        <li>
          <a href="/memahami-indexing-database-b-tree-vs-hash/">Memahami Indexing pada Database: Cara Kerja B-Tree vs Hash Index</a>
          <small>10 July 2025</small>
        </li>
      
    </ul>
  </section>

  <section id="devops">
    <h2>DevOps <span>(2)</span></h2>
    <ul>
      
        <li>
          <a href="/pengertian-ci-cd-dan-implementasi-sederhana/">Apa Itu CI/CD? Panduan Lengkap untuk Pemula</a>
          <small>31 July 2026</small>
        </li>
      
        <li>
          <a href="/mengenal-docker-dan-containerization/">Mengenal Docker dan Containerization: Mengapa Penting Bagi Developer Modern?</a>
          <small>30 June 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="frontend">
    <h2>Frontend <span>(2)</span></h2>
    <ul>
      
        <li>
          <a href="/pengenalan-typescript-untuk-pemula/">Pengenalan TypeScript untuk Pemula: Kenapa dan Bagaimana Mulai?</a>
          <small>02 August 2026</small>
        </li>
      
        <li>
          <a href="/ssr-vs-csr-dalam-pengembangan-web-modern/">SSR vs CSR: Memahami Perbedaan Server-Side dan Client-Side Rendering</a>
          <small>18 July 2025</small>
        </li>
      
    </ul>
  </section>

  <section id="hobby">
    <h2>Hobby <span>(1)</span></h2>
    <ul>
      
        <li>
          <a href="/perbedaan-kabel-iem-QDC-dan-2Pin/">Perbedaan Konektor IEM QDC dan 2 PIN</a>
          <small>27 June 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="iem">
    <h2>IEM <span>(1)</span></h2>
    <ul>
      
        <li>
          <a href="/perbedaan-kabel-iem-QDC-dan-2Pin/">Perbedaan Konektor IEM QDC dan 2 PIN</a>
          <small>27 June 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="jekyll">
    <h2>Jekyll <span>(8)</span></h2>
    <ul>
      
        <li>
          <a href="/cara-membuat-halaman-kategori-di-jekyll/">Cara Membuat Halaman Kategori di Jekyll Tanpa Plugin</a>
          <small>06 August 2026</small>
        </li>
      
        <li>
          <a href="/mengenal-liquid-templating-di-jekyll/">Mengenal Liquid Templating di Jekyll: Panduan Lengkap untuk Pemula</a>
          <small>05 August 2026</small>
        </li>
      
        <li>
          <a href="/cara-membuat-custom-domain-di-github-pages/">Cara Membuat Custom Domain di GitHub Pages dengan HTTPS</a>
          <small>04 August 2026</small>
        </li>
      
        <li>
          <a href="/cara-deploy-jekyll-ke-cloudflare-pages/">Cara Deploy Jekyll ke Cloudflare Pages: CDN Global Gratis</a>
          <small>02 August 2026</small>
        </li>
      
        <li>
          <a href="/cara-deploy-jekyll-ke-github-pages/">Cara Deploy Jekyll ke GitHub Pages: Gratis dan Otomatis</a>
          <small>01 August 2026</small>
        </li>
      
        <li>
          <a href="/perbedaan-jekyll-vs-hugo-vs-gatsby/">Perbedaan Jekyll vs Hugo vs Gatsby: Mana yang Cocok untuk Kamu?</a>
          <small>31 July 2026</small>
        </li>
      
        <li>
          <a href="/apa-itu-static-site-generator/">Apa itu Static Site Generator dan Mengapa Kamu Harus Mencobanya?</a>
          <small>30 July 2026</small>
        </li>
      
        <li>
          <a href="/flyenv-cara-install-ruby-dan-jekyll-setup-local-development/">FlyEnv : Cara Install Ruby dan Jekyll Setup Local Development</a>
          <small>29 July 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="performance">
    <h2>Performance <span>(2)</span></h2>
    <ul>
      
        <li>
          <a href="/optimasi-gambar-untuk-web-performa-cepat/">Optimasi Gambar untuk Web: Cara Bikin Blog Lebih Cepat</a>
          <small>03 August 2026</small>
        </li>
      
        <li>
          <a href="/memahami-indexing-database-b-tree-vs-hash/">Memahami Indexing pada Database: Cara Kerja B-Tree vs Hash Index</a>
          <small>10 July 2025</small>
        </li>
      
    </ul>
  </section>

  <section id="sql">
    <h2>SQL <span>(1)</span></h2>
    <ul>
      
        <li>
          <a href="/apa-itu-with-nolock-sql-server/">Apa Itu WITH (NOLOCK) pada SQL Server dan Kapan Harus Menggunakannya?</a>
          <small>26 July 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="security">
    <h2>Security <span>(1)</span></h2>
    <ul>
      
        <li>
          <a href="/analisis-traffic-cloudflare-automated-vulnerability-scanner/">Analisis Traffic Cloudflare: Mengapa Website Anda Tiba-tiba Diberondong Puluhan Ribu Request Bot Scanner?</a>
          <small>28 July 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="technology">
    <h2>Technology <span>(2)</span></h2>
    <ul>
      
        <li>
          <a href="/ssr-vs-csr-dalam-pengembangan-web-modern/">SSR vs CSR: Memahami Perbedaan Server-Side dan Client-Side Rendering</a>
          <small>18 July 2025</small>
        </li>
      
        <li>
          <a href="/rest-api-vs-graphql-vs-grpc/">REST API vs GraphQL vs gRPC: Memilih Protokol Komunikasi yang Tepat</a>
          <small>02 June 2025</small>
        </li>
      
    </ul>
  </section>

  <section id="tutorial">
    <h2>Tutorial <span>(10)</span></h2>
    <ul>
      
        <li>
          <a href="/cara-membuat-halaman-kategori-di-jekyll/">Cara Membuat Halaman Kategori di Jekyll Tanpa Plugin</a>
          <small>06 August 2026</small>
        </li>
      
        <li>
          <a href="/mengenal-liquid-templating-di-jekyll/">Mengenal Liquid Templating di Jekyll: Panduan Lengkap untuk Pemula</a>
          <small>05 August 2026</small>
        </li>
      
        <li>
          <a href="/cara-membuat-custom-domain-di-github-pages/">Cara Membuat Custom Domain di GitHub Pages dengan HTTPS</a>
          <small>04 August 2026</small>
        </li>
      
        <li>
          <a href="/optimasi-gambar-untuk-web-performa-cepat/">Optimasi Gambar untuk Web: Cara Bikin Blog Lebih Cepat</a>
          <small>03 August 2026</small>
        </li>
      
        <li>
          <a href="/cara-deploy-jekyll-ke-cloudflare-pages/">Cara Deploy Jekyll ke Cloudflare Pages: CDN Global Gratis</a>
          <small>02 August 2026</small>
        </li>
      
        <li>
          <a href="/cara-deploy-jekyll-ke-github-pages/">Cara Deploy Jekyll ke GitHub Pages: Gratis dan Otomatis</a>
          <small>01 August 2026</small>
        </li>
      
        <li>
          <a href="/perbedaan-jekyll-vs-hugo-vs-gatsby/">Perbedaan Jekyll vs Hugo vs Gatsby: Mana yang Cocok untuk Kamu?</a>
          <small>31 July 2026</small>
        </li>
      
        <li>
          <a href="/pengertian-ci-cd-dan-implementasi-sederhana/">Apa Itu CI/CD? Panduan Lengkap untuk Pemula</a>
          <small>31 July 2026</small>
        </li>
      
        <li>
          <a href="/apa-itu-static-site-generator/">Apa itu Static Site Generator dan Mengapa Kamu Harus Mencobanya?</a>
          <small>30 July 2026</small>
        </li>
      
        <li>
          <a href="/flyenv-cara-install-ruby-dan-jekyll-setup-local-development/">FlyEnv : Cara Install Ruby dan Jekyll Setup Local Development</a>
          <small>29 July 2026</small>
        </li>
      
    </ul>
  </section>

  <section id="typescript">
    <h2>TypeScript <span>(1)</span></h2>
    <ul>
      
        <li>
          <a href="/pengenalan-typescript-untuk-pemula/">Pengenalan TypeScript untuk Pemula: Kenapa dan Bagaimana Mulai?</a>
          <small>02 August 2026</small>
        </li>
      
    </ul>
  </section>

Hasilnya adalah satu halaman /categories/ yang menampilkan semua kategori dengan daftar artikelnya.

---

Cara 2: Halaman Terpisah per Kategori (Tanpa Plugin)

Untuk setiap kategori, kita buat file halaman sendiri secara manual di folder _pages/ atau folder category/.

Buat Layout Kategori

Buat file _layouts/category.html:

---
layout: default
---

<div class="category-header">
  <h1>Kategori: </h1>
  <p></p>
</div>

<div class="post-list">
  

  
    <p>Belum ada artikel di kategori ini.</p>
  
</div>

Buat File Halaman per Kategori

Untuk setiap kategori, buat file markdown. Misalnya untuk kategori “Tutorial”:

_pages/category-tutorial.md:

---
layout: category
title: "Tutorial"
category_name: Tutorial
description: "Artikel-artikel panduan dan tutorial teknis."
permalink: /category/tutorial/
---

_pages/category-jekyll.md:

---
layout: category
title: "Jekyll"
category_name: Jekyll
description: "Tips dan trik seputar Jekyll Static Site Generator."
permalink: /category/jekyll/
---

_pages/category-security.md:

---
layout: category
title: "Security"
category_name: Security
description: "Artikel seputar keamanan web dan cybersecurity."
permalink: /category/security/
---

---

Cara 3: Menggunakan Plugin jekyll-archives (Untuk Cloudflare Pages / Self-hosted)

Jika kamu deploy ke Cloudflare Pages, Netlify, atau server sendiri (bukan GitHub Pages mode klasik), kamu bisa menggunakan plugin jekyll-archives yang otomatis membuat halaman per kategori.

Instalasi

Tambahkan ke Gemfile:

gem "jekyll-archives"

Jalankan:

bundle install

Konfigurasi di _config.yml

plugins:
  - jekyll-archives

jekyll-archives:
  enabled:
    - categories
    - tags
  layouts:
    category: category-archive
    tag: tag-archive
  permalinks:
    category: "/category/:name/"
    tag: "/tag/:name/"

Buat Layout _layouts/category-archive.html

---
layout: default
---

<h1>Kategori: Cara Membuat Halaman Kategori di Jekyll Tanpa Plugin</h1>

Dengan konfigurasi ini, Jekyll akan otomatis membuat halaman /category/tutorial/, /category/jekyll/, dst. untuk setiap kategori yang ada.

---

Menambahkan Link Kategori ke Artikel

Di layout post (_layouts/post.html), tambahkan link ke halaman kategori:

  <div class="categories">
    
      <a href="/category/tutorial/" class="category-badge">
        Tutorial
      </a>
    
      <a href="/category/jekyll/" class="category-badge">
        Jekyll
      </a>
    
  </div>

---

Menambahkan Kategori ke Menu Navigasi

Di _config.yml, kamu bisa mendefinisikan menu navigasi:

nav_links:
  - title: Tutorial
    url: /category/tutorial/
  - title: Jekyll
    url: /category/jekyll/
  - title: Security
    url: /category/security/

Lalu di layout header:

---

Kesimpulan

Membangun halaman kategori di Jekyll bisa dilakukan tanpa plugin sama sekali — cukup dengan Liquid templating dan beberapa file halaman. Untuk skalabilitas yang lebih baik, plugin jekyll-archives adalah solusi otomatis yang sangat memudahkan, terutama ketika jumlah kategori terus bertambah.

Pilih pendekatan yang sesuai dengan kebutuhan dan tempat hosting kamu.