Tutorial Lume - Static Site Generator nya Deno
Inilah Lume, static site generator yang berjalan di atas runtime Deno buat kamu yang suka kretif membuat halaman web statis.
JagoTekno.com - Lume hadir sebagai salah satu static site generator (SSG).
Dia sama seperti Hugo, tetapi fitur dan dokumentasinya masih kurang lengkap. Mungkin karena masih sedikit yang menggunakannya.
Untuk itu kali ini saya ingin menulis sedikit hal yang saya ketahui setelah mencoba membuat beberapa halaman static dengan Lume.
Lume hadir sebagai produk kretif Deno
Lume merupakan site site generator yang hanya bisa dijalankan jika sudah install Deno. Dengan kata lain, Lume berjalan di atas runtime Deno.
Cara menjalankan Lume
- Pastikan system sudah terinstall Deno
- Buat folder baru, lalu jalankan perintah ini
deno run -A https://lume.land/init.ts - Lalu lakukan beberapa langkah setup nya.
deno run -A https://lume.land/init.ts
Welcome to Lume v2.2.2!
? What kind of setup do you want?
❯ Basic
Basic + plugins
Install a theme
- Jalankan lume dengan perintah
deno task serve
Sangat simpel kan?
Tugas sekarang kita hanya perlu membuat halaman yang diperlukan.
Pada folder website Lume yang sudah dibuat di atas, buatlah sebuah halaman markdown (.md), misalnya index.md.
Kemudian isi kontennya dengan apa saja dengan format markdown.
Contoh:
---
title: Welcome
---
# Heading 1
Welcome to my page
Tapi bukan hanya file markdown saja yang bisa dibaca oleh Lume, tetapi file .jsx pun bisa. Silahkan buka dokumentasinya.
Di sini saya hanya ingin menuliskan hal yang instant.
Lume memiliki berbagai macam page layout
Jika sudah pernah menggunakan Hugo, maka anda akan familiar dengan folder layouts di sana.
Nah di Lume juga ada.
Kita bisa bebas kreasikan layout tiap halaman yang diinginkan, kemudian nanti tinggal dipanggil.
Misalnya kita ingin kalau halaman 1 layout nya berbeda dengan halaman 2, dan seterusnya, kita bisa membuat custom layout halamannya itu dengan sangat mudah, termasuk dengan CSS nya.
Layout ini sama seperti EJS view engine di ExpressJS.
Untuk membuat layout di Lume, kita hanya perlu membuat folder dengan nama layouts pada folder _includes file dengan extensi .vto. Itu adalah file layout yang bisa digunakan secara default.
Contohnya:
cd ./_includes/layouts
touch layout1.vto
Kemudian edit file layout1.vto dengan menambahkan format HTML dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ it.title || it.basename }}</title>
<link rel="stylesheet" href="/sass/style.css">
</head>
<body>
{{ content }}
</body>
</html>
Anda juga bisa berkreasi berbagai macam layout dengan view engine seperti JSX, PUG, ETA, page.js, page.ts, dan lain-lain.
{{ title }} akan merender title yang sudah diset pada frontmatter file markdown tadi, kemudian {{ content }} akan merender konten / artikel pada halaman markdown tersebut.
Mencoba SASS/SCSS di Lume
Saya mencoba set CSS dengan SCSS supaya menulis css jadi lebih rapih. Caranya cukup mudah, install SCSS dengan cara edit file _config.ts pada folder site lume anda:
import lume from "lume/mod.ts";
import sass from "lume/plugins/sass.ts";
const site = lume({});
site.use(sass());
export default site;
Kemudian buatlah sebuah file folder sass/ di root folder lume site anda.
Di dalamnya buat file style.scss yang diinginkan, lalu jangan lupa panggil pada file layout1.vto dengan file .css sebagai hasil kompilasi scss ke css.
Menggunakan file statis di Lume
File statis seperti file gambar, pdf, dan lain-lain bisa ditampilkan dengan static site generator Lume. Triknya adalah dengan menyalin / copy file tersebut ke site hasil kompilasi.
Tapi tenang, anda tidak perlu melakukannya secara manual karena Lume akan mengerjakan itu secara otomatis. Anda hanya perlu set ini pada file _config.ts:
import lume from "lume/mod.ts";
const site = lume({});
site.copy([".jpg", ".png", ".webp"]);
site.copyRemainingFiles();
export default site;
Kemudian dinamanapun anda memanggil file tersebut maka konten file statis tersebut akan tampil di layar.
Nested page di Lume
Jika di site Lume kita memiliki banyak halaman, maka sebaiknya kita membuat file halamannya pada sebuah folder.
Silahkan buat folder bernama pages pada root site Lume anda.
Kemudian di sana isi dengan berbagai macam file markdown. Maka Lume akan merender setiap halaman tersebut, berapapun banyaknya.
Nanti halaman akan bisa diakses dengan
- example.com/pages/halaman-1
- example.com/pages/halaman-2
- example.com/pages/halaman-3
Jika kita tidak ingin menampilkan pages pada link / url, buatlah sebuah file bernama _data.yml di folder pages.
Kemudian isi file tersebut dengan ini:
basename: ""
Nanti url akan berubah menjadi seperti ini:
- example.com/halaman-1
- example.com/halaman-2
- example.com/halaman-3
Nice.
Kesimpulan
Lume bisa digunakan sebagai static site generator. Cukup bagus untuk kamu yang suka kreatif membuat halaman html dengan tampilan yang dinamis.
Masih banyak yang bisa diexplore. Silahkan mencoba.
Rafi
- 15 year+ of Linux user.
- 5 years+ blogger and web developer.
Jika artikel yang dibuatnya ternyata bermanfaat, support dengan cara
