Cara Membuat Blog dengan Eleventy (11ty)

Eleventy (11ty) adalah static site generator (SSG) yang ringan dan fleksibel, terkenal dengan kesederhanaan dan kecepatan build-nya. Jika Anda mencari cara untuk membuat blog yang cepat, aman, dan mudah di-maintain tanpa kompleksitas framework besar seperti React atau Vue, 11ty bisa menjadi pilihan yang tepat.

Eleventy bekerja dengan mengambil template dari berbagai bahasa (Markdown, Nunjucks, Liquid, Handlebars, dsb.) dan mengolahnya menjadi file HTML statis.

Panduan ini akan memandu Anda langkah demi langkah dalam membuat blog sederhana dengan Eleventy.

Persiapan Awal

Sebelum memulai, pastikan Anda sudah menginstal beberapa tool dasar:

Node.js dan npm (atau Yarn): Eleventy dibangun di atas Node.js. Anda bisa mengunduhnya dari nodejs.org. npm (Node Package Manager) akan terinstal secara otomatis.
Editor Teks: Seperti VS Code, Sublime Text, atau Atom.

Langkah 1: Inisialisasi Proyek Eleventy

Pertama, buat folder baru untuk proyek blog Anda dan inisialisasi proyek Node.js:

Bash

mkdir my-11ty-blog cd my-11ty-blog npm init -y

Kemudian, instal Eleventy sebagai dependency pengembangan:

Bash

npm install @11ty/eleventy --save-dev

Langkah 2: Konfigurasi Dasar (Opsional tapi Direkomendasikan)

Anda bisa membuat file konfigurasi .eleventy.js di root folder proyek Anda. Ini memungkinkan Anda untuk menyesuaikan input, output, template engine, dan lain-lain.

Buat file my-11ty-blog/.eleventy.js:

JavaScript

module.exports = function(eleventyConfig) { // PassThrough Copy: Menyalin folder 'assets' ke folder output eleventyConfig.addPassthroughCopy("src/assets"); return { dir: { input: "src", // Folder input untuk semua konten dan template output: "public" // Folder output hasil build } }; };

Langkah 3: Membuat Struktur Folder Dasar

Eleventy secara default akan mencari file di root folder. Namun, lebih baik untuk membuat folder src sebagai input utama dan public sebagai output.

my-11ty-blog/
├── src/
│   ├── assets/        (untuk CSS, JS, gambar, dll.)
│   │   └── style.css
│   ├── _includes/     (untuk layout, header, footer, dll.)
│   │   └── base.njk
│   ├── index.njk      (halaman utama)
│   └── blog/          (folder untuk postingan blog)
│       └── first-post.md
├── .eleventy.js
└── package.json

Langkah 4: Membuat Layout Dasar

Layout adalah template yang membungkus konten Anda. Kita akan menggunakan Nunjucks sebagai template engine di contoh ini (Anda bisa pakai Liquid, Handlebars, atau yang lain).

Buat file src/_includes/base.njk:

Code snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title or "My Awesome 11ty Blog" }}</title>
    <link rel="stylesheet" href="/assets/style.css">
</head>
<body>
    <header>
        <h1><a href="/">My 11ty Blog</a></h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog/">Blog</a></li>
            </ul>
        </nav>
    </header>

    <main>
        {{ content | safe }}
    </main>

    <footer>
        <p>&copy; {{ "now" | date("yyyy") }} My 11ty Blog. All rights reserved.</p>
    </footer>
</body>
</html>

Catatan: {{ content | safe }} adalah tempat konten dari setiap halaman akan dimasukkan. title adalah variabel data yang akan kita definisikan nanti.

Langkah 5: Membuat Halaman Utama (Index Page)

Buat file src/index.njk:

Code snippet

---
title: Welcome to My Eleventy Blog
layout: base.njk
---

<h2>Hello, Eleventy!</h2>
<p>Ini adalah halaman utama blog saya yang dibuat dengan Eleventy.</p>

<p>Lihat postingan terbaru kami di halaman <a href="/blog/">blog</a>.</p>

--- di bagian atas adalah Front Matter, tempat Anda mendefinisikan variabel data untuk halaman. layout: base.njk memberitahu Eleventy untuk menggunakan layout yang sudah kita buat.*

Langkah 6: Membuat Postingan Blog Pertama

Buat folder src/blog/ dan di dalamnya, buat file Markdown, misalnya src/blog/first-post.md:

Markdown

---
title: Postingan Pertama Saya di Eleventy
author: John Doe
date: 2024-07-26
layout: base.njk
tags:
  - blog
  - pemula
---

# Selamat Datang di Postingan Pertama!

Ini adalah konten postingan blog pertama saya yang ditulis dalam **Markdown**.

Beberapa poin penting:
* Markdown itu mudah.
* Eleventy itu cepat.
* Membangun blog jadi menyenangkan!

```javascript
console.log("Kode juga bisa dimasukkan!");

* `tags: - blog - pemula` ini akan berguna untuk mengelompokkan postingan blog.*


Untuk menampilkan daftar postingan blog, kita akan menggunakan fitur **Eleventy Collections**. Eleventy secara otomatis mengelompokkan *file* berdasarkan tag.

Buat *file* `src/blog/blog.njk` (nama *file* ini akan menjadi URL `/blog/`):

```nunjucks
---
title: Semua Postingan Blog
layout: base.njk
pagination:
  data: collections.blog
  size: 10
eleventyComputed:
  permalink: "/blog/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber + 1 }}/{% endif %}index.html"
---

<h1>Semua Postingan Blog</h1>

{% for post in pagination.items %}
  <article>
    <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
    <p>Penulis: {{ post.data.author }} | Tanggal: {{ post.date | date("yyyy-MM-dd") }}</p>
    {{ post.templateContent | safe }}
    <a href="{{ post.url }}">Baca Selengkapnya...</a>
  </article>
  <hr>
{% endfor %}

{# Pagination navigation #}
{% if pagination.pages.length > 1 %}
  <nav class="pagination">
    {% if pagination.href.previous %}
      <a href="{{ pagination.href.previous }}">Previous Page</a>
    {% endif %}
    {% for pageEntry in pagination.pages %}
      <a href="{{ pagination.hrefs[loop.index0] }}" {% if pageEntry.url == page.url %}aria-current="page"{% endif %}>
        {{ loop.index }}
      </a>
    {% endfor %}
    {% if pagination.href.next %}
      <a href="{{ pagination.href.next }}">Next Page</a>
    {% endif %}
  </nav>
{% endif %}

pagination di Front Matter digunakan untuk membuat koleksi data dari semua item dengan tag blog.
eleventyComputed.permalink digunakan untuk membuat URL pagination yang bersih (misalnya /blog/page-2/).
post.templateContent menampilkan konten dari setiap postingan.*

Langkah 7: Menambahkan CSS Sederhana

Buat file src/assets/style.css:

CSS

/* src/assets/style.css */
body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}
header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
header h1 a {
    color: #fff;
    text-decoration: none;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}
nav ul li {
    margin: 0 1rem;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
article {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}
footer {
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
    background-color: #333;
    color: #fff;
}

Ingat, kita sudah mengkonfigurasi .eleventy.js untuk menyalin folder assets ini ke output folder.

Langkah 8: Menjalankan Eleventy

Tambahkan script ke package.json untuk memudahkan menjalankan Eleventy:

JSON

{
  "name": "my-11ty-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "eleventy --serve",
    "build": "eleventy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1"
  }
}

Sekarang, Anda bisa menjalankan server pengembangan dan melihat blog Anda:

Bash

npm start

Eleventy akan membangun situs Anda dan meluncurkan server lokal (biasanya di http://localhost:8080/). Setiap kali Anda membuat perubahan pada file sumber, Eleventy akan secara otomatis membangun ulang dan me-refresh browser.

Untuk membangun file statis yang siap di-deploy:

Bash

npm run build

Ini akan menghasilkan file HTML, CSS, dan aset lainnya di folder public/.

Langkah 9: Deploy Blog Anda

Setelah Anda puas dengan blog Anda, Anda dapat mendeploy folder public ke platform hosting static site favorit Anda seperti Netlify, Vercel, atau GitHub Pages.

Netlify / Vercel: Ini adalah pilihan yang sangat populer. Anda cukup menghubungkan repository Git Anda, dan mereka akan otomatis mendeteksi Eleventy dan mendeploy folder public setiap kali Anda melakukan push ke branch utama.
- Build Command: eleventy (atau npm run build jika Anda menggunakan script di package.json).
- Publish Directory: public.

Fitur Lanjutan Eleventy yang Bisa Anda Jelajahi:

Data Global: Buat file data JSON atau JavaScript di src/_data/ untuk data yang bisa diakses di semua template.
Filter Kustom: Buat fungsi kustom untuk memformat data (misalnya, format tanggal, memotong teks).
Shortcodes: Komponen kustom yang bisa Anda gunakan dalam Markdown untuk menambahkan fungsionalitas kompleks (misalnya, galeri gambar, tombol).
Plugins: Ada banyak plugin komunitas untuk SEO, optimasi gambar, RSS feeds, dan lainnya.
Collections Kustom: Lebih dari sekadar tag, Anda bisa mendefinisikan koleksi kustom berdasarkan path file atau Front Matter.
Paginasi: Seperti yang kita gunakan di halaman blog, untuk memecah daftar panjang menjadi beberapa halaman.

Eleventy menawarkan keseimbangan sempurna antara kesederhanaan dan kekuatan, menjadikannya pilihan yang sangat baik untuk membangun blog yang cepat dan efisien. Dengan fondasi ini, Anda bisa mulai menyesuaikan desain, menambahkan lebih banyak konten, dan menjelajahi fitur-fitur canggih 11ty lainnya.