Cara Membuat Website Statis dengan Jekyll dan GitHub Pages

Di era digital saat ini, memiliki website menjadi kebutuhan bagi banyak orang, baik untuk keperluan pribadi, bisnis, maupun proyek open-source. Salah satu pilihan terbaik untuk membuat website yang ringan, cepat, dan mudah dikelola adalah menggunakan website statis.

Apa Itu Website Statis dan Apa Manfaatnya?

Website statis adalah situs yang tidak memerlukan database atau backend dinamis untuk menampilkan kontennya. Semua halaman telah dibuat sebelumnya dalam bentuk file HTML, CSS, dan JavaScript yang langsung dikirimkan ke pengguna tanpa perlu diproses oleh server.

Manfaat menggunakan website statis antara lain:

Performa lebih cepat – Karena tidak ada proses pengambilan data dari database, website statis lebih ringan dan cepat diakses.
Lebih aman – Tanpa database dan backend dinamis, risiko terkena serangan seperti SQL injection berkurang drastis.
Mudah dikelola – Cukup dengan menulis konten dalam format sederhana seperti Markdown, website bisa diperbarui tanpa perlu konfigurasi rumit.
Hemat biaya – Karena tidak memerlukan server yang kompleks, website statis bisa dihosting secara gratis atau dengan biaya rendah.

Mengapa Memilih Jekyll dan GitHub Pages untuk Hosting Website?

Jika kamu ingin membuat website statis dengan cara yang sederhana, Jekyll dan GitHub Pages adalah kombinasi yang tepat. Jekyll adalah generator website statis yang memungkinkan kita membuat dan mengelola situs menggunakan Markdown dan template sederhana.

Sementara itu, GitHub Pages adalah layanan hosting gratis dari GitHub yang dapat digunakan untuk menyimpan dan menampilkan website berbasis Jekyll.

Beberapa alasan mengapa memilih Jekyll dan GitHub Pages:

Integrasi langsung dengan GitHub – Setiap perubahan yang dilakukan pada repositori GitHub dapat langsung memperbarui website secara otomatis.
Hosting gratis – Tidak perlu mengeluarkan biaya tambahan untuk menyimpan website.
Dukungan Markdown – Mempermudah pembuatan dan pengelolaan konten tanpa harus menulis kode HTML secara manual.
Cocok untuk blog dan dokumentasi – Jekyll sering digunakan oleh developer dan komunitas open-source untuk membuat dokumentasi dan blog pribadi.

Keunggulan Jekyll Dibanding CMS Lain

Banyak orang mungkin lebih familiar dengan CMS seperti WordPress atau Joomla. Namun, Jekyll memiliki beberapa keunggulan dibandingkan dengan platform tersebut, terutama untuk proyek yang tidak memerlukan fitur dinamis.

Keunggulan Jekyll antara lain:

Tanpa database – Semua konten disimpan dalam file teks, sehingga lebih sederhana dan cepat.
Lebih ringan dan cepat – Tidak ada query database yang memperlambat loading website.
Lebih fleksibel – Bisa diintegrasikan dengan berbagai tema dan plugin untuk menyesuaikan tampilan serta fungsionalitas.
Ramah terhadap SEO – Struktur website yang bersih dan ringan membantu meningkatkan peringkat di mesin pencari.

Dengan berbagai keunggulan tersebut, Jekyll dan GitHub Pages menjadi pilihan ideal bagi siapa saja yang ingin membuat website statis dengan mudah dan efisien. Di bagian selanjutnya, kita akan membahas lebih dalam tentang Jekyll dan cara kerjanya dalam membangun website statis.

Cara Membuat Website Statis dengan Jekyll dan GitHub Pages

Apa Itu Jekyll?

Definisi Jekyll sebagai Static Site Generator

Jekyll adalah static site generator berbasis Ruby yang digunakan untuk membuat website statis secara otomatis. Dengan Jekyll, kita bisa mengubah file teks biasa yang ditulis dalam Markdown atau HTML menjadi website yang siap dihosting.

Jekyll sering digunakan oleh developer, blogger, dan komunitas open-source untuk membuat blog, dokumentasi proyek, hingga portofolio pribadi tanpa perlu menggunakan database atau backend.

Cara Kerja Jekyll dalam Mengubah Markdown Menjadi HTML

Jekyll bekerja dengan konsep sederhana:

Konten ditulis dalam Markdown atau HTML – Alih-alih menggunakan database, Jekyll menggunakan file teks biasa untuk menyimpan artikel dan halaman website.
Template dan Layout digunakan untuk merancang tampilan – Jekyll memungkinkan kita menggunakan Liquid, bahasa template yang fleksibel untuk mengatur struktur halaman.
Menghasilkan file HTML statis – Dengan perintah jekyll build, semua konten akan dikompilasi menjadi halaman HTML yang siap dipublikasikan.
Menjalankan server lokal – Perintah jekyll serve memungkinkan kita melihat hasilnya sebelum dipublikasikan.

Dengan pendekatan ini, Jekyll membuat pembuatan dan pengelolaan website menjadi lebih mudah, terutama bagi mereka yang terbiasa dengan Markdown dan Git.

Penggunaan Jekyll untuk Blog dan Dokumentasi

Jekyll sangat populer di kalangan developer dan penulis karena kemudahannya dalam mengelola blog dan dokumentasi proyek. Beberapa contoh penggunaan Jekyll antara lain:

Membuat blog pribadi – Jekyll mendukung sistem postingan berbasis tanggal seperti pada platform blogging tradisional.
Dokumentasi proyek open-source – Banyak proyek open-source menggunakan Jekyll untuk mendokumentasikan cara kerja aplikasi mereka.
Website portofolio – Jekyll memungkinkan pembuatan portofolio sederhana dengan desain yang fleksibel.
Company profile atau landing page – Bisnis kecil dan startup sering menggunakan Jekyll untuk membuat website informatif yang ringan dan cepat.

Dengan segala fleksibilitasnya, Jekyll menjadi pilihan tepat bagi siapa saja yang ingin membangun website tanpa kerumitan CMS tradisional.

Persiapan Sebelum Membuat Website dengan Jekyll

Sebelum mulai membuat website menggunakan Jekyll, kita perlu melakukan beberapa persiapan, seperti menginstal dependencies yang dibutuhkan dan mengatur lingkungan kerja.

Instalasi Jekyll di Windows, Linux, atau Mac

Jekyll dibangun menggunakan Ruby, sehingga sebelum menginstalnya, kita perlu memastikan bahwa Ruby telah terpasang di sistem.

1. Instalasi di Windows

Di Windows, kita bisa menginstal Jekyll menggunakan RubyInstaller:

Unduh dan instal RubyInstaller.
Setelah instalasi, buka terminal (Command Prompt atau PowerShell) dan jalankan:
```
gem install jekyll bundler
```

2. Instalasi di Linux (Ubuntu/Debian)

Di Linux, Jekyll bisa diinstal menggunakan package manager:

sudo apt update && sudo apt install ruby-full build-essential zlib1g-dev

Setelah itu, tambahkan konfigurasi berikut ke ~/.bashrc atau ~/.zshrc:

export GEM_HOME="$HOME/gems"
export PATH="$HOME/gems/bin:$PATH"

Lalu, jalankan perintah berikut untuk menginstal Jekyll:

gem install jekyll bundler

3. Instalasi di Mac

Jika menggunakan macOS, kita bisa menginstal Jekyll melalui Homebrew:

brew install ruby

Kemudian tambahkan Ruby ke dalam path:

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Setelah itu, instal Jekyll dan Bundler:

gem install jekyll bundler

Mengatur Ruby dan Bundler sebagai Dependencies

Setelah Jekyll terinstal, kita perlu mengatur Bundler untuk mengelola dependencies proyek Jekyll.

Periksa versi Ruby dan Jekyll untuk memastikan instalasi berhasil:
```
ruby -v
jekyll -v
```
Gunakan Bundler untuk mengatur dependencies dalam proyek:
```
bundle install
```
Perintah ini akan menginstal semua dependencies yang dibutuhkan untuk proyek Jekyll.

Membuat Project Baru dengan Perintah `jekyll new`

Setelah semua persiapan selesai, kita bisa langsung membuat website baru dengan Jekyll.

Jalankan perintah berikut untuk membuat proyek baru:
```
jekyll new nama-proyek
```
Perintah ini akan membuat folder proyek dengan struktur file standar Jekyll.
Masuk ke dalam direktori proyek yang baru dibuat:
```
cd nama-proyek
```
Jalankan server Jekyll secara lokal untuk melihat hasilnya:
```
bundle exec jekyll serve
```
Setelah server berjalan, kita bisa membuka website di http://localhost:4000/.

Sekarang kita sudah siap untuk mulai mengembangkan website dengan Jekyll! Selanjutnya, kita akan membahas bagaimana struktur proyek dalam Jekyll dan cara mengelola kontennya.

Membuat Website Statis dengan Jekyll

Setelah melakukan instalasi dan konfigurasi, sekarang kita akan mulai membangun website statis menggunakan Jekyll. Pada tahap ini, kita akan memahami struktur folder dalam proyek Jekyll, menjalankan server lokal, dan mengedit konten menggunakan Markdown.

Struktur Folder dalam Proyek Jekyll

Saat kita membuat proyek baru dengan perintah jekyll new nama-proyek, Jekyll akan menghasilkan beberapa folder dan file secara otomatis. Berikut adalah struktur dasar proyek Jekyll:

/nama-proyek
│── _config.yml        # File konfigurasi utama Jekyll
│── _posts/            # Folder untuk menyimpan postingan blog (format Markdown)
│── _layouts/          # Template tata letak halaman
│── _includes/         # Potongan kode yang bisa digunakan ulang
│── _site/             # Folder hasil build website (jangan diedit langsung)
│── assets/            # Folder untuk file statis seperti CSS, JS, dan gambar
│── index.md           # Halaman utama website

_config.yml – File ini berisi pengaturan utama website seperti nama, deskripsi, dan konfigurasi lainnya.
_posts/ – Tempat menyimpan artikel blog dalam format Markdown dengan format nama file YYYY-MM-DD-nama-post.md.
_layouts/ – Template tata letak halaman seperti default.html untuk mendefinisikan tampilan utama.
_includes/ – Berisi potongan kode yang dapat digunakan kembali dalam berbagai halaman.
_site/ – Folder ini adalah hasil akhir dari proses build Jekyll. Semua file HTML yang dihasilkan akan ada di sini.
assets/ – Folder untuk menyimpan file statis seperti gambar, CSS, dan JavaScript.
index.md – Halaman utama website yang dapat diisi dengan konten Markdown.

Menjalankan Server Lokal dengan `jekyll serve`

Setelah memahami struktur folder, kita bisa menjalankan website secara lokal untuk melihat hasilnya sebelum dipublikasikan. Gunakan perintah berikut:

bundle exec jekyll serve

Perintah ini akan:

Membangun ulang seluruh website berdasarkan file yang ada di dalam proyek.
Menjalankan server lokal di http://localhost:4000/.
Memantau perubahan secara otomatis, sehingga setiap kali kita mengedit file, website akan diperbarui secara langsung.

Mengedit Konten Menggunakan Markdown di Jekyll

Jekyll menggunakan Markdown untuk mengelola konten, terutama dalam pembuatan halaman dan postingan blog.

1. Membuat Postingan Baru

Untuk menambahkan artikel blog, kita bisa membuat file baru di dalam folder _posts/ dengan format nama:

_posts/2025-03-29-contoh-post.md

Isi file tersebut:

---
layout: post
title: "Judul Artikel Pertama"
date: 2025-03-29 10:00:00 +0700
categories: blog
---

Ini adalah contoh artikel pertama yang ditulis dalam **Markdown**.

## Subjudul dalam Artikel
Kita bisa menambahkan berbagai elemen Markdown seperti:

- **Teks Tebal**
- *Teks Miring*
- [Tautan ke halaman lain](https://example.com)
- Gambar:
  ![Alt Text](https://example.com/image.jpg)

Kode di atas akan secara otomatis dikonversi menjadi HTML saat Jekyll membangun website.

#### 2. Mengedit Halaman Statis
Selain postingan blog, kita juga bisa mengedit halaman statis seperti `index.md`.
Misalnya, untuk mengubah halaman utama:
```md
---
layout: default
title: Beranda
---

# Selamat Datang di Website Saya

Ini adalah halaman utama yang dibuat menggunakan **Jekyll**.

Setelah menyimpan perubahan, kita bisa melihat hasilnya dengan membuka http://localhost:4000/ di browser.

Dengan mengikuti langkah-langkah di atas, kita telah berhasil membuat website statis dengan Jekyll.

Menghosting Website Jekyll di GitHub Pages

Setelah membuat website statis dengan Jekyll, langkah berikutnya adalah menghostingnya di GitHub Pages. GitHub Pages adalah layanan hosting gratis dari GitHub yang memungkinkan kita untuk menyajikan website langsung dari repository GitHub.

Membuat Repository GitHub dan Menghubungkannya dengan Jekyll

Agar website dapat dihosting di GitHub Pages, kita perlu membuat repository GitHub dan mengunggah kode proyek Jekyll ke dalamnya.

Buat repository baru
- Masuk ke GitHub dan login.
- Klik tombol New Repository.
- Beri nama repository sesuai keinginan (misalnya: my-jekyll-site).
- Pilih Public agar bisa diakses semua orang.
- Jangan centang “Initialize this repository with a README”.
- Klik Create repository.
Hubungkan repository dengan proyek Jekyll Buka terminal, masuk ke direktori proyek Jekyll, lalu jalankan perintah berikut:
```
git init
git add .
git commit -m "Inisialisasi proyek Jekyll"
git branch -M main
git remote add origin https://github.com/username/my-jekyll-site.git
git push -u origin main
```
Gantilah username dengan nama akun GitHub Anda dan my-jekyll-site.git dengan nama repository yang telah dibuat.

Push Kode ke GitHub Pages untuk Hosting Gratis

Setelah repository dikonfigurasi, kita bisa mengunggah perubahan ke GitHub setiap kali ada pembaruan.

Tambahkan file baru atau lakukan perubahan pada proyek.
Jalankan perintah berikut untuk mengunggah perubahan:

git add . git commit -m "Update website Jekyll" git push origin main

Mengaktifkan Fitur GitHub Pages untuk Website Jekyll

Setelah kode ada di GitHub, kita perlu mengaktifkan fitur GitHub Pages agar website bisa diakses secara publik.

Buka repository di GitHub.
Masuk ke tab Settings > Pages.
Pada bagian Branch, pilih main sebagai sumber dan folder / (root).
Klik Save.
Tunggu beberapa menit, lalu akses website di https://username.github.io/my-jekyll-site/.

Website Jekyll Anda kini sudah online di GitHub Pages! Jika ada perubahan pada proyek, cukup lakukan commit dan push untuk memperbarui website secara otomatis.

Custom Domain untuk Jekyll di GitHub Pages

Agar website Jekyll yang dihosting di GitHub Pages terlihat lebih profesional, kita bisa menggunakan custom domain. Dengan menggunakan nama domain sendiri, URL website akan lebih mudah diingat dan terlihat lebih kredibel.

Menyiapkan Custom Domain dengan DNS GitHub

Untuk menggunakan domain khusus, kita perlu mengarahkan DNS domain ke GitHub Pages dengan menambahkan record DNS di penyedia domain.

Buka pengaturan domain di penyedia layanan domain (misalnya, Namecheap, GoDaddy, Cloudflare, atau lainnya).
Tambahkan A record berikut untuk mengarahkan domain ke server GitHub Pages:
```
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
```
- Pastikan semua A record ditambahkan dengan alamat IP di atas.
Jika menggunakan subdomain (misalnya, blog.example.com), tambahkan CNAME record yang mengarah ke username GitHub Pages:
```
blog  CNAME  username.github.io
```
Gantilah username dengan akun GitHub Anda.

Menggunakan File `CNAME` untuk Domain Khusus

Setelah mengatur DNS, kita perlu memberitahu GitHub Pages bahwa website ini menggunakan domain khusus.

Buat file CNAME di dalam proyek Jekyll.
```
echo "www.example.com" > CNAME
```
Gantilah www.example.com dengan nama domain yang ingin digunakan.

Tambahkan dan push perubahan ke repository GitHub.

git add CNAME
git commit -m "Menambahkan custom domain"
git push origin main

Aktifkan HTTPS di GitHub Pages:
- Buka Settings > Pages pada repository GitHub.
- Pada bagian Custom Domain, pastikan domain sudah muncul.
- Centang Enforce HTTPS untuk mengaktifkan koneksi aman.

Setelah beberapa saat, domain khusus akan mulai berfungsi, dan website Jekyll Anda kini bisa diakses dengan URL yang lebih profesional.

Menambahkan Tema dan Plugin di Jekyll

Agar website Jekyll lebih menarik dan fungsional, kita bisa menambahkan tema yang sesuai dengan kebutuhan serta menggunakan plugin untuk fitur tambahan.

Cara Mengganti Tema Jekyll

Jekyll mendukung berbagai tema yang bisa digunakan untuk mengubah tampilan website dengan cepat. Berikut langkah-langkah untuk mengganti tema di Jekyll:

Pilih tema yang tersedia
- Kunjungi Jekyll Themes atau GitHub Pages themes untuk mencari tema yang cocok.
Tambahkan tema ke dalam proyek
- Buka file _config.yml dan tambahkan nama tema yang diinginkan:
```
theme: minima
```
  Gantilah minima dengan nama tema pilihan Anda.
Instal tema menggunakan Bundler
- Jalankan perintah berikut di terminal:
```
bundle install
```
  Perintah ini akan mengunduh dan menginstal tema yang telah ditentukan.
Sesuaikan tampilan tema
- Buka file layout dan style di dalam folder _layouts/ dan assets/ jika ingin melakukan penyesuaian lebih lanjut.
Jalankan ulang server Jekyll
- Setelah mengubah tema, jalankan ulang server lokal:
```
bundle exec jekyll serve
```
  Website akan dimuat ulang dengan tampilan tema baru.

Menggunakan Plugin Jekyll untuk Fitur Tambahan

Plugin di Jekyll dapat digunakan untuk menambahkan fitur seperti sitemap, SEO, pagination, dan lainnya. Berikut cara menggunakannya:

Pilih plugin yang dibutuhkan
- Beberapa plugin populer untuk Jekyll:
  - jekyll-seo-tag (SEO Optimization)
  - jekyll-sitemap (Generate sitemap otomatis)
  - jekyll-paginate (Membuat pagination untuk blog)
Tambahkan plugin ke dalam proyek
- Buka file Gemfile dan tambahkan plugin yang diinginkan:
```
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-paginate"
```
Instal plugin dengan Bundler
- Jalankan perintah berikut:
```
bundle install
```
Aktifkan plugin di _config.yml
- Tambahkan daftar plugin di dalam file _config.yml:
```
plugins:
  - jekyll-seo-tag
  - jekyll-sitemap
  - jekyll-paginate
```
Jalankan ulang server Jekyll untuk melihat perubahan
```
bundle exec jekyll serve
```

Dengan menggunakan tema dan plugin, website Jekyll dapat memiliki tampilan yang lebih menarik serta fitur yang lebih lengkap. Selanjutnya, kita akan membahas cara mengoptimalkan Jekyll untuk performa dan SEO yang lebih baik.

Optimasi SEO untuk Website Jekyll

Agar website Jekyll lebih mudah ditemukan di mesin pencari seperti Google, kita perlu menerapkan optimasi SEO. Berikut adalah beberapa langkah penting untuk meningkatkan visibilitas website Jekyll.

Menggunakan Meta Tag SEO di Jekyll

Meta tag membantu mesin pencari memahami konten website. Kita bisa menggunakan plugin jekyll-seo-tag untuk menambahkan meta tag secara otomatis.

Tambahkan plugin SEO ke dalam proyek
- Buka file Gemfile dan tambahkan baris berikut:
```
gem "jekyll-seo-tag"
```
- Instal plugin dengan menjalankan perintah:
```
bundle install
```
Aktifkan plugin di _config.yml
```
plugins:
  - jekyll-seo-tag
```
Tambahkan tag SEO ke dalam template Jekyll
- Edit file _layouts/default.html dan tambahkan kode berikut di dalam <head>:
```
{% seo %}
```
- Ini akan secara otomatis menghasilkan meta title, description, dan Open Graph tags berdasarkan isi halaman.

Sitemap dan robots.txt untuk Indexing Lebih Baik

Sitemap membantu mesin pencari menemukan halaman di website kita, sementara robots.txt mengatur akses bot pencarian ke website.

Tambahkan plugin sitemap
- Buka Gemfile dan tambahkan:
```
gem "jekyll-sitemap"
```
- Instal plugin dengan:
```
bundle install
```
- Aktifkan di _config.yml:
```
plugins:
  - jekyll-sitemap
```
Buat file robots.txt
- Tambahkan file robots.txt di root proyek:
```
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
```
- Gantilah example.com dengan domain website Anda.

Memanfaatkan GitHub Actions untuk Otomatisasi Jekyll

GitHub Actions memungkinkan kita untuk mengotomatisasi proses build dan deployment Jekyll.

Buat workflow untuk otomatisasi

Di dalam proyek, buat folder .github/workflows/, lalu tambahkan file jekyll-deploy.yml:

name: Deploy Jekyll to GitHub Pages

on:
  push:
    branches:
      - main

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

      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.0'

      - name: Install dependencies
        run: bundle install

      - name: Build Jekyll site
        run: bundle exec jekyll build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site

Simpan dan commit file workflow
- Jalankan perintah berikut untuk menyimpan perubahan:
```
git add .github/workflows/jekyll-deploy.yml
git commit -m "Menambahkan GitHub Actions untuk Jekyll"
git push origin main
```
- GitHub akan secara otomatis membangun dan menerbitkan website setelah setiap perubahan di-push.

Dengan optimasi SEO ini, website Jekyll akan lebih mudah ditemukan di mesin pencari dan lebih efisien dalam proses deploy.

Kesimpulan

Membuat website statis dengan Jekyll dan GitHub Pages adalah solusi praktis bagi mereka yang ingin memiliki website cepat, aman, dan mudah dikelola tanpa perlu biaya hosting tambahan. Dalam panduan ini, kita telah membahas langkah-langkah utama dalam membangun dan mengelola website dengan Jekyll:

Apa itu Jekyll? – Memahami konsep Jekyll sebagai static site generator.
Persiapan – Instalasi Jekyll di berbagai sistem operasi.
Pembuatan Website – Struktur proyek Jekyll dan pengelolaan konten dengan Markdown.
Hosting di GitHub Pages – Menyebarkan website secara gratis menggunakan GitHub Pages.
Custom Domain – Menggunakan domain pribadi untuk tampilan lebih profesional.
Tema & Plugin – Menyesuaikan tampilan dan fitur dengan tema serta plugin.
Optimasi SEO – Meningkatkan visibilitas di mesin pencari dengan meta tag dan sitemap.

Keuntungan Menggunakan Jekyll sebagai Alternatif CMS Ringan

Jekyll menawarkan berbagai keunggulan dibandingkan CMS berbasis database seperti WordPress:

Ringan dan Cepat – Tidak memerlukan database, sehingga lebih cepat dan efisien.
Keamanan Lebih Baik – Minim risiko serangan karena hanya menggunakan file statis.
Gratis dan Open Source – Tidak ada biaya hosting jika menggunakan GitHub Pages.
Mudah Dikelola dengan Git – Setiap perubahan terdokumentasi dengan baik.
Fleksibel – Cocok untuk blog, dokumentasi, dan website perusahaan.

Dengan semua keunggulan ini, Jekyll menjadi pilihan ideal bagi pengembang, blogger, dan siapa saja yang ingin membuat website tanpa kompleksitas CMS tradisional. Jika Anda ingin mencoba Jekyll, cukup ikuti langkah-langkah yang telah dibahas dan mulailah membangun website statis Anda sendiri!

Terima kasih telah mengikuti panduan ini. Semoga bermanfaat!