Jurnal Kusaeni

• visit : kusaeni.com
• build with deno and lume3
• serving by deno deploy

Cara Install dan Build

1. Install Deno

curl -fsSL https://deno.land/install.sh | sh

atau bisa dengan package manager seperti brew, apt, dan sebagainya. jangan lupa untuk upgrade deno ke rilis terbaru deno upgrade. Repo ini memakai deno versi 2.9.7 (stable).

2. Clone repo ini baca dokumentasi untuk clone pada masing - masing git hosting.

$ git clone https://github.com/kuspoes/kusaenicom.git blog

perintah ini akan menyalin isi repo ini ke folder bernama blog

3. Install Lume dan build untuk pertama kali

$ cd blog
$ deno run -A https://lume.land/init.ts
$ deno task lume -s

perintah ini akan menginstall lume di sistem dan menjalankan lume untuk build dan serve di localhost:3000. jika sudah punya lume sebelumnya, boleh upgrade ke versi terkini dengan deno task lume upgrade. Repo ini mempergunakan lume versi 3.3.2 (latest).

kalo ingin mem-build saja gunakan

$ cd blog
$ deno task lume

Kostumisasi

Untuk mengkostumisasi data, silakan edit file _config.ts, _data.yml, dan atau di _src/_data/_metadata.json. Terutama di bagian nama domain, nama author, dan keterangan lainnya. Di file metadata.json, ubah bagian imgdia ke URL penyedia layanan gambar yang dipunyai. Tidak dirubah juga tidak masalah, hanya saja harus mengetik URL dari gambar secara lengkap saat menyisipkan di Lume.

Untuk merubah tema, silakan edit di _src/_theme, folder ini berisi bagian untuk template header, menu, dan footer. Folder images untuk logo, favicon, dan sebagainya, sedangkan layout adalah template layout untuk pelbagai jenis tipe artikel seperti jurnal, baca, dan foto. Template dalam .vto.

Folder assets di dalamnya ada file CSS, JS, dan fonts. Khusus font diambil sebagian dari Google Fonts namun untuk font berbayar tidak disertakan disini karena masalah lisensi.

Update: Font's dari Google Font's bisa dipakai dengan host di local, karena sudah dilisensikan gratis namun untuk menghargai sila sebut bahwa font's berasal dari Google Font's. Gunakan layanan dari Google Webfonts Helper untuk mempermudah self host font's-nya.

Tags

Di folder _src ada juga file tags.page.js file ini khusus untuk meng-generate page /tags yang berasoisasi dengan file tags.vto di folder _src/_theme/layout/tags.vto.

Component's

Berisi script untuk reuseable terutama untuk membuat relasi artikel dan buku. Dokumentasi tersedia di dalam masing - masing component, sebagai contoh untuk menampilkan related article:

{{ comp.relasi_artikel({ 
	judul: "Judul Artikel",
	teks: "", 
	format: "kanan | full", 
	heading: "" 
	}) 
}} 

Dengan keterangan: judul: judul artikel (case sensitive) format: defaultnya kiri tapi ada 2 pilihan lainnya yaitu kanan untuk float kanan atau full untuk mode penuh teks: masukkan teks sebagai deskripsi, jika tidak ada maka akan pakai ringkasan heading: jika URL menunjuk ke heading

component ini bisa di-insert ke dalam file markdown pada artikel yang ingin menampilkan relasi ke artikel yang lain. Bedanya dengan related article di layout jurnal.vto adalah penempatan component sangat fleksibel bisa ditempatkan di mana saja di dalam artikel.

TOC

Untuk menampilkan Table of Content (TOC) atau Daftar Isi, maka di frontmatter masukkan tocx: true sehingga Lume akan menampilkan Daftar Isi di bagian paling atas. Namun jika tidak suka posisi atau ingin menampilkan Daftar Isi di mana saja (fleksibel) maka gunakan template tags <#tocx#> di sembarang tempat yang kamu inginkan. Ingat hanya boleh ada 1 tag ini yang boleh dipakai di 1 artikel. Metode perpindahan posisi ToC ini diatur di file config.ts

Pixelfed

Di dalam index.vto ada bagian yang berfungsi menampilkan feed gambar dari Pixelfed, untuk kostumisasi edit file _plugins/pixelfed.ts. Pada baris ke 28 atomURL rubah ke alamat RSS/Atom dari halaman Pixelfed-mu. Kamu juga bisa merubah limit di baris ke 30. pixelfed.ts akan mengunduh data dan membuat file baru bernama pixelfed.json di bawah folder _src/_data. Isinya adalah url gambar dari pixelfed kamu.

Jika tidak ingin menampilkan sila rubah frontmatter di bagian atas index.vto, pilihan pxlfed: true akan menampilkan Pixelfed, sedangkan false akan menghilangkannya.

Fediverse

Ini agak sulit dijelaskan, tapi untuk bisa menampilkan komentar dari fediverse maka perlu membuat endpoint sebagai jembatan untuk tampilkan komentar, namun ini hanya berlaku untuk instan gotosocial jika pakai mastodon atau pleroma bisa langsung pakai. Ini semua karena scope API gotosocial yang belum bisa membedakan scope, akan tetapi sepertinya saat ini sudah bisa menerima scope read saja sehingga bisa langsung tanpa memakai endpoint sebagai pengaman. Namun ane belum coba.

Deploy

Repository ini kemudian di deploy ke Deno Deploy dengan script CI di .github/workflows . Silakan edit sesuai dengan preferensi. Untuk serve HTML saat di Deno Deploy mempergunakan file server.ts.

Di Deno Deploy terbaru sudah tidak diperlukan lagi Github Actions untuk push ke Deno Deploy namun Deno Deploy yang akan handle semua proses. Cukup tautkan saja repository Github ke Deno Deploy. Sehingga file main.yaml bisa saja dihapus atau meng-disable fungsi Github Action. Untuk informasi lebih lanjut silakan baca Lume migrasi ke Deno Deploy v2.

Deno Deploy akan ditutup sekitar bulan Maret 2027, karena perusahaan utamanya dijual ke Cloudflare dan membunuh Deno. F*ck! jadi ane juga akan hentikan push ke Deno Deploy.

Jika ingin mempergunakan layanan lainnya seperti Netlify, Vercel, atau Cloudflare Pages. Silakan merujuk pada Lume Docs: Deployment.

Per 2 Mei 2026, Ane pindahkan hosting ke Netlify karena di Deno Deploy gratisan dapatnya region EU dan US yang tentu saja akan membuat latency semakin tinggi yang berimbas akses ke situs (agak) tersendat. Netlify punya fitur edge di SEA harapannya bisa membuat akses lebih cepat. Jika pun tidak kemungkinan besar akan pakai self host atau CloudFlare.

Ane pindahkan lagi ke VPS sendiri pada 12 Oktober 2026, tidak ada alasan khusus hanya ingin mencoba saja. Netlify bagus dan ane rekomendasikan. Untuk unggah ke VPS ini ane pakai rsync yang langsung dijalankan setelah build di lokal. Perintahnya sudah nempel di deno.json seperti ini

    "vps": {
      "description": "Deploy ke VPS",
      "command": "deno task build && rsync -r _site/ poes@IPVPS:/home/poes/www1/kusaicom"
    },

Untuk path bebas, sebagai contoh ane taruh saja di /home/poes/www1/kusaicom, tapi untuk lebih amannya sebaiknya ditaruh di bawah /var/www

Tierhive memberikan layanan host static pages namun hanya bisa diakses dengan (s)ftp. Maka file tierhive.sh dibuat khusus untuk melakukan deploy. File ini mengakses environment variables khusus di file hv.env yang berisi konfigurasi untuk akses. File ini harus diabaikan git sehingga tidak terunggah.

Untuk deploy gunakan cara berikut ini:

$ deno task build
$ /bin/sh tierhive.sh

Repositori

Source code ini disimpan di:

1. Github (karena Netlify, Cloudflare, Deno Console hanya bisa dihubungkan dengan Github),
2. Codeberg (tidak update karena akun ane disilent sama mereka),
3. Brew BSD Cafe (best)
4. Le Git (self host sendiri CGIT)

Ada 2 branch draft dan main, perbedaannya draft untuk menyimpan perubahan sementara tanpa harus push ke Netlify dkk, sedangkan main sebaliknya.

TODO

• pastikan nama file gambar konsisten dan mudah diingat, tidak lagi ada nama acak di dalamnya.