Cara Deploy Eleventy ke Netlify

Eleventy menghasilkan HTML biasa tanpa runtime apa pun, dan Netlify memang dibuat untuk menyajikan berkas seperti itu. Kombinasinya termasuk yang paling sederhana di seluruh ekosistem Jamstack — tidak ada adapter, tidak ada plugin platform, tidak ada yang perlu diterjemahkan.

Panduan ini mencakup deploy dasarnya, lalu dua fitur Netlify yang sering terlewat padahal berguna: deploy preview dan penanganan form tanpa backend.

Yang perlu disiapkan

• Node.js 20 atau lebih baru — cek dengan node -v.
• Akun Netlify, paket gratis cukup.
• Situs Eleventy yang jalan dengan npx @11ty/eleventy --serve.
• Repositori Git.

Belum punya situs Eleventy? Yang paling minim cuma tiga langkah:

mkdir situs-saya && cd situs-saya
npm init -y
npm install --save-dev @11ty/eleventy
echo "# Halo" > index.md
npx @11ty/eleventy --serve

Langkah 1: Buat netlify.toml

Kamu bisa mengisi setelan build lewat dashboard, tapi menaruhnya di repositori jauh lebih baik — konfigurasinya ikut ter-versi, dan siapa pun yang meng-clone repo langsung tahu cara build-nya.

Bikin netlify.toml di root project:

# netlify.toml
[build]
  command = "npx @11ty/eleventy"
  publish = "_site"

[build.environment]
  NODE_VERSION = "20"

Tiga baris itu isinya:

• command — perintah yang dijalankan Netlify. Kalau kamu sudah punya script build di package.json, pakai npm run build saja.
• publish — folder hasil build. Eleventy memakai _site secara bawaan.
• NODE_VERSION — kunci versinya. Tanpa ini kamu akan kena error aneh suatu hari saat Netlify mengubah versi defaultnya.

Langkah 2: Hubungkan repositori

1. Push project-mu ke GitHub, GitLab, atau Bitbucket.
2. Di dashboard Netlify, klik Add new site → Import an existing project.
3. Pilih penyedia Git dan repositorimu.
4. Netlify membaca netlify.toml dan mengisi setelannya sendiri. Biarkan apa adanya.
5. Klik Deploy site.

Satu menit kemudian situsmu live di alamat acak seperti gentle-pastry-4a1b2c.netlify.app. Kamu bisa menggantinya lewat Site configuration → Change site name.

Sejak sekarang, setiap push ke branch utama otomatis jadi deploy baru.

Langkah 3: Deploy preview

Fitur ini aktif otomatis dan sering kali paling berguna dari semuanya.

Setiap kali kamu membuka pull request, Netlify mem-build cabang itu dan memberinya URL sendiri. Kamu bisa membuka perubahan itu di browser sungguhan sebelum di-merge — bukan menebak dari diff.

URL-nya muncul otomatis sebagai komentar di pull request kalau integrasi GitHub-nya aktif. Untuk situs yang ditulis banyak orang, ini yang membuat review konten jadi mungkin tanpa harus menjalankan apa pun di laptop.

Langkah 4: Form tanpa backend

Situs statis tidak punya server untuk menerima form. Netlify menyediakannya — cukup satu atribut.

<form name="kontak" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="kontak">
  <label>Nama <input type="text" name="nama" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Pesan <textarea name="pesan"></textarea></label>
  <button type="submit">Kirim</button>
</form>

Submission masuk ke dashboard Netlify di bagian Forms. Kamu bisa mengatur notifikasi email dari sana.

Dua hal yang sering bikin gagal:

• Input tersembunyi form-name wajib ada dan nilainya harus sama persis dengan atribut name di tag <form>.
• Form harus ada di HTML hasil build. Netlify memindai HTML statis saat deploy. Form yang dibuat oleh JavaScript setelah halaman dimuat tidak akan terdeteksi.

Untuk menahan spam, tambahkan honeypot — kolom umpan yang disembunyikan dari manusia:

<form name="kontak" method="POST" data-netlify="true"
      netlify-honeypot="bot-field">
  <p hidden><label>Jangan diisi: <input name="bot-field"></label></p>

Langkah 5: Redirect dan header

Tambahkan langsung di netlify.toml:

[[redirects]]
  from = "/artikel-lama"
  to = "/blog/artikel-baru"
  status = 301

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Header cache panjang untuk aset itu aman selama nama berkasnya mengandung hash yang berubah tiap build. Jangan pasang di HTML — halamanmu akan tersangkut di cache pengunjung.

Langkah 6: Pasang domain sendiri

Buka Domain management → Add a domain. Cara paling mudah adalah memindahkan nameserver ke Netlify DNS, karena domain root ditangani otomatis. Alternatifnya, tambahkan CNAME untuk www dan A record untuk root sesuai nilai yang ditampilkan dashboard.

Sertifikat SSL diterbitkan otomatis. Langkah DNS lengkapnya ada di panduan custom domain dan SSL.

Masalah yang sering muncul

Deploy sukses tapi halaman 404

Nilai publish tidak cocok dengan folder keluaran Eleventy. Cek log build — Netlify mencetak isi folder yang di-publish. Kalau kosong, itu penyebabnya.

Error "eleventy: not found"

Eleventy tidak ikut terpasang. Pastikan ada di devDependencies — bukan hanya terpasang global di laptopmu — dan package-lock.json ikut ter-commit.

npm install --save-dev @11ty/eleventy
git add package.json package-lock.json
git commit -m "tambah eleventy sebagai dependensi"

Tautan internal rusak setelah deploy

Biasanya karena path relatif yang berbeda perilaku antara mode --serve dan hasil build. Pakai path absolut yang diawali garis miring — /blog/, bukan blog/ — atau pakai filter url bawaan Eleventy.

Gambar tidak muncul

Eleventy tidak menyalin berkas yang bukan template kecuali kamu memintanya. Tambahkan di eleventy.config.js:

export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("assets");
};

Build lebih lambat dari yang seharusnya

Kalau situsmu punya ratusan halaman dan build memakan waktu lama, aktifkan cache dependensi dengan memastikan package-lock.json ter-commit, dan pertimbangkan plugin cache gambar Eleventy supaya gambar tidak diproses ulang tiap build.

Netlify Functions untuk logika kecil

Situs Eleventy itu statis, tapi kadang kamu butuh sedikit kode server — memanggil API dengan kunci rahasia, misalnya, atau memproses sesuatu yang tidak boleh terlihat di browser.

Netlify Functions menyediakan itu tanpa server terpisah. Buat berkas di netlify/functions/:

// netlify/functions/cuaca.js
export default async (req) => {
  const res = await fetch(
    `https://api.contoh.com/cuaca?key=${process.env.API_KEY}`
  );
  const data = await res.json();

  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' }
  });
};

Function itu otomatis tersedia di /.netlify/functions/cuaca. Panggil dari halamanmu seperti API biasa:

const res = await fetch('/.netlify/functions/cuaca');

Kuncinya tersimpan di environment variable di dashboard Netlify dan tidak pernah sampai ke browser — itu keuntungan utamanya dibanding memanggil API langsung dari kode halaman.

Batas paket gratis Netlify

Yang paling mungkin kamu sentuh adalah menit build. Situs Eleventy membangun dalam hitungan detik, tapi kalau kamu punya banyak situs di satu akun dan sering push, 300 menit bisa habis lebih cepat dari dugaan.

Kalau mulai mendekati batas, hentikan build yang tidak perlu dengan menambahkan [skip ci] di pesan commit untuk perubahan yang tidak memengaruhi hasil build — memperbaiki README, misalnya.

Ringkasan

Kalau situsmu HTML biasa tanpa generator, langkahnya lebih pendek lagi — lihat cara upload website HTML/CSS ke Netlify. Untuk error yang tidak dibahas di sini, cek 15 error deploy paling umum.

Ingin tahu kenapa arsitektur situs statis jadi pilihan? Lihat apa itu Jamstack, atau mulai dari panduan lengkap deploy website.