hibranwar

Cara Install Eleventy untuk Website Statis yang Cepat

2026-06-26 · 14 min read

schema systems

Aku bangun hibranwar.com pakai Eleventy. Dari nol. Ga punya pengalaman SSG sebelumnya. Yang aku punya cuma pengalaman nulis HTML manual, sedikit pemahaman soal Node.js, dan frustrasi mendalam sama WordPress yang lemot.

Sekarang site ini udah migrasi ke PHP includes di shared hosting. Tapi Eleventy tetap jadi fondasi cara aku mikir soal website: konten dulu, template kemudian, build otomatis.

Ini panduan buat kamu yang mau mulai dari nol. Bukan tutorial copy-paste. Ini catatan praktisi yang udah lewatin prosesnya, bikin kesalahan, dan akhirnya pindah ke sistem lain karena kebutuhannya berubah.

Key concept: Static site generator itu bukan framework. Dia cuma tool yang ngubah file Markdown dan template jadi HTML murni. Ga ada database, ga ada server-side processing waktu visitor dateng. Hasilnya: website yang cepat, aman, dan gampang di-host di mana aja.

Apa itu Eleventy (dan kenapa peduli)?

Eleventy, atau 11ty, itu static site generator berbasis JavaScript. Dia ambil file-file kamu (Markdown, Nunjucks, Liquid, HTML biasa) dan compile jadi website statis. Output-nya cuma HTML, CSS, dan JavaScript. Ga ada PHP, ga ada database, ga ada server processing.

Kenapa ini penting? Karena website statis secara arsitektur lebih disukai AI crawler. HTML bersih, load time cepat, struktur yang bisa diprediksi. Itu bukan opini. Itu cara kerja machine parsing.

Eleventy spesifik dipilih karena beberapa alasan:

  • Zero-config. Bisa jalan tanpa file konfigurasi sama sekali.
  • Ga opinionated soal frontend framework. Mau pakai React? Boleh. Vanilla HTML? Juga boleh. Mau ga pakai JS sama sekali? Silakan.
  • Build time cepat. Ratusan halaman di-generate dalam hitungan detik.
  • Templating fleksibel. Support 11 bahasa template (Nunjucks, Liquid, Handlebars, dll).
  • Komunitas aktif dan dokumentasi yang bener-bener bagus.

Yang penting: Eleventy ga nambahin bloat ke output kamu. Ga ada bundled JavaScript kecuali kamu sendiri yang masukin. Ini beda banget sama Next.js atau Gatsby yang ship ribuan baris JS ke browser.

Prerequisites: yang harus ada sebelum mulai

Kamu butuh tiga hal:

  1. Node.js (versi 18 atau lebih baru). Download dari nodejs.org.
  2. npm (biasanya otomatis terinstall bareng Node.js).
  3. Text editor. VS Code, Sublime Text, atau apa pun yang kamu nyaman.

Cek versi Node kamu:

node --version
# v18.15.0 atau lebih baru

npm --version
# 9.x atau lebih baru

Kalo belum ada, install Node.js dulu. Ini satu-satunya dependency eksternal yang dibutuhin. Serius. Cuma ini.

Step 1: Bikin project baru

Buka terminal. Bikin folder baru dan masuk ke dalamnya:

mkdir website-ku
cd website-ku

Inisialisasi npm project:

npm init -y

Ini bikin file package.json. Isinya metadata project kamu. Ga perlu edit apa-apa dulu.

Step 2: Install Eleventy

Install Eleventy sebagai dev dependency:

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

Kenapa --save-dev? Karena Eleventy cuma dibutuhin waktu build. Dia ga ikut ke production. Output-nya cuma HTML biasa.

Verifikasi instalasi:

npx eleventy --help

Kalo muncul daftar opsi, berarti udah bener.

Step 3: Bikin halaman pertama

Bikin file index.md di root project:

# Halo Dunia

Ini website pertama aku pakai Eleventy.

Ga ada database. Ga ada WordPress. Cuma file markdown yang di-compile jadi HTML.

Sekarang jalanin Eleventy:

npx eleventy

Output di terminal:

[11ty] Writing _site/index.html from ./index.md (liquid)
[11ty] Wrote 1 file in 0.26 seconds

Itu dia. Eleventy baca file Markdown kamu, convert jadi HTML, dan taruh hasilnya di folder _site/. Buka _site/index.html di browser. Website pertama kamu udah jadi.

Step 4: Development server

Kamu ga mau buka file manual setiap kali ada perubahan. Jalanin dev server:

npx eleventy --serve

Eleventy bakal kasih tau URL lokal, biasanya http://localhost:8080. Buka di browser. Setiap kali kamu edit dan save file, browser otomatis reload. Ini pakai Browsersync di belakang layar.

Tambahin script di package.json biar ga perlu ngetik panjang:

{
  "scripts": {
    "start": "npx eleventy --serve",
    "build": "npx eleventy"
  }
}

Sekarang cukup npm start untuk development dan npm run build untuk generate final output.

Step 5: Layout dan template

Halaman tanpa layout itu cuma konten mentah. Kamu butuh wrapper HTML yang proper: <head>, <nav>, <footer>.

Bikin folder _includes/ dan di dalamnya bikin file base.njk (Nunjucks template):

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <nav>
    <a href="/">Home</a>
  </nav>
  <main>
    {{ content | safe }}
  </main>
  <footer>
    <p>&copy; 2026</p>
  </footer>
</body>
</html>

Sekarang update index.md dengan front matter yang nunjuk ke layout ini:

---
title: Homepage
layout: base.njk
---

# Halo Dunia

Ini website pertama aku pakai Eleventy.

Jalanin npm start lagi. Sekarang halaman kamu punya DOCTYPE, head, nav, dan footer yang proper. Satu layout, dipake di semua halaman.

Step 6: Konfigurasi Eleventy

Bikin file eleventy.config.js (atau .eleventy.js di versi lama) di root project:

module.exports = function(eleventyConfig) {
  // Copy folder CSS dan images ke output
  eleventyConfig.addPassthroughCopy("css");
  eleventyConfig.addPassthroughCopy("images");

  return {
    dir: {
      input: "src",      // folder input
      output: "_site",   // folder output
      includes: "_includes"
    }
  };
};

Dengan config ini, kamu taro semua source file di folder src/ dan Eleventy generate output ke _site/. Lebih rapi. Pindahin index.md dan folder _includes/ ke dalam src/.

Struktur project sekarang:

website-ku/
├── src/
│   ├── _includes/
│   │   └── base.njk
│   ├── css/
│   │   └── style.css
│   ├── images/
│   └── index.md
├── _site/           (auto-generated, jangan edit)
├── eleventy.config.js
├── package.json
└── node_modules/

Step 7: Collections dan blog posts

Ini yang bikin Eleventy powerful. Bikin folder src/posts/. Setiap file Markdown di dalamnya jadi satu blog post.

Bikin src/posts/posts.json untuk default front matter:

{
  "layout": "base.njk",
  "tags": "posts"
}

Sekarang bikin post pertama, src/posts/hello-world.md:

---
title: Post Pertama
date: 2026-01-15
---

Ini post pertama aku. Ditulis di Markdown, di-compile jadi HTML.

Di index.md, tambahin listing semua posts:

---
title: Homepage
layout: base.njk
---

# Blog Aku

{% for post in collections.posts %}
- [{{ post.data.title }}]({{ post.url }})
{% endfor %}

Eleventy otomatis bikin collection dari semua file yang punya tag "posts". Ga perlu database. Ga perlu API call. Cuma file system.

Step 8: Deploy

Jalanin npm run build. Folder _site/ isinya website lengkap kamu. Upload isi folder itu ke hosting mana aja. Netlify, Vercel, GitHub Pages, atau shared hosting biasa pakai FTP.

Itu yang aku lakukan awalnya. Upload ke shared hosting Rumahweb via File Manager. Ga butuh CI/CD, ga butuh pipeline. Cuma copy file.

Perbandingan SSG: Eleventy vs yang lain

Sebelum milih SSG, aku riset beberapa opsi. Ini perbandingannya berdasarkan pengalaman dan dokumentasi:

AspekEleventyHugoNext.jsAstro
BahasaJavaScriptGoJavaScript/ReactJavaScript
Build speed (100 halaman)~1-3 detik<1 detik10-30 detik3-8 detik
JS di output0 KB (default)0 KB (default)50-200+ KB0 KB (default)
Template engine11 pilihanGo templatesJSX/ReactAstro/JSX/Vue/Svelte
Learning curveRendahSedangTinggiSedang
Konfigurasi awalZero-configPerlu config.tomlBanyakSedikit
Cocok untukBlog, portfolio, docsBlog, docs besarWeb app, e-commerceContent-heavy, hybrid
Hosting requirementStatic hosting apa ajaStatic hosting apa ajaNode server atau VercelStatic atau Node
Dependencies install~200 packagesBinary tunggal1000+ packages~400 packages
Framework lock-inTidak adaTidak adaReact ecosystemMinimal

Kalau tujuan kamu website konten yang cepat dan bersih, Eleventy atau Hugo. Kalau kamu udah di ekosistem JavaScript dan mau zero-config, Eleventy. Kalau kamu butuh web app interaktif, Next.js. Kalau kamu mau hybrid (sebagian statis, sebagian interaktif), Astro.

Aku pilih Eleventy karena JavaScript-nya familiar, output-nya bersih, dan aku ga perlu belajar Go template syntax. Keputusan pragmatis. Bukan keputusan ideologis.

Kenapa aku akhirnya migrasi dari Eleventy ke PHP

Ini bagian yang jarang diceritain orang. Eleventy bagus. Tapi kebutuhan aku berubah.

hibranwar.com mulai dari 5 halaman. Kemudian jadi 50. Kemudian 183. Setiap perubahan, aku harus rebuild semua, upload ulang semua. Di shared hosting tanpa SSH, ini berarti extract zip atau upload satu-satu via File Manager.

Masalah spesifiknya:

  • Build lokal, deploy manual. Ga ada CI/CD di shared hosting. Setiap edit berarti: save, build, zip, upload, extract. Untuk satu typo.
  • Node.js ga jalan di server. Rumahweb itu shared hosting LiteSpeed. Ga ada Node runtime. Build harus di laptop.
  • 183 file statis di-upload ulang setiap kali. Meskipun cuma 1 file yang berubah.
  • Partial update ga mungkin. Kalo aku edit template header, semua 183 halaman harus di-rebuild dan re-upload.

Solusinya: PHP includes. Header dan footer jadi shared files. Edit satu file, semua halaman ikut berubah. Ga perlu build step. Edit langsung di server via File Manager kalo darurat.

Ini bukan downgrade. Ini adaptasi ke constraint yang ada. Website statis tetap prinsipnya. Tapi delivery-nya lewat PHP includes yang behavior-nya hampir identik dengan SSG output, cuma tanpa build step.

Pelajarannya: pilih tool yang cocok sama deployment environment kamu. Bukan yang paling keren di Twitter.

Kapan Eleventy tetap pilihan terbaik

Meskipun aku pindah, Eleventy tetap rekomendasi aku untuk skenario ini:

  • Deploy ke Netlify, Vercel, atau GitHub Pages. Mereka punya CI/CD gratis. Push ke git, auto-build, auto-deploy. Zero friction.
  • Website di bawah 50 halaman. Manageable. Upload manual pun ga masalah.
  • Portfolio atau blog pribadi. Konten jarang berubah, template stabil.
  • Kamu mau belajar cara kerja web. Eleventy ga sembunyiin apa-apa. Kamu nulis HTML dan Markdown, dia compile. Ga ada magic.

Dan ini penting: kalo kamu serius soal schema markup sebagai strategi bisnis, website statis itu fondasi yang solid. HTML bersih bikin schema gampang di-implement dan di-maintain. Ga ketutup sama page builder bloat.

Tips dari pengalaman

Beberapa hal yang aku harap tau dari awal:

  1. Jangan mulai dari tema orang. Mulai dari HTML kosong. Tambah satu per satu. Kamu bakal paham struktur lebih cepat.
  2. Pakai Nunjucks, bukan Liquid. Nunjucks lebih powerful dan syntax-nya lebih intuitif. Eleventy default Liquid, tapi Nunjucks lebih umum dipake di komunitas.
  3. Passthrough copy untuk aset. CSS, images, fonts, semua yang ga perlu di-process harus pakai addPassthroughCopy(). Jangan sampai Eleventy coba render file CSS sebagai template.
  4. Git ignore _site/ dan node_modules/. Output dan dependencies ga perlu masuk version control.
  5. .gitignore dari awal. Bikin sebelum commit pertama. Serius.
  6. Data files itu powerful. Eleventy bisa baca JSON dan JS data files. Kamu bisa bikin navigasi, daftar project, atau apa pun dari data tanpa hardcode di template.

Dan satu lagi: kalo kamu deploy ke shared hosting, pertimbangkan dari awal apakah SSG cocok buat workflow kamu. Optimisasi untuk AI search butuh iterasi cepat. Kalo setiap edit butuh 5 menit build-upload cycle, kamu bakal males nge-update. Dan website yang ga di-update itu website yang mati.

Struktur project yang aku rekomendasikan

Setelah beberapa kali refactor, ini struktur yang paling masuk akal untuk website konten:

project/
├── src/
│   ├── _data/          # Global data (JSON/JS)
│   │   └── site.json   # Site name, URL, author
│   ├── _includes/      # Layouts dan partials
│   │   ├── base.njk    # HTML skeleton
│   │   ├── post.njk    # Blog post layout
│   │   └── nav.njk     # Navigation partial
│   ├── css/
│   │   └── style.css
│   ├── images/
│   ├── posts/           # Blog posts (Markdown)
│   │   ├── posts.json   # Default front matter
│   │   └── *.md
│   ├── pages/           # Static pages
│   │   ├── about.md
│   │   └── contact.md
│   └── index.njk        # Homepage
├── eleventy.config.js
├── package.json
└── .gitignore

File src/_data/site.json:

{
  "name": "Website Ku",
  "url": "https://example.com",
  "author": "Nama Kamu"
}

Ini bisa diakses di semua template sebagai {{ site.name }}, {{ site.url }}, dll. Satu tempat untuk data global. Ga perlu hardcode di setiap file.

Eleventy dan structured data

Satu hal yang bikin Eleventy cocok untuk entity infrastructure: dia ga ganggu structured data kamu. Kamu bisa taruh JSON-LD di layout, dan karena output-nya HTML murni, schema kamu persis seperti yang kamu tulis. Ga ada framework yang rewrite atau minify atau break syntax-nya.

Contoh JSON-LD di layout Nunjucks:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ title }}",
  "author": {
    "@type": "Person",
    "name": "{{ site.author }}"
  },
  "datePublished": "{{ date }}"
}
</script>

Ini di-render jadi HTML statis yang bisa dibaca langsung sama Google, ChatGPT, dan AI crawler lainnya. Ga ada client-side rendering yang bikin schema invisible buat bot.

Frequently Asked Questions

Apakah Eleventy gratis?

Ya. Eleventy itu open-source dan gratis. Kamu cuma butuh Node.js (juga gratis) untuk menjalankannya. Hosting output-nya juga bisa gratis kalau pakai GitHub Pages, Netlify, atau Vercel tier gratis.

Bisa ga pakai Eleventy tanpa belajar JavaScript?

Untuk setup dasar, bisa. Kamu cuma perlu jalanin command di terminal dan nulis Markdown. Tapi kalo mau kustomisasi (filter, shortcode, data processing), kamu butuh JavaScript dasar. Ga perlu jago. Cukup paham function dan variable.

Apa bedanya Eleventy sama WordPress?

WordPress itu dynamic CMS. Setiap visitor request halaman, server query database dan generate HTML on the fly. Eleventy generate semua HTML sekali waktu build. Hasilnya lebih cepat, lebih aman (ga ada database yang bisa di-hack), dan lebih murah untuk di-host. Trade-off-nya: ga ada admin panel. Semua editing di code editor.

Hosting apa yang cocok untuk Eleventy?

Yang paling seamless: Netlify atau Vercel. Connect ke GitHub repo, setiap push otomatis rebuild dan deploy. Gratis untuk personal project. Bisa juga shared hosting biasa (upload folder _site/ via FTP), tapi kamu kehilangan auto-deploy. Ini yang aku alami di Rumahweb sebelum akhirnya migrasi ke PHP.

Eleventy masih relevan di 2026?

Masih. Eleventy 3.0 udah rilis dengan ESM support dan performa lebih baik. Dipakai sama Google, CERN, W3C, dan banyak developer yang prioritaskan performa. Selama website konten masih ada, SSG kayak Eleventy tetap relevan. Yang berubah cuma tooling di sekitarnya.

References

  1. Eleventy Documentation. "Getting Started." 11ty.dev, 2024. Link
  2. Camden, Raymond. "11ty Tutorial: Cranking Your Jamstack Blog Up to 11." Snipcart, 2023. Link
  3. Hynes, Gerard. "Learn the Eleventy Static Site Generator by Building and Deploying a Portfolio Website." freeCodeCamp, 2023. Link
  4. Santala, Juha-Matti. "How I teach Eleventy from scratch." hamatti.org, 2024. Link
  5. McCormick, Rob. "Build Your First Eleventy Site." robmc.dev, 2024. Link

Further reading

GEO vs. SEO: Generative Engine Optimisation Explained for Business Leaders2026-05-26 · 14 min read2026-06-04 · 14 min readMengapa Website Statis Lebih Baik untuk Visibilitas AI2026-06-09 · 14 min read

Linked from