Penyelaman Jauh Ke Eleventy Static Site Generator

Tapi pertama-tama — mari kita cepat meninjau apa yang dimaksud dengan "situs statis" dan kemudian apa yang disediakan generator. Situs statis terdiri dari konten statis — seperti dalam, HTML, CSS, aset, dan semua konten sudah dikompilasi bersama sebelum dikirim ke host situs web. Ini berbeda dari situs dinamis yang mengkompilasi hal-hal itu dari kueri database pada waktu berjalan (seperti WordPress) atau yang menarik konten dari sisi klien API (seperti kerangka kerja JavaScript tanpa rendering sisi server).

Generator situs statis adalah lingkungan dan pemroses build untuk mengompilasi konten Anda ke dalam HTML statis. Mereka biasanya menawarkan bantuan untuk memberikan fleksibilitas dalam menulis konten Anda (seperti mendukung penurunan harga) dan menyertakan metode untuk templating. Jadi, alih-alih menulis halaman HTML satu per satu dan harus menyalin dan menempelkan bagian yang berulang, generator akan mendukung pemecahan hal-hal itu menjadi komponen melalui bahasa templat tertentu. Kemudian proses pembuatan generator akan menyatukan semuanya dan menampilkan HTML final yang dapat diunggah ke host web untuk disajikan sebagai situs web Anda. Tergantung pada web host yang Anda gunakan, proses build ini bahkan dapat dilakukan oleh host.

Ada banyak generator situs statis yang tersedia. Anda mungkin pernah mendengar atau bahkan menggunakan yang seperti Jekyll, Hugo, Gatsby, Next dan Nuxt. Daftar lengkap disediakan oleh Jamstack.org.

Apa yang Membuat Eleventy Berbeda Dari Generator Situs Statis Lainnya?

Eleventy sangat cepat baik selama build maupun di browser. Ini sebagian besar berkat tidak memerlukan pemuatan bundel JavaScript sisi klien untuk menyajikan konten (dibandingkan dengan sesuatu seperti Gatsby). Render sisi server bahkan tidak menjadi perhatian di sini, karena pembuatan halaman sistem file default ke HTML statis.

Apa yang benar-benar membuat Eleventy unik adalah kemampuan untuk memilih dan mencampur hingga sepuluh bahasa templat yang berbeda:

Pencampuran bahasa dapat terjadi dalam file yang sama, atau di antara tata letak. Misalnya, saya sering menulis konten utama saya dengan penurunan harga yang dimasukkan ke dalam tata letak Nunjucks. Dalam beberapa proyek, saya merasa berguna untuk dapat mengulang beberapa data menggunakan Nunjucks saat berada di file penurunan harga. Kemampuan untuk menggabungkan bahasa ini sangat kuat, dan memungkinkan Anda merancang alur kerja tulis-dan-bangun yang paling sesuai untuk Anda dan proyek Anda.

Sebelas menyertakan flag --serve yang menggunakan BrowserSync untuk mengaktifkan penyajian situs secara lokal dan dengan hot-reload pada perubahan file. Ini adalah kemudahan yang luar biasa, dan baik untuk diingat jika Anda tidak mencari generator situs statis tetapi mungkin peningkatan dari alat pembuatan seperti Gulp.

Sebagai bagian dari zero-config, semua file situs Anda dapat berada di root proyek Anda. Untuk mengubah direktori input dan output, Anda dapat membuat konfigurasi Eleventy, yang diharapkan menjadi file root bernama .eleventy.js . Berikut cuplikan singkat yang menunjukkan cara membuat modifikasi ini:

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

Seperti disebutkan sebelumnya, perilaku default adalah pembuatan halaman sistem file yang umumnya sangat bermanfaat terutama untuk memulai dengan cepat. Ini mudah ditimpa dengan menetapkan permalink khusus dan itu dapat dilakukan per file, untuk seluruh direktori, atau secara dinamis untuk kumpulan data. Permalinks juga menawarkan kekuatan super lain yang akan kita jelajahi sebentar lagi!

Uniknya, selama pembuatan, Anda dapat menyiapkan konten, data, dan transformasi pada konten dan data tersebut dengan menggunakan JavaScript dan memanfaatkan filter dan kode pendek (kita akan membicarakannya nanti). Sekali lagi, ini semua terjadi tanpa menambahkan sisi klien bundel JavaScript, sambil tetap mengaktifkan penggunaan JavaScript sebagai bahasa templating.

Catatan Penting : Anda dapat berhasil menggunakan Eleventy tanpa atau dengan pengetahuan JavaScript yang rendah.

Tidak seperti SSG lain seperti Gatsby, atau lingkungan seperti WordPress, sebagian besar situs Eleventy tidak memerlukan plugin apa pun. Ada beberapa plugin yang tersedia, tetapi tidak diperlukan untuk fungsionalitas penting.

Saat membangun dengan Eleventy, Anda dapat menambahkan fitur sesuai kebutuhan. Faktanya, Anda bisa menggunakan HTML dan tidak pernah bekerja dengan bahasa templat lainnya. Sebelas hanya serumit yang dibutuhkan proyek Anda!

Memahami Konsep Sebelas Esensial

Mari membahas beberapa terminologi dan konsep yang akan membantu Anda sukses dalam membuat proyek Eleventy Anda.

Tata Letak Dan Template

Anda mungkin menganggap istilah-istilah ini dapat dipertukarkan, tetapi dalam konteks Eleventy, mereka memiliki makna kontekstual:

• Template adalah istilah umum untuk semua file konten.
• Tata letak adalah templat khusus yang membungkus konten lain.

Misalnya, template merujuk ke semua file Markdown Anda, sedangkan tata letak mungkin berupa file Nunjucks yang berisi boilerplate HTML5 dan slot untuk konten template. Kita akan belajar bagaimana membuatnya bekerja di bagian memulai.

Filter dan Kode Pendek

Ini adalah cara tambahan untuk memodifikasi keluaran konten, dan membuat komponen template yang dapat digunakan kembali. Mereka tersedia untuk digunakan dengan template Nunjucks, Liquid, Handlebars, dan JavaScript. Filter dan kode pendek didefinisikan di dalam .eleventy.js .

Di luar variabel dan operator yang tersedia dalam bahasa templating pilihan Anda, Eleventy telah menyatukan konsep filter di seluruh bahasa yang terdaftar sebelumnya. Filter mengubah konten dalam beberapa cara khusus untuk tipe konten. Misalnya, Anda dapat membuat filter yang dimaksudkan agar string menjadi huruf besar. Atau Anda mungkin memiliki filter yang dimaksudkan untuk digunakan pada array untuk mengubah apa yang dikembalikan, seperti memilih item acak. Beberapa filter disediakan oleh Eleventy, beberapa di antaranya akan kita gunakan dalam tutorial memulai.

Kode pendek memungkinkan pembuatan bagian templat yang dapat digunakan kembali dan dapat menerima argumen. Mereka dapat berdiri sendiri atau berpasangan, artinya mereka membungkus konten dengan tag awal dan akhir.

Salah satu kode pendek favorit saya adalah membuat tahun ini — artinya tidak ada lagi tahun hak cipta yang kedaluwarsa di catatan kaki Anda! Berikut cara membuat kode pendek year :

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

Untuk menggunakannya dalam template Nunjucks atau Liquid terlihat seperti ini: {% year %} .

Anda dapat meninjau Eleventy docs untuk contoh kode pendek yang dipasangkan.

Koleksi

Koleksi adalah grup konten terkait, dan biasanya dibuat dalam frontmatter dengan mendefinisikan tags . Opsi sintaks tag mencakup string tunggal, larik baris tunggal — ["tagA", "tagB"] — untuk kelipatan, atau daftar gaya YAML untuk menetapkan beberapa tag. Misalnya, saya dapat membuat koleksi "halaman" dengan menambahkan frontmatter berikut ke semua konten yang ingin saya sertakan dalam koleksi itu:

 --- tags: pages ---

Setelah Anda menentukan koleksi, Anda dapat mengaksesnya melalui bahasa templating pilihan Anda dalam objek collections global. Untuk mengakses koleksi "halaman" kami akan terlihat seperti collections.pages . Ini mengembalikan larik dari data koleksi itu, sehingga Anda dapat melakukan operasi larik seperti mengulangnya seperti untuk menghasilkan daftar tautan atau kartu penggoda artikel. Anda bahkan dapat menekan keluaran file normal dan hanya menggunakan kumpulan untuk mengelola tampilan data, yang berguna untuk mengelola konten situs satu halaman.

Data Khusus

Sejauh ini kita telah berbicara tentang membuat konten sebagai file, tetapi Eleventy juga membuatnya sangat mudah untuk memelihara sumber data yang berbeda. Ini disebut "data khusus" dan berfungsi sebagai ekspor modul JavaScript atau file JSON di direktori _data .

Data khusus dapat digunakan untuk:

• Tentukan larik JSON dasar.
• Mengembalikan hasil operasi pengambilan.
• Ambil dan format ulang konten dari CMS tanpa kepala.

Eleventy membuat semua data dari dalam _data tersedia di bawah variabel yang cocok dengan nama file. Misalnya, jika saya membuat posts.json maka saya dapat mengaksesnya di template saya sebagai posts . Menggunakan Nunjucks, berikut adalah contoh perulangan atas data posts :

 {% for post in posts %} {{ post.title }} {% endfor %}

Pagination Dan Membuat Halaman Dari Data

Dalam istilah Sebelas, pagination mengacu pada iterasi pada kumpulan data dan mendefinisikan template untuk output dari "potongan" data itu. Ini dilakukan dengan file khusus yang mendefinisikan pagination dalam frontmatter. File juga mencakup pengaturan keluaran yang Anda inginkan untuk data, yang berarti itu juga menjadi templatnya sendiri. Kami dapat menentukan tata letak untuk mengirim konten dan juga menambahkan tag untuk membuat koleksi untuk kemudahan referensi dan fleksibilitas untuk output.

Catatan : Jika Anda menggunakan data khusus untuk mengambil konten dari CMS, maka pagination adalah metode Sebelas yang Anda cari untuk mengubah data tersebut menjadi halaman secara dinamis.

Berikut adalah contoh referensi data kustom posts kami yang akan kami asumsikan kami ambil melalui pengambilan dari CMS tanpa kepala. Yang penting, size diatur ke 1, yang berarti setiap "potongan pagination" harus menghasilkan satu halaman output. Kami kemudian menggunakan alias untuk membuat referensi ke item saat ini di loop pagination, dan kemudian menggunakan referensi itu dalam definisi permalink dan badan template.

File yang mendefinisikan pagination dapat hidup di mana pun Anda inginkan dalam direktori input Anda. Preferensi organisasi saya adalah membuat direktori generate , lalu beri nama sama dengan koleksi yang akan dibuatnya. Pertimbangkan yang berikut ini sebagai src/generate/posts.njk :

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

Dalam hal ini, tautan permalink menetapkan halaman untuk menjadi keluaran langsung dari akar situs. Anda dapat mengubah ini untuk menambahkan awalan seperti /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} , misalnya.

Selain itu, jika Anda ingin semua halaman yang dihasilkan tersedia dalam koleksi yang dibuat oleh tag, Anda harus menyetel addAllPagesToCollections ke true untuk menyertakan lebih dari item pertama.

Terakhir, jika konten Anda masuk sebagai Markdown alih-alih HTML yang telah dikompilasi sebelumnya, Anda harus menggunakan templateEngineOverride . Dalam cuplikan contoh, saya telah menyetelnya ke njk, md yang berarti konten template perlu diproses baik sebagai Nunjucks untuk mengonversi variabel, dan kemudian Penurunan harga untuk mengkompilasi konten yang dikembalikan dalam variabel.

Jika Anda bertanya-tanya apa artinya safe , kita akan mempelajarinya selanjutnya!

Bagaimana Memulai Dengan Eleventy

Baiklah, jadi Anda siap untuk memulai proyek Eleventy pertama Anda! Tutorial singkat ini akan membantu Anda mendapatkan struktur awal untuk melanjutkan pembangunan. Kita akan menggunakan konsep yang telah kita pelajari dan menambahkan beberapa ide baru juga.

Catatan penting pertama di sini adalah Eleventy adalah paket tercakup, jadi inilah perintah install:

 npm install @11ty/eleventy

Selanjutnya, kemudahan praktis yang ingin saya lakukan adalah menambahkan skrip berikut ke dalam package.json saya :

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

Seperti disebutkan sebelumnya, flag --serve akan mengaktifkan server lokal melalui BrowserSync.

Preferensi saya adalah memperbarui direktori input/output seperti yang telah kita lihat, jadi sekarang saatnya untuk membuat beberapa konten di dalam src atau direktori input yang Anda pilih.

Untuk mempersiapkan proyek kita agar lebih fleksibel dan terukur sejak awal, saya sarankan untuk membuat setidaknya satu layout yang berisi boilerplate HTML5. Tata letak perlu didefinisikan dalam yang langsung disebut _includes , yang merupakan salah satu dari segelintir direktori yang diharapkan.

Sebuah konvensi yang akan sering Anda temukan di antara para pemula adalah memanggil layout base ini. Saya memiliki preferensi untuk menjadikannya file Nunjucks.

Berikut adalah contoh base.njk :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

Kurung kurawal ganda adalah sintaks Nunjucks untuk variabel. Di sini, kami telah menyiapkan variabel title masuk yang akan segera diberikan melalui materi depan. Variabel content disediakan oleh Eleventy dan menandai slot di mana semua konten materi non-depan yang masuk harus pergi. Yang penting, ini digunakan bersama dengan filter safe yang disediakan yang mencegah HTML yang dikompilasi agar tidak lolos versus dirender.

Sekarang saatnya untuk membuat indeks situs kita, yang akan kita tambahkan sebagai index.md :

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

Perhatikan bahwa di bagian depan kami menambahkan judul kami, dan juga mendefinisikan tata letak.

Pada titik ini, kami dapat menjalankan proyek kami dengan skrip yang kami tambahkan: npm start . Ini akan memicu BrowserSync untuk menyiapkan localhost:8080 (jika tersedia) tetapi Anda harus membukanya secara manual di browser. Lihat tip cepat ini jika Anda ingin membuka browser secara otomatis.

Langkah penting terakhir adalah menambahkan stylesheet. Saat ini, CSS tidak dikenali sebagai tipe file yang disertakan secara otomatis sehingga kami akan memiliki satu langkah konfigurasi tambahan setelah kami membuat stylesheet kami.

Anda dapat menambahkan file CSS di mana pun Anda inginkan di direktori input Anda, seperti css/style.css . Kemudian, buka .eleventy.js (atau buat di root proyek jika Anda tidak melakukan penyesuaian input/output) dan tambahkan yang berikut ini:

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

Pertama, kita tambahkan direktori css sebagai “passthrough copy” yang berarti Eleventy harus memasukkannya ke dalam push ke direktori output. Kemudian kami juga menambahkannya sebagai "target tontonan" sehingga saat kami membuat perubahan pada gaya kami saat menjalankan perintah start kami, Eleventy akan memicu pembangunan kembali untuk memperbarui situs lokal kami.

Terakhir, kita perlu ingat untuk menambahkan tautan ke stylesheet kita di dalam tata letak base kita:

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

Saat kami menentukan lokasi stylesheet, kami meneruskannya melalui filter url Eleventy yang akan menyesuaikan jalur file relatif sesuai kebutuhan saat dibuat.

Selanjutnya, mari buat jenis posting "halaman" untuk dijelajahi lebih banyak menggunakan koleksi dan tata letak. Untuk melakukannya, tambahkan direktori pages dan buat satu atau dua file penurunan harga, termasuk kunci depan-materi title tetapi bukan tata letak.

Kita akan menggunakan metode yang sedikit berbeda untuk mendefinisikan tata letak kali ini — file direktori data . File ini umumnya diformat sebagai JSON dan memungkinkan kami untuk menambahkan data yang harus diterapkan ke semua file dalam direktori, yang mencegah duplikatnya di seluruh file. File harus diberi nama yang sama dengan direktori yang akan digunakan, jadi buat file pages.json dan tambahkan konten berikut:

 { "layout": "page.njk", "tags": "pages" }

Kami juga telah maju dan menetapkan tag untuk membuat koleksi "halaman". Tapi layout yang kita definisikan sebenarnya belum ada, jadi buat _includes/page.njk dan tambahkan yang berikut ini:

 --- layout: base.njk --- <article> {{ content | safe }} </article>

Di sini kita menggunakan konsep Eleventy dari layout chaining untuk dapat menggunakan kembali template base kita tetapi juga menambahkan elemen unik untuk layout page kita, yaitu <article> . Ini berarti bahwa semua konten halaman kita akan menggunakan tata letak page dan tata letak base .

Rantai tata letak mengurangi duplikasi dengan memungkinkan penggunaan kembali pelat ketel dan struktur tata letak lokasi dasar.

Sekarang kita telah membuat konten untuk jenis konten pages dan mendefinisikannya sebagai koleksi "halaman" melalui tag, mari kita lihat bagaimana kita dapat mengakses koleksi itu. Di sini, kita akan menggunakan Nunjucks untuk mengulang koleksi dan menampilkan daftar tautan ke setiap halaman. Loop ini akan ditambahkan dalam file index.md kami.

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

Kami telah melakukan sesuatu yang unik yaitu bahwa bagian dalam loop benar-benar beralih kembali ke penurunan harga untuk merender tautan. Ini bukan cara yang diperlukan untuk menangani skenario ini, tetapi ini bisa sangat berguna! Terkadang, tergantung pada kerumitannya, ini mungkin tidak berhasil. Alasan sebenarnya adalah bahwa perender Markdown default ke bahasa template Liquid , jadi jika Anda menggunakan fitur Nunjucks di luar loop dasar, Anda harus memberi tahu Eleventy cara memproses file.

Di bagian pagination sebelumnya, kita sebenarnya sudah melihat solusi untuk ini. Dan itu adalah dengan menggunakan templateEngineOverride untuk menunjukkan bahwa file tersebut harus diproses sebagai Nunjucks dan Markdown. Solusi lengkap berikut harus ditempatkan di bagian depan template: templateEngineOverride: njk, md .

Pada titik ini, Anda telah membuat situs multi-halaman dasar! Jika Anda perlu menggunakan data eksternal, lompat kembali ke bagian pagination.

Cara Lain Untuk Memulai Proyek Sebelas

Sementara beberapa generator dan lingkungan situs statis lainnya seperti WordPress memiliki konsep "tema", Eleventy menggunakan istilah "pemula". Ada koleksi yang terus bertambah untuk dipilih, dan banyak yang dapat ditemukan di daftar dalam Eleventy docs.

Preferensi saya adalah menggunakan Sass dengan proyek Eleventy saya, dan saya memiliki starter Sass yang tersedia jika Anda ingin melihat cara menambahkannya ke dalam proses pembuatan Anda. Orang lain dapat memilih untuk menambahkan Gulp jika mereka terbiasa dengan pipeline build untuk aset dan pemrosesan.

Saya juga telah membuat starter minimal yang menyertakan fitur yang dibahas dalam artikel ini dan memiliki kesamaan dengan hasil tutorial. Ini juga memiliki contoh kecil mengambil data eksternal, dan menunjukkan cara menambahkan sebagian untuk menampilkan navigasi situs berdasarkan koleksi.

Memperluas Dasarnya

Setelah Anda bereksperimen dengan membuat situs pertama Anda dengan beberapa konten dasar dan mungkin beberapa data khusus, mengetahui cara tambahan untuk bekerja dengan konten itu akan sangat membantu. Berikut adalah ikhtisar singkat tentang beberapa konsep lain yang harus diperhatikan.

Mengubah Jenis Output File Dengan Permalinks

Saya sebutkan sebelumnya bahwa permalink memiliki kekuatan super. Dan itu adalah bahwa Anda dapat menggunakannya untuk menghasilkan jenis file non-HTML.

Dua contoh yang berguna adalah membuat umpan RSS dan peta situs, yang keduanya biasanya berupa file XML. Apa yang benar-benar hebat adalah Anda dapat terus menggunakan bahasa templat pilihan Anda untuk membantu menghasilkan file-file itu, sehingga Anda dapat mengulang data halaman dengan Nunjucks untuk menjaga umpan RSS Anda tetap segar, misalnya.

Menyesuaikan Koleksi

Terkadang menggunakan tag untuk membuat koleksi mungkin tidak cukup. Atau, Anda mungkin ingin membuat variasi terfilter dari koleksi yang ada. Kita dapat mengubah atau membuat koleksi dengan menggunakan serangkaian fungsi yang disediakan. Ini akan tinggal di file konfigurasi .eleventy.js .

Dalam contoh ini, kami menggunakan fungsi addCollection untuk memfilter item dalam koleksi yang ada. Koleksi baru akan didasarkan pada keberadaan customKey di bagian depan. Kunci ini dikembalikan dari objek data yang dilampirkan ke semua konten Eleventy yang dihasilkan.

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

Anda dapat meninjau cara lain untuk membuat, memodifikasi, dan menggunakan koleksi di Eleventy docs.

Bekerja dengan Data Cascade

Eleventy memiliki konsep yang lebih lengkap tentang bagaimana data dikompilasi untuk template yang disebut kaskade data yang baru saja kita mulai jelajahi dalam panduan ini. Anda akan mendapatkan hasil maksimal dari Eleventy jika Anda meninjau cara kerjanya, mulai dari dokumen. Ben Myers juga memiliki panduan yang sangat baik untuk memahami kaskade data.

Direkomendasikan Sebelas Plugin

Di intro, saya secara singkat menyebutkan ada plugin yang tersedia, tetapi tidak selalu dibutuhkan. Namun, ada beberapa yang cenderung saya gunakan di sebagian besar proyek, yang meliputi:

• @11ty/eleventy-plugin-rss Jika Anda ingin memiliki RSS feed, plugin resmi ini menyediakan beberapa filter untuk membantu Anda menghasilkan feed. Repo tertaut mencakup umpan sampel, yang mungkin juga Anda temukan digunakan dalam beberapa permulaan.
• @11ty/eleventy-plugin-syntaxhighlight Alih-alih memuat Prism sebagai skrip untuk penyorotan kode, plugin ini memungkinkan pemrosesan tersebut diterapkan sebagai bagian dari proses pembuatan Eleventy. Ini berarti blok kode diubah untuk menyertakan kelas untuk menerapkan tema Prism sebelumnya, jadi Anda hanya perlu menambahkan tema CSS Prism pilihan Anda.
• @11tyrocks/eleventy-plugin-social-images Sebuah fitur yang saya cari di awal eksplorasi Eleventy saya adalah kemampuan untuk menghasilkan gambar berbagi media sosial. Ini mengarahkan saya untuk membuat plugin yang menggunakan Dalang di belakang layar untuk mengambil snapshot. Plugin ini dilengkapi dengan template bawaan serta opsi konfigurasi untuk menentukan file template Anda sendiri.

Saya juga merekomendasikan untuk membiasakan diri dengan plugin Eleventy resmi lainnya karena mereka memenuhi kebutuhan umum lainnya termasuk navigasi dan penanganan gambar.

Memutuskan Apakah Eleventy Tepat Untuk Proyek Anda

Sebelas, seperti kebanyakan situs statis, adalah yang terbaik untuk konten yang biasanya tidak perlu disajikan secara dinamis atau sesuai permintaan. Ini tidak berarti semua situs harus statis, atau tidak ada cara untuk membuat konten dinamis. Anda masih dapat memuat JavaScript untuk mengaktifkan konten dinamis seperti mengambil dari API atau membuat widget interaktif. Anda juga dapat menggunakan layanan seperti IFTTT atau Zapier untuk memfasilitasi pembangunan kembali situs Anda jika host Anda mendukung pembuatan webhook dan Anda memiliki bagian yang ingin Anda segarkan sesuai jadwal.

Berkat data kustom dan pagination, kami melihat bahwa mudah untuk memasukkan data eksternal seperti dari CMS tanpa kepala atau API lainnya. Jadi meskipun akan disajikan secara statis, Anda masih memiliki banyak fleksibilitas di mana Anda menarik konten dan bagaimana Anda mengelolanya.

Hal favorit saya tentang Eleventy adalah bahwa itu tidak memaksakan banyak pendapat tentang bagaimana saya harus menyusun situs saya, di luar beberapa direktori yang diharapkan yang kami bicarakan untuk _includes dan _data (dan Anda juga dapat memperbarui konvensi penamaan mereka). Ini juga dapat membantu jika Anda ingin memigrasi situs dan berpotensi memindahkan beberapa struktur file yang ada juga. Namun, jika Anda lebih suka arsitektur yang lebih berpendirian, Anda mungkin mencari opsi yang berbeda.

Saya juga menikmati bagaimana saya dapat membentuk Eleventy agar sesuai dengan model mental saya untuk proyek tertentu dengan memanfaatkan beberapa bahasa templating serta filter, kode pendek, dan tata letak. Pemula juga membantu memberikan dorongan sehingga Anda dapat fokus pada apa yang benar-benar penting: konten Anda. Dan kinerja tinggi output statis murni juga merupakan manfaat besar.

Jika Anda membutuhkan sedikit lebih banyak dalam proses pembuatan, Anda dapat menambahkan alat lain yang sudah dikenal seperti Webpack, Gulp, atau Parcel. Anda mungkin dapat menemukan starter yang sudah menyertakan hal-hal itu. Ingatlah bahwa Anda juga dapat memanfaatkan skrip Node yang sudah melekat pada proses pembuatan Eleventy.

Eleventy sangat mampu menangani pembuatan halaman dalam jumlah besar. Ini telah digunakan untuk beberapa situs besar dan kompleks seperti web.dev Google dan situs pemasaran Netlify. Saya juga menggunakan Eleventy untuk beberapa tujuan yang tidak biasa, seperti email dan pembuat komponen web, bersama dengan beberapa lainnya yang dijelaskan dalam ikhtisar ini.

Sumber daya tambahan

Saya harap panduan ini telah meningkatkan minat Anda dan mempersiapkan Anda untuk mulai menggunakan Eleventy! Ini mencakup banyak poin yang menurut saya agak sulit untuk diungkapkan ketika saya membuat proyek pertama saya dengannya. Sejak saya pertama kali menemukan Eleventy pada April 2020, saya telah membangun lebih dari 20 Eleventy proyek yang menghitung permulaan, plugin, proyek sampingan, dan materi kursus. Banyak dari mereka dapat ditemukan di situs saya 11ty.Rocks yang juga memiliki tutorial dan tips. Sebelas adalah sesuatu yang sangat saya sukai untuk didiskusikan, jadi jangan ragu untuk menghubungi Twitter!

Berikut ini adalah lebih banyak sumber daya untuk membantu Anda dalam perjalanan Anda untuk belajar dan mendapatkan hasil maksimal dari Eleventy:

• Andy Bell menawarkan kursus berbayar yang sangat komprehensif — “Pelajari Sebelas Dari Awal”.
• Seri tutorial Tatiana Mac, dimulai dengan "Panduan Pemula untuk Eleventy", memberikan penjelasan menyeluruh yang mengasumsikan tidak ada pengalaman sebelumnya dengan generator situs statis.
• Bryan Robinson menawarkan kursus YouTube untuk mengubah tema HTML gratis menjadi situs Eleventy.

Akhirnya, saya ingin mencatat bahwa komunitas Eleventy kecil tapi aktif! Jika Anda mengalami kesulitan menemukan beberapa informasi, Anda dapat men-tweet pertanyaan Anda ke akun resmi @eleven_ty. Pencipta Eleventy, Zach Leatherman, dengan cepat menjawab atau RT pertanyaan untuk membantu Anda kembali!