Cara Deploy Jekyll ke GitHub Pages: Gratis dan Otomatis

Salah satu keunggulan terbesar Jekyll dibanding SSG lainnya adalah integrasinya yang sangat mulus dengan GitHub Pages. Kamu bisa deploy blog Jekyll secara gratis, dengan domain otomatis username.github.io, dan setiap kali push ke repository blog langsung ter-update secara otomatis tanpa perlu konfigurasi server apa pun.

Di artikel ini kita bahas dua cara deploy: cara klasik langsung dari branch, dan cara modern via GitHub Actions.

Prasyarat

Sebelum mulai, pastikan kamu sudah punya:

Akun GitHub (gratis di github.com)
Project Jekyll yang sudah berjalan di lokal
Git terinstal di komputer

Cara 1: Deploy Langsung dari Branch (Cara Klasik)

Ini adalah cara paling sederhana, cocok untuk project Jekyll yang tidak menggunakan plugin khusus.

Langkah 1: Buat Repository di GitHub

Login ke GitHub, klik tombol New untuk membuat repository baru
Beri nama repository: username.github.io (ganti username dengan username GitHub kamu)
Set visibility ke Public
Klik Create repository

Nama username.github.io khusus untuk user/organization site. Untuk project site, nama repo bisa bebas dan URL-nya akan jadi username.github.io/nama-repo.

Langkah 2: Push Project Jekyll ke GitHub

Di folder project Jekyll lokal kamu:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main

Langkah 3: Aktifkan GitHub Pages

Buka repository di GitHub
Klik tab Settings
Di menu kiri, klik Pages
Di bagian Source, pilih branch main dan folder / (root)
Klik Save

Dalam beberapa menit, situs kamu akan live di https://username.github.io.

Cara 2: Deploy via GitHub Actions (Cara Modern)

Cara ini lebih fleksibel — mendukung plugin Jekyll apapun, bisa kustomisasi versi Ruby, dan build process bisa dikontrol penuh.

Langkah 1: Buat File Workflow

Buat file .github/workflows/jekyll.yml di root project kamu:

name: Deploy Jekyll to 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
        id: pages
        uses: actions/configure-pages@v5

      - name: Build with Jekyll
        run: bundle exec jekyll build --baseurl "$"
        env:
          JEKYLL_ENV: production

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

  deploy:
    environment:
      name: github-pages
      url: $
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Langkah 2: Konfigurasi GitHub Pages Source

Buka Settings → Pages di repository
Di bagian Source, pilih GitHub Actions (bukan branch)
Simpan pengaturan

Langkah 3: Push dan Tunggu

Commit dan push file workflow ke GitHub:

git add .github/workflows/jekyll.yml
git commit -m "add GitHub Actions workflow"
git push

Buka tab Actions di repository untuk melihat progress build. Setelah hijau, situs kamu sudah live!

Konfigurasi `_config.yml` untuk GitHub Pages

Pastikan _config.yml kamu sudah dikonfigurasi dengan benar:

url: "https://username.github.io"
baseurl: ""  # kosongkan jika repo bernama username.github.io
             # isi "/nama-repo" jika ini project site

Custom Domain (Opsional)

Jika kamu ingin menggunakan domain sendiri (misalnya blog.kamu.com):

Buat file CNAME di root project berisi nama domain kamu:
```
blog.kamu.com
```
Di Settings → Pages, isi field Custom domain
Di DNS provider kamu, tambahkan CNAME record:
- Name: blog
- Value: username.github.io

Troubleshooting Umum

Build gagal karena plugin tidak didukung: GitHub Pages hanya mendukung plugin tertentu dalam mode klasik. Gunakan GitHub Actions untuk mendukung semua plugin.

Situs tidak update setelah push: Cek tab Actions, pastikan workflow berjalan tanpa error. Bisa juga karena cache browser — coba hard refresh (Ctrl+Shift+R).

CSS/JS tidak termuat (tampilan berantakan): Cek pengaturan baseurl di _config.yml. Ini penyebab paling umum tampilan rusak di project site.

Kesimpulan

Deploy Jekyll ke GitHub Pages sangat mudah dan gratis. Untuk project sederhana, cara klasik via branch sudah lebih dari cukup. Untuk yang butuh fleksibilitas penuh dengan semua plugin, GitHub Actions adalah pilihan yang tepat.

Dengan setup ini, setiap kali kamu git push, blog kamu otomatis ter-deploy. Tidak perlu FTP, tidak perlu cPanel, tidak perlu biaya hosting.