Cara Membuat Website dengan Jekyll: Static Site Generator Populer

Apa Itu Jekyll dan Mengapa Populer?

Jekyll adalah static site generator open-source yang ditulis dalam bahasa Ruby. Dibuat oleh Tom Preston-Werner - salah satu co-founder GitHub - pada tahun 2008, Jekyll menjadi populer karena integrasi langsungnya dengan GitHub Pages: setiap repository GitHub bisa otomatis menjadi website menggunakan Jekyll, secara gratis.

Filosofi Jekyll sederhana: ubah teks Markdown menjadi website statis yang cepat, aman, dan mudah dikelola. Tidak ada database, tidak ada CMS yang berat, tidak ada plugin keamanan yang perlu diperbarui setiap minggu. Cukup tulis konten dalam Markdown, pilih tema, dan website Anda siap.

Keunggulan Jekyll

• Integrasi GitHub Pages - Push ke GitHub dan website langsung online. Tidak perlu setup server sama sekali.
• Ekosistem tema luas - Ratusan tema gratis tersedia di jekyllthemes.io dan GitHub.
• Komunitas besar - Sebagai salah satu SSG tertua, Jekyll memiliki dokumentasi, tutorial, dan komunitas yang sangat matang.
• Konten dalam Markdown - Format penulisan yang sederhana, dapat dibaca manusia, dan mudah di-version control.
• Liquid templating - Bahasa template Liquid yang kuat dan mudah dipelajari untuk mengkustomisasi layout.
• Plugin dan gem - Ekosistem plugin Ruby yang kaya untuk menambah fungsionalitas.

Siapa yang Cocok Menggunakan Jekyll?

Jekyll sangat cocok untuk:

cara membuat website dengan jekyll" width="800" height="600" loading="lazy" style="width:100%;height:auto;border:4px solid black;box-shadow:6px 6px 0px black;" />

• Developer yang familiar dengan Ruby dan ekosistem GitHub
• Blogger teknis yang ingin menulis konten dalam Markdown dan menyimpannya di GitHub
• Pemilik website personal yang ingin hosting gratis via GitHub Pages
• Tim yang berkolaborasi pada konten melalui Git pull request
• Siapa saja yang ingin website statis sederhana tanpa biaya server

Persyaratan Sistem

Jekyll membutuhkan beberapa software yang sudah terinstal sebelum Anda bisa menggunakannya:

• Ruby versi 2.5.0 atau lebih baru (termasuk Ruby DevKit di Windows)
• RubyGems - package manager Ruby (biasanya sudah terinstal bersama Ruby)
• GCC dan Make - dibutuhkan untuk mengkompilasi beberapa gem native
• Git - untuk manajemen versi dan deploy ke GitHub Pages

Langkah 1: Instalasi Ruby dan Jekyll

Instalasi di Windows

Di Windows, cara termudah adalah menggunakan RubyInstaller:

1. Unduh RubyInstaller dengan DevKit dari rubyinstaller.org. Pilih versi yang bertanda (WITH DEVKIT).
2. Jalankan installer dan ikuti petunjuk. Centang opsi "Add Ruby executables to your PATH".
3. Setelah instalasi, jalankan ridk install di Command Prompt dan pilih opsi 3 (MSYS2 and MINGW development toolchain).
4. Buka Command Prompt baru, lalu instal Jekyll:

gem install jekyll bundler

# Verifikasi instalasi
jekyll -v

Instalasi di macOS

macOS sudah hadir dengan Ruby, namun disarankan menggunakan Ruby versi terbaru via rbenv atau Homebrew:

# Install rbenv dan ruby-build
brew install rbenv ruby-build

# Install Ruby versi terbaru
rbenv install 3.3.0
rbenv global 3.3.0

# Tambahkan rbenv ke shell profile
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc

# Install Jekyll
gem install jekyll bundler

# Verifikasi
jekyll -v

Instalasi di Linux (Ubuntu/Debian)

# Install dependensi
sudo apt-get install ruby-full build-essential zlib1g-dev

# Konfigurasi gem path (hindari install sebagai root)
echo '# Install Ruby Gems ke ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

# Install Jekyll
gem install jekyll bundler

# Verifikasi
jekyll -v

Langkah 2: Membuat Proyek Jekyll Baru

Setelah Jekyll terinstal, buat proyek website baru:

# Buat proyek Jekyll baru
jekyll new blog-saya

# Masuk ke folder proyek
cd blog-saya

# Lihat struktur folder
ls -la

Jekyll akan membuat struktur folder berikut:

blog-saya/
├── _posts/              # Folder untuk artikel blog
│   └── 2026-05-27-welcome-to-jekyll.md
├── _config.yml          # File konfigurasi utama
├── .gitignore
├── 404.html
├── about.markdown        # Halaman "Tentang"
├── Gemfile              # Daftar dependensi Ruby
├── Gemfile.lock
└── index.markdown        # Halaman beranda

Install dependensi yang diperlukan dengan Bundler:

bundle install

Langkah 3: Konfigurasi Jekyll

File _config.yml adalah pusat konfigurasi website Jekyll Anda. Buka dan sesuaikan dengan informasi website Anda:

# File: _config.yml

# Informasi website
title: Blog Saya
email: email@contoh.com
description: >-
  Blog tentang teknologi, web development, dan tutorial
  yang ditulis dalam Bahasa Indonesia.
baseurl: ""  # Kosongkan jika website di root domain
url: "https://namadomain-anda.com"

# Profil penulis
author:
  name: "Nama Anda"
  email: "email@contoh.com"

# Build settings
theme: minima          # Tema default Jekyll
plugins:
  - jekyll-feed         # RSS feed otomatis
  - jekyll-seo-tag      # Meta tag SEO otomatis
  - jekyll-sitemap      # Sitemap.xml otomatis

# Permalink structure (penting untuk SEO)
permalink: /:categories/:year/:month/:day/:title/

# Exclude dari build
exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - vendor/bundle/

Plugin jekyll-seo-tag dan jekyll-sitemap sangat direkomendasikan untuk SEO. Tambahkan keduanya di Gemfile jika belum ada:

# Gemfile
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-feed"

Langkah 4: Menjalankan Server Lokal

# Jalankan server development
bundle exec jekyll serve

# Atau dengan live reload (otomatis refresh browser saat ada perubahan)
bundle exec jekyll serve --livereload

# Termasuk draft
bundle exec jekyll serve --drafts

Buka browser dan akses http://localhost:4000. Anda akan melihat website Jekyll Anda berjalan!

Langkah 5: Membuat Artikel Blog Pertama

Di Jekyll, artikel blog disimpan di folder _posts/ dengan format nama file yang spesifik: TAHUN-BULAN-TANGGAL-judul-artikel.md

Buat file baru: _posts/2026-05-27-artikel-pertama-saya.md

---
layout: post
title: "Judul Artikel Pertama Saya"
date: 2026-05-27 10:00:00 +0700
categories: [tutorial, web]
tags: [jekyll, static site, blog]
author: "Nama Anda"
description: "Deskripsi singkat artikel ini untuk SEO dan preview."
---

## Pembukaan

Selamat datang di artikel pertama saya! Di sini saya akan membahas...

## Isi Artikel

Anda bisa menulis konten dalam format **Markdown**.

- Item pertama
- Item kedua
- Item ketiga

### Sub-bagian

Kode bisa ditampilkan dengan syntax highlighting:

```ruby
def halo_dunia
  puts "Halo, Dunia dari Jekyll!"
end
```

## Penutup

Terima kasih sudah membaca artikel ini.

Front Matter Jekyll: Parameter Penting

Langkah 6: Menggunakan Draft

Jekyll mendukung "draft" - artikel yang belum siap dipublikasikan. Simpan draft di folder _drafts/ (tanpa tanggal di nama file):

_drafts/
└── ide-artikel-baru.md

# Preview draft saat development
bundle exec jekyll serve --drafts

# Draft tidak akan muncul saat build production:
bundle exec jekyll build

Langkah 7: Kustomisasi Tema dan Layout

Jekyll menggunakan Liquid templating language untuk membuat layout dinamis. Anda bisa mengkustomisasi tema dengan membuat file di folder _layouts/ dan _includes/.

Override Tema Default

Untuk mengkustomisasi tema tanpa mengubah gem tema (yang akan hilang saat update), copy file yang ingin diubah dari folder gem ke folder proyek Anda:

# Cari lokasi file tema
bundle info --path minima

# Contoh: copy layout post
cp $(bundle info --path minima)/_layouts/post.html _layouts/post.html

Contoh Layout Kustom (_layouts/post.html)

---
layout: default
---
<article class="post h-entry">
  <header class="post-header">
    <h1 class="post-title p-name">{{ page.title | escape }}</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">
        {{ page.date | date: "%d %B %Y" }}
      </time>
      {%- if page.author -%}
        • <span itemprop="author">{{ page.author }}</span>
      {%- endif -%}
    </p>
    {%- if page.description -%}
    <p class="post-description">{{ page.description }}</p>
    {%- endif -%}
    <div class="post-tags">
      {%- for tag in page.tags -%}
        <span class="tag">{{ tag }}</span>
      {%- endfor -%}
    </div>
  </header>

  <div class="post-content e-content">
    {{ content }}
  </div>
</article>

Includes - Komponen yang Dapat Digunakan Ulang

{{/* Simpan di _includes/related-posts.html */}}
<section class="related-posts">
  <h3>Artikel Terkait</h3>
  <ul>
    {% assign related = site.posts | where_exp: "post", "post.url != page.url" | limit: 3 %}
    {% for post in related %}
      <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
        <span>{{ post.date | date: "%d %B %Y" }}</span>
      </li>
    {% endfor %}
  </ul>
</section>

{{/* Gunakan di layout dengan: */}}
{% include related-posts.html %}

Langkah 8: Halaman Statis dan Koleksi

Selain blog posts, Jekyll mendukung halaman statis dan koleksi kustom. Buat halaman about.md atau folder koleksi untuk jenis konten khusus:

---
layout: page
title: "Tentang Saya"
permalink: /tentang/
---

## Halo, Nama Saya [Nama Anda]

Saya adalah [deskripsi singkat]. Website ini saya buat untuk...

## Kontak

- Email: email@contoh.com
- GitHub: github.com/username

Koleksi Kustom (untuk Portofolio, Produk, dll.)

# _config.yml - definisikan koleksi
collections:
  portofolio:
    output: true
    permalink: /portofolio/:name/

# Buat folder _portofolio/ dan isi dengan file Markdown
# _portofolio/project-pertama.md

Langkah 9: Build dan Deploy ke GitHub Pages

Jekyll sangat terintegrasi dengan GitHub Pages. Berikut cara deploy ke GitHub Pages secara otomatis:

Setup GitHub Pages dengan GitHub Actions

Buat file .github/workflows/jekyll.yml:

name: Deploy Jekyll ke GitHub Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.3'
          bundler-cache: true

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Build dengan Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy ke GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Aktifkan GitHub Pages di Repository Settings

1. Buka repository GitHub Anda
2. Masuk ke Settings → Pages
3. Di bagian Source, pilih GitHub Actions
4. Push ke branch main - GitHub Actions akan otomatis build dan deploy
5. Website Anda akan tersedia di https://username.github.io/nama-repo/

Deploy ke Shared Hosting

Untuk deploy ke shared hosting seperti HostingEkspres:

# Build website
bundle exec jekyll build

# Hasil build ada di folder _site/
# Upload isi _site/ ke public_html via cPanel File Manager atau FTP

Tips SEO untuk Jekyll

1. Plugin jekyll-seo-tag

Plugin ini otomatis membuat meta tag SEO yang penting. Tambahkan tag berikut di layout default.html Anda:

<head>
  <!-- ... -->
  {% seo %}
</head>

Plugin ini akan otomatis membuat: <title>, meta description, Open Graph tags, Twitter Card tags, dan JSON-LD schema untuk artikel.

2. Sitemap Otomatis dengan jekyll-sitemap

# Setelah menambahkan jekyll-sitemap ke _config.yml dan Gemfile,
# sitemap.xml otomatis tersedia di:
# https://namadomain-anda.com/sitemap.xml

3. RSS Feed Otomatis

<head>
  <!-- jekyll-feed otomatis membuat feed.xml dan menambahkan link ini -->
  {% feed_meta %}
</head>

4. Canonical URL

<!-- Di layout default.html -->
<link rel="canonical" href="{{ page.url | absolute_url }}">

Kesimpulan

Jekyll adalah static site generator yang matang, populer, dan memiliki ekosistem yang sangat kaya. Integrasi seamless-nya dengan GitHub Pages menjadikan Jekyll pilihan ideal bagi developer yang ingin website gratis dengan workflow berbasis Git yang sudah familiar.

Meskipun build time Jekyll lebih lambat dari Hugo untuk website besar, untuk blog dan website sederhana perbedaannya tidak signifikan. Yang paling penting: website statis hasil Jekyll sangat cepat, aman, dan memiliki skor Core Web Vitals yang baik untuk SEO.

Jika Anda membutuhkan hosting yang handal untuk men-deploy website Jekyll Anda - selain GitHub Pages gratis - HostingEkspres menyediakan paket shared hosting dengan performa tinggi dan cPanel yang mudah digunakan, sempurna untuk website statis maupun dinamis.

FAQ - Pertanyaan Umum tentang Jekyll

Apa itu Jekyll dan bedanya dengan WordPress?

Jekyll adalah static site generator yang mengubah file Markdown menjadi HTML statis saat build time. WordPress menghasilkan halaman secara dinamis setiap permintaan menggunakan PHP dan database MySQL. Website Jekyll lebih cepat, lebih aman, dan tidak membutuhkan database - tapi tidak memiliki admin panel visual seperti WordPress.

Apakah Jekyll gratis?

Ya, Jekyll sepenuhnya gratis dan open-source. Anda bahkan bisa meng-host website Jekyll secara gratis di GitHub Pages - layanan hosting statis gratis yang terintegrasi langsung dengan Jekyll. Ini menjadikan Jekyll + GitHub Pages salah satu cara paling ekonomis membangun website profesional.

Bagaimana cara menulis konten di Jekyll?

Konten ditulis dalam format Markdown dan disimpan sebagai file .md di folder _posts/ dengan nama format TAHUN-BULAN-TANGGAL-judul.md. Metadata seperti judul, tanggal, dan kategori ditentukan di "front matter" YAML di bagian atas setiap file.

Apakah Jekyll cocok untuk pemula?

Jekyll cocok untuk pengguna yang sudah familiar dengan command line dan Markdown. Kurva belajarnya sedang - lebih mudah dari Gatsby atau React-based SSG, tetapi lebih teknis dari platform blogging visual seperti WordPress. Dengan panduan yang tepat, pemula yang tekun bisa mulai menggunakan Jekyll dalam satu hari.

Apa perbedaan Jekyll dan Hugo?

Perbedaan utama: Hugo jauh lebih cepat dalam build time karena ditulis dalam Go, sementara Jekyll lebih mudah terintegrasi dengan GitHub Pages secara native. Jekyll berbasis Ruby (butuh instalasi Ruby), Hugo berupa satu binary yang mudah diinstal. Keduanya sama-sama baik - pilihan tergantung workflow dan preferensi Anda.

Bisakah Jekyll digunakan untuk website selain blog?

Tentu! Jekyll sangat fleksibel untuk website company profile, portofolio, dokumentasi, landing page, dan lainnya. Fitur "koleksi" Jekyll memungkinkan Anda mendefinisikan jenis konten kustom di luar posts biasa, misalnya untuk portofolio proyek atau katalog produk.

Bagaimana cara mengoptimalkan website Jekyll untuk SEO?

Gunakan plugin jekyll-seo-tag untuk meta tag otomatis, jekyll-sitemap untuk sitemap.xml, dan jekyll-feed untuk RSS. Set permalink yang deskriptif di _config.yml dan isi front matter title serta description di setiap halaman. Website statis Jekyll secara inheren cepat, yang meningkatkan skor Core Web Vitals dan peringkat di Google.