Kiki/🎮🍉⌨️🍩💻
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="docker">
<h2>Docker <span>(11)</span></h2>
<ul>
<li>
<a href="/docker-cicd-github-actions/">Docker dalam CI/CD Pipeline dengan GitHub Actions</a>
<small>07 September 2026</small>
</li>
<li>
<a href="/docker-dengan-database-postgresql-mysql/">Docker dengan Database: Mengelola PostgreSQL dan MySQL di Container</a>
<small>06 September 2026</small>
</li>
<li>
<a href="/docker-security-best-practices/">Docker Security: Best Practices Keamanan Container di Production</a>
<small>05 September 2026</small>
</li>
<li>
<a href="/docker-untuk-development-environment/">Docker untuk Development Environment: Setup Lokal yang Konsisten untuk Tim</a>
<small>04 September 2026</small>
</li>
<li>
<a href="/deploy-aplikasi-dengan-docker-di-server/">Deploy Aplikasi dengan Docker di Server Production</a>
<small>03 September 2026</small>
</li>
<li>
<a href="/docker-registry-push-pull-image/">Docker Registry: Cara Push dan Pull Image ke Docker Hub dan Private Registry</a>
<small>02 September 2026</small>
</li>
<li>
<a href="/docker-volume-dan-network/">Docker Volume dan Network: Data Persisten dan Komunikasi Antar Container</a>
<small>01 September 2026</small>
</li>
<li>
<a href="/docker-compose-multi-container/">Docker Compose: Mengelola Multi-Container dengan Mudah</a>
<small>31 August 2026</small>
</li>
<li>
<a href="/dockerfile-membuat-docker-image/">Dockerfile: Cara Membuat Docker Image Sendiri</a>
<small>30 August 2026</small>
</li>
<li>
<a href="/pengenalan-docker-container-untuk-developer/">Pengenalan Docker: Apa itu Container dan Mengapa Developer Harus Tahu?</a>
<small>29 August 2026</small>
</li>
<li>
<a href="/cara-setup-jekyll-dengan-docker/">Cara Setup Jekyll dengan Docker: Local Development Tanpa Install Ruby</a>
<small>15 August 2026</small>
</li>
</ul>
</section>
<section id="express-js">
<h2>Express.js <span>(10)</span></h2>
<ul>
<li>
<a href="/deploy-express-js-ke-production/">Deploy Express.js ke Production dengan PM2 dan Environment Variables</a>
<small>28 August 2026</small>
</li>
<li>
<a href="/upload-file-express-js-multer/">Upload File di Express.js dengan Multer</a>
<small>27 August 2026</small>
</li>
<li>
<a href="/error-handling-dan-validasi-express-js/">Error Handling dan Validasi Input di Express.js</a>
<small>26 August 2026</small>
</li>
<li>
<a href="/autentikasi-jwt-express-js/">Autentikasi JWT di Express.js: Login, Token, dan Proteksi Route</a>
<small>25 August 2026</small>
</li>
<li>
<a href="/koneksi-database-express-js-prisma/">Koneksi Database di Express.js dengan Prisma ORM</a>
<small>24 August 2026</small>
</li>
<li>
<a href="/membuat-restful-api-express-js/">Membuat RESTful API dengan Express.js: Panduan Lengkap</a>
<small>23 August 2026</small>
</li>
<li>
<a href="/request-dan-response-express-js/">Memahami Request dan Response di Express.js</a>
<small>22 August 2026</small>
</li>
<li>
<a href="/middleware-express-js/">Middleware Express.js: Konsep, Jenis, dan Cara Membuatnya</a>
<small>21 August 2026</small>
</li>
<li>
<a href="/routing-di-express-js/">Routing di Express.js: Panduan Lengkap dari Dasar hingga Route Parameter</a>
<small>20 August 2026</small>
</li>
<li>
<a href="/pengenalan-express-js-framework-nodejs/">Pengenalan Express.js: Framework Node.js yang Wajib Kamu Pelajari</a>
<small>19 August 2026</small>
</li>
</ul>
</section>
<section id="flyenv">
<h2>FlyEnv <span>(1)</span></h2>
<ul>
<li>
<a href="/tips-kelola-banyak-project-disatu-site-untuk-pengguna/">Sharing: 6 Bulan Pakai FlyEnv & Tips Kelola Banyak Project Disatu Site untuk Pengguna</a>
<small>23 August 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="git">
<h2>Git <span>(9)</span></h2>
<ul>
<li>
<a href="/git-stash-menyimpan-pekerjaan-sementara/">Git Stash: Menyimpan Pekerjaan Sementara Tanpa Commit</a>
<small>16 September 2026</small>
</li>
<li>
<a href="/git-rebase-panduan-lengkap/">Git Rebase: Panduan Lengkap dan Kapan Menggunakannya</a>
<small>15 September 2026</small>
</li>
<li>
<a href="/git-merge-dan-merge-conflict/">Git Merge dan Cara Menyelesaikan Merge Conflict</a>
<small>14 September 2026</small>
</li>
<li>
<a href="/git-branch-dasar-branching/">Git Branch: Memahami Branching dan Cara Kerjanya</a>
<small>13 September 2026</small>
</li>
<li>
<a href="/git-undo-membatalkan-perubahan/">Git Undo: Cara Membatalkan Perubahan, Amend Commit, dan Reset</a>
<small>12 September 2026</small>
</li>
<li>
<a href="/git-log-diff-melihat-histori/">Git Log dan Diff: Cara Membaca Histori dan Melihat Perubahan Kode</a>
<small>11 September 2026</small>
</li>
<li>
<a href="/git-init-add-commit-dasar/">Git Init, Add, dan Commit: Siklus Kerja Dasar Git</a>
<small>10 September 2026</small>
</li>
<li>
<a href="/instalasi-dan-konfigurasi-git/">Instalasi dan Konfigurasi Git di Windows, macOS, dan Linux</a>
<small>09 September 2026</small>
</li>
<li>
<a href="/pengenalan-git-version-control-system/">Pengenalan Git: Apa itu Version Control System dan Mengapa Wajib Dipelajari?</a>
<small>08 September 2026</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>(15)</span></h2>
<ul>
<li>
<a href="/cara-membuat-rss-feed-di-jekyll/">Cara Membuat RSS Feed di Jekyll dan Mengapa Kamu Masih Butuhnya</a>
<small>17 August 2026</small>
</li>
<li>
<a href="/markdown-cheatsheet-untuk-blogger-jekyll/">Markdown Cheatsheet Lengkap untuk Blogger Jekyll</a>
<small>14 August 2026</small>
</li>
<li>
<a href="/cara-membuat-search-di-jekyll-tanpa-plugin/">Cara Membuat Fitur Search di Jekyll Tanpa Plugin (Lunr.js)</a>
<small>13 August 2026</small>
</li>
<li>
<a href="/panduan-front-matter-jekyll/">Panduan Lengkap Front Matter Jekyll: Semua yang Perlu Kamu Tahu</a>
<small>12 August 2026</small>
</li>
<li>
<a href="/cara-membuat-dark-mode-di-blog-jekyll/">Cara Membuat Dark Mode di Blog Jekyll dengan CSS Variables</a>
<small>11 August 2026</small>
</li>
<li>
<a href="/menggunakan-google-analytics-di-jekyll/">Cara Menggunakan Google Analytics 4 di Blog Jekyll</a>
<small>10 August 2026</small>
</li>
<li>
<a href="/cara-menambahkan-komentar-disqus-di-jekyll/">Cara Menambahkan Komentar Disqus di Blog Jekyll</a>
<small>08 August 2026</small>
</li>
<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>(3)</span></h2>
<ul>
<li>
<a href="/mengoptimalkan-core-web-vitals-pada-blog-statis/">Mengoptimalkan Core Web Vitals pada Blog Statis Jekyll</a>
<small>16 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="/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="seo">
<h2>SEO <span>(3)</span></h2>
<ul>
<li>
<a href="/tips-menulis-artikel-blog-yang-seo-friendly/">Tips Menulis Artikel Blog yang SEO Friendly dan Enak Dibaca</a>
<small>18 August 2026</small>
</li>
<li>
<a href="/cara-membuat-sitemap-xml-di-jekyll/">Cara Membuat Sitemap XML di Jekyll dan Submit ke Google</a>
<small>09 August 2026</small>
</li>
<li>
<a href="/seo-on-page-untuk-blog-jekyll/">SEO On-Page untuk Blog Jekyll: Panduan Lengkap 2026</a>
<small>07 August 2026</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="sharing">
<h2>Sharing <span>(1)</span></h2>
<ul>
<li>
<a href="/tips-kelola-banyak-project-disatu-site-untuk-pengguna/">Sharing: 6 Bulan Pakai FlyEnv & Tips Kelola Banyak Project Disatu Site untuk Pengguna</a>
<small>23 August 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>(51)</span></h2>
<ul>
<li>
<a href="/git-stash-menyimpan-pekerjaan-sementara/">Git Stash: Menyimpan Pekerjaan Sementara Tanpa Commit</a>
<small>16 September 2026</small>
</li>
<li>
<a href="/git-rebase-panduan-lengkap/">Git Rebase: Panduan Lengkap dan Kapan Menggunakannya</a>
<small>15 September 2026</small>
</li>
<li>
<a href="/git-merge-dan-merge-conflict/">Git Merge dan Cara Menyelesaikan Merge Conflict</a>
<small>14 September 2026</small>
</li>
<li>
<a href="/git-branch-dasar-branching/">Git Branch: Memahami Branching dan Cara Kerjanya</a>
<small>13 September 2026</small>
</li>
<li>
<a href="/git-undo-membatalkan-perubahan/">Git Undo: Cara Membatalkan Perubahan, Amend Commit, dan Reset</a>
<small>12 September 2026</small>
</li>
<li>
<a href="/git-log-diff-melihat-histori/">Git Log dan Diff: Cara Membaca Histori dan Melihat Perubahan Kode</a>
<small>11 September 2026</small>
</li>
<li>
<a href="/git-init-add-commit-dasar/">Git Init, Add, dan Commit: Siklus Kerja Dasar Git</a>
<small>10 September 2026</small>
</li>
<li>
<a href="/instalasi-dan-konfigurasi-git/">Instalasi dan Konfigurasi Git di Windows, macOS, dan Linux</a>
<small>09 September 2026</small>
</li>
<li>
<a href="/pengenalan-git-version-control-system/">Pengenalan Git: Apa itu Version Control System dan Mengapa Wajib Dipelajari?</a>
<small>08 September 2026</small>
</li>
<li>
<a href="/docker-cicd-github-actions/">Docker dalam CI/CD Pipeline dengan GitHub Actions</a>
<small>07 September 2026</small>
</li>
<li>
<a href="/docker-dengan-database-postgresql-mysql/">Docker dengan Database: Mengelola PostgreSQL dan MySQL di Container</a>
<small>06 September 2026</small>
</li>
<li>
<a href="/docker-security-best-practices/">Docker Security: Best Practices Keamanan Container di Production</a>
<small>05 September 2026</small>
</li>
<li>
<a href="/docker-untuk-development-environment/">Docker untuk Development Environment: Setup Lokal yang Konsisten untuk Tim</a>
<small>04 September 2026</small>
</li>
<li>
<a href="/deploy-aplikasi-dengan-docker-di-server/">Deploy Aplikasi dengan Docker di Server Production</a>
<small>03 September 2026</small>
</li>
<li>
<a href="/docker-registry-push-pull-image/">Docker Registry: Cara Push dan Pull Image ke Docker Hub dan Private Registry</a>
<small>02 September 2026</small>
</li>
<li>
<a href="/docker-volume-dan-network/">Docker Volume dan Network: Data Persisten dan Komunikasi Antar Container</a>
<small>01 September 2026</small>
</li>
<li>
<a href="/docker-compose-multi-container/">Docker Compose: Mengelola Multi-Container dengan Mudah</a>
<small>31 August 2026</small>
</li>
<li>
<a href="/dockerfile-membuat-docker-image/">Dockerfile: Cara Membuat Docker Image Sendiri</a>
<small>30 August 2026</small>
</li>
<li>
<a href="/pengenalan-docker-container-untuk-developer/">Pengenalan Docker: Apa itu Container dan Mengapa Developer Harus Tahu?</a>
<small>29 August 2026</small>
</li>
<li>
<a href="/deploy-express-js-ke-production/">Deploy Express.js ke Production dengan PM2 dan Environment Variables</a>
<small>28 August 2026</small>
</li>
<li>
<a href="/upload-file-express-js-multer/">Upload File di Express.js dengan Multer</a>
<small>27 August 2026</small>
</li>
<li>
<a href="/error-handling-dan-validasi-express-js/">Error Handling dan Validasi Input di Express.js</a>
<small>26 August 2026</small>
</li>
<li>
<a href="/autentikasi-jwt-express-js/">Autentikasi JWT di Express.js: Login, Token, dan Proteksi Route</a>
<small>25 August 2026</small>
</li>
<li>
<a href="/koneksi-database-express-js-prisma/">Koneksi Database di Express.js dengan Prisma ORM</a>
<small>24 August 2026</small>
</li>
<li>
<a href="/membuat-restful-api-express-js/">Membuat RESTful API dengan Express.js: Panduan Lengkap</a>
<small>23 August 2026</small>
</li>
<li>
<a href="/request-dan-response-express-js/">Memahami Request dan Response di Express.js</a>
<small>22 August 2026</small>
</li>
<li>
<a href="/middleware-express-js/">Middleware Express.js: Konsep, Jenis, dan Cara Membuatnya</a>
<small>21 August 2026</small>
</li>
<li>
<a href="/routing-di-express-js/">Routing di Express.js: Panduan Lengkap dari Dasar hingga Route Parameter</a>
<small>20 August 2026</small>
</li>
<li>
<a href="/pengenalan-express-js-framework-nodejs/">Pengenalan Express.js: Framework Node.js yang Wajib Kamu Pelajari</a>
<small>19 August 2026</small>
</li>
<li>
<a href="/tips-menulis-artikel-blog-yang-seo-friendly/">Tips Menulis Artikel Blog yang SEO Friendly dan Enak Dibaca</a>
<small>18 August 2026</small>
</li>
<li>
<a href="/cara-membuat-rss-feed-di-jekyll/">Cara Membuat RSS Feed di Jekyll dan Mengapa Kamu Masih Butuhnya</a>
<small>17 August 2026</small>
</li>
<li>
<a href="/mengoptimalkan-core-web-vitals-pada-blog-statis/">Mengoptimalkan Core Web Vitals pada Blog Statis Jekyll</a>
<small>16 August 2026</small>
</li>
<li>
<a href="/cara-setup-jekyll-dengan-docker/">Cara Setup Jekyll dengan Docker: Local Development Tanpa Install Ruby</a>
<small>15 August 2026</small>
</li>
<li>
<a href="/markdown-cheatsheet-untuk-blogger-jekyll/">Markdown Cheatsheet Lengkap untuk Blogger Jekyll</a>
<small>14 August 2026</small>
</li>
<li>
<a href="/cara-membuat-search-di-jekyll-tanpa-plugin/">Cara Membuat Fitur Search di Jekyll Tanpa Plugin (Lunr.js)</a>
<small>13 August 2026</small>
</li>
<li>
<a href="/panduan-front-matter-jekyll/">Panduan Lengkap Front Matter Jekyll: Semua yang Perlu Kamu Tahu</a>
<small>12 August 2026</small>
</li>
<li>
<a href="/cara-membuat-dark-mode-di-blog-jekyll/">Cara Membuat Dark Mode di Blog Jekyll dengan CSS Variables</a>
<small>11 August 2026</small>
</li>
<li>
<a href="/menggunakan-google-analytics-di-jekyll/">Cara Menggunakan Google Analytics 4 di Blog Jekyll</a>
<small>10 August 2026</small>
</li>
<li>
<a href="/cara-membuat-sitemap-xml-di-jekyll/">Cara Membuat Sitemap XML di Jekyll dan Submit ke Google</a>
<small>09 August 2026</small>
</li>
<li>
<a href="/cara-menambahkan-komentar-disqus-di-jekyll/">Cara Menambahkan Komentar Disqus di Blog Jekyll</a>
<small>08 August 2026</small>
</li>
<li>
<a href="/seo-on-page-untuk-blog-jekyll/">SEO On-Page untuk Blog Jekyll: Panduan Lengkap 2026</a>
<small>07 August 2026</small>
</li>
<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.