mrfdn.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 - Lalu lakukan beberapa langkah setup nya.
deno run -AWelcome 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 1Welcome to my pageTapi 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.
PakarPBN
A Private Blog Network (PBN) is a collection of websites that are controlled by a single individual or organization and used primarily to build backlinks to a “money site” in order to influence its ranking in search engines such as Google. The core idea behind a PBN is based on the importance of backlinks in Google’s ranking algorithm. Since Google views backlinks as signals of authority and trust, some website owners attempt to artificially create these signals through a controlled network of sites.
In a typical PBN setup, the owner acquires expired or aged domains that already have existing authority, backlinks, and history. These domains are rebuilt with new content and hosted separately, often using different IP addresses, hosting providers, themes, and ownership details to make them appear unrelated. Within the content published on these sites, links are strategically placed that point to the main website the owner wants to rank higher. By doing this, the owner attempts to pass link equity (also known as “link juice”) from the PBN sites to the target website.
The purpose of a PBN is to give the impression that the target website is naturally earning links from multiple independent sources. If done effectively, this can temporarily improve keyword rankings, increase organic visibility, and drive more traffic from search results.