Blog Minimum Viable (Minimum viable blog)

 (ostwilkens.se)
6 poin oleh GN⁺ 2025-05-04 | 5 komentar | Bagikan ke WhatsApp
  • Tujuannya adalah implementasi minimal untuk membangun blog pribadi sebagai halaman statis di atas domain yang sudah dimiliki, sekaligus memenuhi kebutuhan penambahan konten dan SEO dasar
  • Implementasinya berjalan sederhana dengan template.html kecil, markdown2, render.py yang dibuat dengan meminta O1, serta penulisan artikel dalam Markdown
  • Templat hanya menggunakan HTML/CSS dasar seperti system-ui, lebar maksimum 70ch, color-scheme: light dark, viewport, dan UTF-8
  • render.py mengonversi ./posts/{post}/eng.md menjadi HTML, menyesuaikan path gambar, lalu membuat ./blog/{post}.html dan index.html
  • Menunjukkan bahwa tanpa Jekyll, Ghost, atau WordPress pun, kita bisa membuat blog yang dapat dioperasikan hanya dengan rendering statis dan hosting

Kebutuhan blog minimal dan susunan nyatanya

  • Titik awalnya adalah empat kebutuhan
    • Menggunakan domain yang sudah dimiliki
    • Mengikuti standar web modern dan memiliki SEO yang layak
    • Penambahan konten baru sangat mudah
    • Semua halaman dibangun secara statis
  • Alur implementasi nyatanya sederhana
    • Menulis template.html kecil
    • Menjalankan pip install markdown2
    • Meminta O1 membuat skrip render.py
    • Menulis artikel, lalu melakukan rendering dan hosting
  • Tidak menggunakan engine blog yang sudah ada seperti Jekyll, Ghost, atau WordPress

Templat dan skrip rendering

  • template.html hanya berisi struktur dokumen HTML dasar dan CSS minimal
    • Menentukan skema warna terang/gelap dengan color-scheme: light dark
    • Gaya isi halaman diatur dengan system-ui, sans-serif, lebar maksimum 70ch, tinggi baris 1.5, dan ukuran font 1.25em
    • Menggunakan tautan ke beranda dengan id="head-link" dan placeholder {{ content }}
  • render.py mengonversi artikel Markdown menjadi HTML dengan markdown2
    • Direktori input adalah ./posts, dan direktori output adalah ./blog
    • Setiap artikel dibaca dari ./posts/{post_directory}/eng.md
    • Header # pertama digunakan sebagai judul artikel
    • Markdown dikonversi dengan opsi fenced-code-blocks dan header-ids
    • <img src=" pada path gambar diubah agar mengacu ke /posts/{post_code}/
    • {{ content }} pada templat diganti dengan HTML hasil konversi, dan string judul juga diganti dengan judul artikel
  • Halaman indeks juga dibuat oleh skrip yang sama
    • greetings.md terlebih dahulu dikonversi menjadi HTML
    • Judul tiap artikel dibaca, lalu daftar tautan ke /blog/{post_code}.html ditambahkan
    • Hasil akhirnya disimpan sebagai index.html
  • Artikel ditulis secara manual pada 2025-03-31

Bacaan terkait

5 komentar

 
ifmkl 2025-05-07

Saat ini saya juga mengelola blog saya persis seperti di atas. Saya membuat dan menggunakan SSG yang memenuhi kebutuhan pribadi saya. Demi memanfaatkan fitur gambar thumbnail, kategori, dan tag, saya menambahkan fungsi kustom satu per satu. Gambar yang dilampirkan juga secara otomatis dikonversi ke webp lalu dirujuk, dan berkat itu saya sangat puas dengan kecepatan rendering-nya.
 
winterjung 2025-05-07

Oh, jadi fitur kustom seperti itu Anda tambahkan sendiri sambil menulis kodenya? Saya juga selalu ingin melakukannya sendiri, tetapi sering ragu karena fitur ekstensi dan plugin yang disediakan framework blog SSG yang selama ini saya gunakan.
 
ifmkl 2025-05-07

Kalau mengurangi ambisi dan hanya menyisakan yang benar-benar perlu, sisanya tidak terlalu sulit. Bahkan untuk SSG, kalau diminta ke AI, kodenya akan dituliskan semuanya, dan kalau diminta menambahkan fitur, sebenarnya semuanya juga bisa ditambahkan haha
 
ndrgrd 2025-05-04

Kalau cuma pilih font yang bagus, ternyata lumayan enak dilihat.
 
GN⁺ 2025-05-04
Opini Hacker News

  • Saya teringat bagan dari tulisan blog ini: https://molodtsov.me/2023/02/how-to-start-your-blog-in-2023/
    Setelah terperosok ke rawa static site generator (SSG), sebagian besar waktu saya malah dihabiskan untuk menulis dan mengutak-atik SSG itu sendiri, alih-alih menulis hal yang semula ingin saya tulis atau mengerjakan hal yang semula ingin saya lakukan
    Akhirnya saya membuang SSG, memasang WordPress, lalu berhenti memikirkannya, dan rasanya sangat membebaskan
    Kalau tujuannya memang mengutak-atik dan menulis tentang prosesnya, itu tidak masalah; orang yang tidak terganggu menulisnya oleh kegiatan mengutak-atik juga tidak masalah, tetapi saya bukan orang seperti itu
    Hal terakhir yang dibutuhkan saat ingin menulis adalah alasan untuk menunda

    • WordPress pada 2025 punya dua sifat berbahaya sekaligus
      WordPress dan semua pluginnya bisa diretas jika tidak terus diperbarui, dan BDFL adalah orang yang bisa memblokir pengiriman update keamanan atau akses untuk menerimanya hanya karena alasan pribadi yang sepele
      Situs statis tidak punya kerentanan keamanan yang perlu dipatch, jadi meski proyek SSG benar-benar runtuh karena masalah pengelolanya, itu tidak terlalu berpengaruh; tetapi di WordPress hal ini menjadi sangat penting
    • Saya juga mirip. Dulu sekali saya mulai dengan DokuWiki, lalu memutuskan mencoba GitHub Pages; setelah memindahkan semuanya, saya butuh pencarian, jadi saya menambahkan Google Custom Search
      Karena perlu cara agar pengunjung bisa meninggalkan komentar, saya menambahkan Disqus, dan akhirnya menjadi campuran berantakan dari berbagai layanan dan banyak JavaScript
      Beberapa tahun lalu, demi memiliki data sendiri lagi dan tidak bergantung pada layanan eksternal, saya mengekspor komentar Disqus, sempat mengutak-atik Serendipity, lalu akhirnya menetap di WordPress
      Saya bisa mengimpor komentar dan halaman Markdown, dan ada juga plugin yang menerbitkan semuanya ke Fediverse
      Setelah membuatnya berjalan dengan SQLite dan menyalakan update otomatis, pada dasarnya hampir tidak perlu pemeliharaan
    • Apakah ini spam blog? :) URL-nya https://rakhim.org/honestly-undefined/19/
    • Saya setuju, tetapi menurut saya dalam 95% kasus WordPress itu berlebihan
      Terlalu banyak pemeliharaan yang dibutuhkan untuk fitur-fitur yang kemungkinan besar tidak diperlukan. Jika tidak dijaga tetap terbaru, situs bisa menjadi bagian dari botnet
      Untuk kebanyakan blog, static site generator sudah cukup, dan kalaupun perlu pemeliharaan, saya bisa melakukannya pada waktu yang saya inginkan
    • Saya cukup puas dengan nikola: https://getnikola.com/
      Yang benar-benar saya inginkan hanyalah satu perintah untuk menerbitkan dan cara mudah menyeret gambar ke dalam tulisan; yang pertama berjalan baik, dan yang kedua bisa dilakukan lewat fitur penerbitan Jupyter Notebook
      Yang sama sekali tidak saya inginkan adalah beban seperti database hanya untuk “mengirim HTML ke klien”

  • Bagus, tetapi agar bisa disebut blog, saya merasa perlu dua fitur kecil lagi
    Pertama, tulisan harus diurutkan berdasarkan tanggal dengan tulisan terbaru di depan, dan tanggalnya harus ditampilkan di suatu tempat. Untuk tetap menjaga konfigurasi minimal, cukup gunakan metadata dari file tulisan, misalnya waktu pembuatan
    Kedua, tentu saja perlu feed RSS. Dengan skrip yang sudah ada dan template RSS minimal, sepertinya mudah membuat feed sederhana yang hanya berisi tautan dan judul

    • RSS memang bagus, tetapi menurut saya tidak seharusnya menjadi syarat wajib agar sesuatu diakui sebagai blog
      “Diikuti” tidak selalu baik, dan bisa menimbulkan tekanan untuk menyesuaikan diri dengan pembaca. Itulah faktor yang membuat media sosial menjadi buruk
    • Masuk akal
      Untuk nomor 1, saya cenderung membuat file berisi metadata dalam format seperti TOML secara otomatis
      Untuk nomor 2, RSS pasti akan saya tambahkan, tetapi bergantung pada nomor 1 :-)

  • Saya selalu menyukai situs web independen, dan situs saya sendiri juga dimulai dengan cara yang mirip sekitar 25 tahun lalu
    Saat itu satu-satunya teknologi yang layak yang saya tahu hanyalah Classic ASP, jadi saya membuatnya sesederhana mungkin hanya dengan ASP
    Sekarang situsnya berjalan sebagai situs yang digenerasikan secara statis dengan Common Lisp, dan sepertinya konfigurasi ini akan menjadi pengaturan jangka panjang: https://github.com/susam/susam.net/blob/main/site.lisp
    Memulai dengan sekumpulan halaman sederhana adalah cara yang baik untuk membuat situs web minimum viable, tetapi seiring waktu saya jadi membutuhkan fitur seperti feed RSS, daftar blog berdasarkan tanggal, indeks per tag, dukungan untuk konten non-blog seperti alat·game·demo, dan komentar tanpa pihak ketiga
    Setiap kali kebutuhan bertambah, source-nya juga ikut membesar; kode yang dulu hanya beberapa ratus baris kini menjadi sekitar 1300 baris Common Lisp
    Meski begitu, saya ingin tetap menjaganya pada level di mana seluruh kode masih bisa ditampung di kepala sekaligus, dan jika ada bug saya bisa menalar serta memperbaikinya dalam 10 menit
    Belakangan ini saya tergoda menambahkan blogroll yang menyediakan daftar tulisan dari para blogger favorit saya. Mungkin saja itu bisa menggantikan feed reader, tetapi saya berusaha berhati-hati agar tidak membesar menjadi sesuatu yang bahkan membaca email

    • Saya menempuh jalur yang hampir sama
      Source code-nya ada di sini: https://github.com/brilee/modern-descartes-v2/blob/master/ma...
      Termasuk feed RSS, daftar blog berdasarkan tanggal, sistem tagging, dan server pengembangan lokal dengan file watching dan recompilation
    • Jalur saya juga mirip, dan sebenarnya saya sudah mengulanginya beberapa kali
      Versi saat ini dipertahankan sebagai skrip Python kurang dari 1000 baris: https://github.com/llimllib/obsidian_notes/blob/c93b9b5c46fe...
    • Tepat sekali. Kemampuan untuk memutuskan “saya ingin membuat perangkat ini” lalu mengodekannya sendiri lebih baik daripada WYSIWYG mana pun
      Saya membuat halaman turunan seperti kumpulan tulisan, indeks, dan slideshow, serta variasi tag untuk orang dan video game
      Saya juga bisa mengendalikan sepenuhnya tampilan dan nuansa widget umum seperti galeri thumbnail atau kotak kutipan
    • Saya membuat fitur Flock di Lamb, yaitu fitur untuk menyindikasi feed ke blog saya. Saya membuatnya terutama sebagai alternatif bergaya multi-pengguna: https://github.com/svandragt/lamb
      Ini mungkin bisa menjadi referensi tingkat tinggi
    • RSS dan tanggal rasanya jelas akan dibutuhkan
      Ke depan saya mungkin juga ingin menyematkan shader dan web game, tetapi saya berharap kompleksitasnya tidak terlalu membengkak

  • Akan menyenangkan kalau browser mendukung text/markdown dan text/gemini secara native
    Kalau browser bisa merender PDF, rasanya tidak terlalu sulit untuk memasukkan formatter sederhana untuk konten Markdown/Gemini dan stylesheet yang bisa ditentukan pengguna
    Saat ini pun kita bisa menulis blog text/plain, tetapi itu bukan hypertext sungguhan dan merugikan dari sisi SEO. Mungkin bisa saja ada semacam keajaiban lewat header link
    Mendukung format lain akan menurunkan hambatan untuk menerbitkan dengan rapi dan mengembalikan kendali kepada pengguna

    • Rendering Markdown native di browser sayangnya tampak kecil kemungkinannya
      Pertama, browser-browser harus sepakat varian dan ekstensi Markdown mana yang akan dipakai. Markdown hampir seperti CSV di dunia format teks, karena semua orang memakainya dengan cara masing-masing
      Kalau terlalu minimal, akan ada keluhan bahwa itu tidak berguna; kalau memilih ekstensi, akan ada keluhan bahwa itu terlalu bengkak
      Bahkan jika mencoba membahas pro dan kontra jangka pendek maupun panjang secara hati-hati, pembicaraan bisa terhenti dengan ungkapan “jangan biarkan yang sempurna menjadi musuh yang baik”
      Kalaupun disepakati satu set fitur tertentu, masih patut dipertanyakan apakah itu benar-benar sepadan
      Membaca PDF langsung di browser memang cukup umum, tetapi manfaat membaca Markdown langsung kemungkinan hanya dirasakan oleh sebagian pengembang software di seluruh dunia dan kira-kira lima orang aneh
      Jadi saya rasa saya tidak akan terkejut jika seumur hidup tidak melihat rendering Markdown native di browser
    • Rendering PDF di browser dilakukan dengan JavaScript, atau setidaknya dulu begitu
      Ada juga library untuk XSLT yang bisa dipakai saat membutuhkan versi baru alih-alih dukungan native browser, dan ada library untuk berbagai format seperti jpegxl
    • Apakah Gemini juga punya format sendiri?

  • Kalau html_content = html_content.replace('Minimum viable blog', title), apakah setiap kali string Minimum viable blog muncul di tulisan, itu akan diganti dengan judul tulisan saat ini? Bukankah itu bug?

    • Benar, tangkapan bagus
      Kode di tulisan itu adalah draf pertama yang dibuat O1, dan string tersebut sudah diganti menjadi {{ title }}

  • Saya sudah bereksperimen dengan blog minimalis selama sekitar 15 tahun, dan ada beberapa trik yang saya pelajari
    Sesuatu seperti const title = lines.match(/# (.+)/)[1] saja sudah cukup, sehingga frontmatter bisa dihindari
    Blog-blog saya tidak pernah punya tulisan sebanyak itu sampai membutuhkan pagination, tag, kategori, atau pengurutan
    JSX cukup bagus sebagai builder string sisi server murni kalau memakai hack mencurigakan seperti https://immaculata.dev/guides/enabling-jsx.html
    Sekarang GitHub Pages juga sudah memudahkan penggunaan langkah build arbitrer alih-alih Jekyll dengan hal seperti https://immaculata.dev/guides/using-gh-pages.html
    highlight.js bisa dibilang raja syntax highlighting kode yang sangat mudah karena cukup menambahkan tiga baris ke HTML, sedangkan shiki keren tetapi lambat

  • Menggunakan framework blog statis standar seperti Hugo/Zola + Cloudflare Pages itu mudah
    Blog saya juga merupakan konfigurasi minimal di bawah 100KB dan memenuhi semua kriteria yang dicantumkan penulis asli
    Saya memakai tema Hugo Blog Awesome, mengikuti panduan 512kb, memeriksa ukuran halaman, serta menghapus gambar dan JS yang tidak perlu. Dari awal memang tidak banyak
    Referensi: https://512kb.club, https://radar.cloudflare.com/scan

  • Saya sempat menjalankan “MVB” untuk beberapa waktu, tetapi punya saya lebih sederhana
    Hanya satu halaman HTML, tulisan ditulis sebagai file .txt, dan beranda diperbarui secara manual
    Memang cukup bertele-tele, tetapi menurut saya tetap lebih mudah daripada berurusan dengan web modern
    Setelah itu saya pindah ke pendekatan yang lebih canggih, dan sekarang memakai Astro untuk situs pribadi dan blog; benar-benar luar biasa
    Di landing page-nya, Astro mengklaim sebagai platform terbaik untuk “situs yang berfokus pada konten”, dan setelah memakainya 6 bulan saya jadi setuju
    Astro menyediakan konvensi yang jelas dan mudah diikuti untuk hampir semua hal yang dibutuhkan dalam membuat blog, serta memangkas bagian-bagian yang tidak perlu

    • Astro benar-benar hebat. Saya tidak tahu kenapa belum lebih populer
    • Saya penasaran apakah memakai tema orang lain, atau membuatnya sendiri

  • Saya pernah bereksperimen di beberapa situs dengan Bun JS dan cara menaruh HTML di dalam string JavaScript
    Bun punya flag —hot yang membuat HTML statis dibuat ulang saat ada perubahan
    IntelliJ IDE mendeteksi komentar // language=html di atas string, lalu memformat HTML di dalamnya dan memberi penyorotan sintaks
    Dengan memakai fungsi JavaScript murni alih-alih bahasa templating, kita bisa menulis langsung logika yang dibutuhkan tanpa harus mencari tahu bagaimana melakukannya di bahasa templating

  • Karena muak dengan situs web yang terlalu gemuk dan lama dimuat, saya juga memakai pendekatan yang sangat mirip untuk blog saya: https://blog.borrego.dev
    Sumber: https://github.com/agubelu/blog

    • Saya sangat menyukainya dan tampilannya bagus. Bagaimana tampilannya di mobile?