Memanfaatkan situs web statis untuk arsip kecil

 (alexwlchan.net)
4 poin oleh GN⁺ 2024-10-19 | 1 komentar | Bagikan ke WhatsApp
  • Untuk menemukan kembali dokumen, tangkapan layar, bookmark, dan media yang menumpuk secara lokal di kemudian hari, setiap koleksi kecil diberi situs web statis untuk dijelajahi
  • Setiap koleksi dibiarkan sebagai folder di disk, lalu file HTML di root dibuka di browser untuk memberikan metadata dan cara pengorganisasian yang lebih kaya daripada Finder
  • Ditulis manual tanpa web server, build system, dependensi, atau framework JavaScript; tiap situs paling banyak hanya sekitar beberapa ratus baris kode, sehingga cocok untuk proyek kecil
  • Hierarki folder yang ada, tag Finder, aplikasi “everything bucket”, dan alat buatan sendiri masing-masing punya kendala: memaksa hierarki, keterbatasan implementasi, perlu menyesuaikan cara berpikir dengan aplikasi, dan beban pemeliharaan
  • Pengorganisasian manual memang memakan waktu, tetapi membuat kita hanya memilih file yang benar-benar layak disimpan, dan kesederhanaan HTML menguntungkan untuk pelestarian jangka panjang

Melihat arsip lokal sebagai situs mini

  • Membuat situs web statis untuk tiap koleksi guna menjelajahi arsip lokal
    • dokumen hasil pindai
    • dokumen yang dibuat sendiri
    • tangkapan layar yang diambil
    • bookmark halaman web yang disimpan
    • file video dan audio yang disimpan
  • Tiap koleksi memiliki tampilan berbeda sesuai karakter filenya
    • koleksi tangkapan layar ditampilkan sebagai grid gambar
    • bookmark ditampilkan sebagai daftar tautan teks
    • video disusun sebagai daftar yang mencampurkan thumbnail dan teks
  • Tujuannya bukan membangun sistem yang rumit, melainkan membuat antarmuka penjelajahan file yang sedikit lebih baik daripada macOS Finder
    • lebih banyak metadata bisa dimasukkan ke halaman
    • bisa memakai cara pencarian dan pengorganisasian buatan sendiri

Cara menyusun dan pilihan teknologi

  • Setiap koleksi adalah satu folder di disk lokal, dan situs webnya adalah satu atau lebih file HTML di root folder tersebut
  • Saat digunakan, file HTML dibuka langsung di web browser
  • Skalanya sengaja dijaga kecil dan tingkat teknologinya rendah
    • tanpa web server
    • tanpa build system
    • tanpa dependensi
    • tanpa framework JavaScript
  • Semuanya ditulis manual, tetapi untuk proyek kecil ini tetap bisa dikelola
    • tiap situs web paling banyak hanya beberapa ratus baris kode
  • Karena hanya terdiri dari file di disk dan HTML, pendekatan ini dianggap punya peluang besar untuk bertahan lama
    • tetap mempertahankan kesederhanaan dan portabilitas struktur file folder
    • lalu hanya menambahkan sedikit fitur yang diperlukan di atasnya

Mengapa pendekatan sebelumnya tidak bertahan lama

  • Cara biasa dengan file dan folder memaksakan struktur hierarkis, dan setiap file harus berada tepat di satu tempat
    • ini cocok untuk sebagian data seperti kode
    • tetapi sulit merancang hierarki yang memuaskan untuk file media
    • kebingungan menentukan harus ditaruh di folder mana membuat desktop jadi berantakan
  • Tag kata kunci lebih disukai karena satu file bisa diberi banyak label dan ditemukan kembali dengan berbagai cara
    • macOS Finder juga mendukung tag, tetapi implementasinya dirasa belum cukup baik untuk dipakai dalam hal penting
  • Aplikasi “everything bucket” seperti DEVONThink, Evernote, dan Yojimbo juga tidak terasa cocok
    • terasa seperti harus mengubah cara berpikir agar sesuai dengan cara kerja aplikasi
  • Alat pengelolaan file buatan sendiri juga pernah dicoba setidaknya sekitar 12 kali, dan salah satu percobaan terakhir adalah docstore
    • memang lebih cocok dengan cara berpikir pribadi, tetapi menimbulkan beban pemeliharaan
    • setiap kali Python di-upgrade atau macOS diperbarui, selalu ada sesuatu yang rusak sehingga kode harus diperbaiki

Cara mengubah folder menjadi situs mini

  • Dengan menaruh file HTML yang berperan sebagai indeks di folder tingkat atas, semua file bisa ditampilkan dengan metadata dan tag sesuai keinginan
  • Pendekatan ini menyederhanakan struktur folder dan mengurangi beban untuk menemukan hierarki yang sempurna
    • file biasanya hanya dikelompokkan berdasarkan tahun atau huruf awal nama file
    • folder hanya dilihat saat menambahkan file baru, bukan untuk penjelajahan
    • saat mencari file, yang selalu dipakai adalah situs webnya
  • Situs web memungkinkan file ditemukan dengan berbagai cara melalui tag kata kunci, sambil menyembunyikan detail struktur folder yang sebenarnya
  • HTML dipilih sebagai teknologi yang fleksibel, rendah pemeliharaan, dan kecil kemungkinan menghilang
    • ini adalah teknologi dasar web
    • hampir semua komputer modern memiliki browser yang bisa merender halaman HTML
    • bahkan situs web pertama untuk tugas sekolah yang dibuat pada 2006 masih bisa dirender tanpa masalah di browser modern

Mengapa cocok untuk arsip “kecil”

  • Karena pengelolaan file, penulisan metadata, dan pembuatan viewer banyak dilakukan secara manual, pendekatan ini tidak terlalu skalabel untuk koleksi besar
  • Menyimpan beberapa ratus item pun membutuhkan waktu yang tidak sedikit, tetapi gesekan ini justru membantu memilih apa yang layak disimpan
    • membuat kita menilai apakah benar-benar layak dirapikan
    • membuat kita bertanya apakah file yang bahkan tidak ingin disimpan selama satu menit masih mungkin ingin dilihat lagi nanti
    • untuk file yang memang diputuskan akan disimpan, metadata ditulis dengan lebih cermat agar mudah ditemukan kembali
  • Sebelumnya, ribuan file menumpuk di folder besar yang kabur fungsinya, tidak benar-benar tertata, dan akhirnya tidak pernah dilihat lagi
  • Sekarang ada situs web kecil berisi beberapa ratus item, dengan item yang dipilih lebih hati-hati dan dijelaskan dengan lebih berguna
  • Meski menyukai otomasi, keterbatasan dari proses yang lebih manual ini diterima sebagai hal yang positif

Situs web statis sebagai alat pelestarian

  • Inspirasi pendekatan ini datang dari ekspor akun Twitter
    • ekspor akun Twitter menyediakan situs mini yang bisa dijelajahi secara lokal
    • banyak platform media sosial juga menyediakan data dalam bentuk situs web yang memudahkan manusia menjelajahinya
  • Situs web statis juga bisa berguna sebagai pendekatan pelestarian digital untuk arsip born-digital
    • kesederhanaan, daya tahan jangka panjang, dan rendahnya kebutuhan pemeliharaan menjadi lebih bernilai bagi institusi memori yang ingin melakukan pelestarian selama puluhan atau ratusan tahun
    • situs web HTML dasar pun bisa dibuat hanya dengan notepad atau editor teks sederhana
  • Data Lifeboat project sedang membuat situs web statis yang lebih besar sebagai cara mengemas sebagian arsip Flickr
    • arsip lokal biasanya lebih mirip tampilan daftar, tetapi situs web di dalam Data Lifeboat memiliki lebih banyak halaman dan fitur
  • Tulisan Ed Summers tentang situs statis untuk pelestarian Historypin juga merupakan contoh ke arah yang sama

Migrasi bertahap dan kegunaan pribadi HTML

  • Karena sudah ada banyak file yang tersebar di seluruh disk, memindahkan semuanya sekaligus akan menjadi pekerjaan besar
  • File baru disimpan ke situs web statis, sedangkan file lama dipindahkan dari lokasi penyimpanan lama ke folder situs statis yang sesuai setiap kali file itu ditemukan
  • Setelah struktur awal situs dibuat, hampir tidak ada beban pemeliharaan untuk menjaganya tetap berjalan
  • Bagi yang ingin pertama kali membuat situs web, buku Blake Watson HTML for People direkomendasikan
    • buku itu membawa filosofi bahwa “siapa pun seharusnya bisa membuat situs web dengan HTML jika mereka mau”
  • Selama ini HTML sering dipandang sebagai alat untuk menerbitkan situs web yang dilihat orang lain, tetapi HTML juga bisa dipakai untuk arsip pribadi lokal
  • Dalam pembaruan 19 Februari 2025, ditambahkan tulisan lanjutan yang menjelaskan detail kode, How I create static websites for tiny archives

Bacaan terkait

1 komentar

 
GN⁺ 2024-10-19
Komentar Hacker News

  • Menyalin gambar dari clipboard dan menyimpannya ke file HTML untuk dipakai sebagai galeri satu file
    https://gist.github.com/egeozcan/b27e11a7e776972d18603222fa5...
    Contoh live: https://gistpreview.github.io/?b27e11a7e776972d18603222fa523...
    Memilih lewat pemilih file juga berfungsi, tetapi drag biasanya tidak berjalan baik. Jika berfungsi dengan benar, gambar akan disisipkan inline di dalam dokumen sebagai blob
    Setelah menambahkan gambar, jika halaman disimpan apa adanya, yaitu menekan file->save, blob juga akan ikut tersimpan. Jika ingin mengeluarkan sebagian sebelum menyimpan, misalnya ingin menghapus gambar, buka inspect element, hapus elemennya, lalu simpan halaman
    File ini bisa diunggah ke server, atau dibuka dengan klik dua kali di komputer maupun ponsel

  • Banyak yang membahas Markdown di komentar, dan saya ikut mendukungnya. Teks biasa adalah yang terbaik. Saya banyak memikirkan pengumpulan dan penyimpanan data saya, dan teks biasa adalah intinya serta sangat bagus untuk kompatibilitas masa depan
    Sejak setelah WordPerfect, saya lebih menyukai dokumen yang formatnya lebih deterministik dan ringan, serta karakter pemformatannya bisa dilihat langsung. Markdown itu hebat, dan pada dasarnya hampir seperti bahasa khusus domain untuk HTML
    Kunci dari teks biasa adalah alatnya. Ada beberapa alat Markdown yang pernah muncul di HN, tetapi belum saya lihat di sini
    https://addons.mozilla.org/en-US/firefox/addon/markdown-view... - merender Markdown dengan bagus di browser
    https://casual-effects.com/markdeep/ - formatter Markdown mandiri yang ramah web dan kaya fitur

    • Saya membuat JS kecil yang bisa meng-host file Markdown secara langsung. Dirender menjadi HTML di browser tanpa konversi awal atau plugin
      Jika dipakai di situs web lokal seperti ini, Anda bisa mendapat kenyamanan menulis Markdown biasa saja
      => https://www.tducret.com/pure-markdown/
      Kode sumber: https://github.com/tducret/pure-markdown
    • Saya meng-host file Markdown saya lewat GitHub. Saya sudah merapikan sedikit lagi di tulisan yang saya buat tentang hal terkait. Sebenarnya ada sekitar 4–5 tulisan dengan pemikiran serupa, dan saya sedang mencari cara untuk membuatnya lebih sederhana
      Saya ingin membuatnya bisa dipakai juga oleh pengguna nonteknis, tetapi belum sampai ke sana
      https://joeldare.com/using-neat-css-on-github-pages
    • Saya juga makin sering memakai Plain Text. Saya menuliskan pemikiran tentang arsip saya di https://brajeshwar.com/2022/plain-text/
      Cukup banyak orang yang mencari cara membuat catatan dalam teks biasa dari Google/Search masuk ke sana, dan tulisan sederhana itu tampaknya membantu

  • Saya mengubah konten menjadi Markdown dan gambar terkait, lalu menyimpannya di Obsidian vault. Sinkronisasi saya tangani sendiri dengan Syncthing. Di laptop dan ponsel, ini perlahan menjadi alat bantu memori ala Zettelkasten yang cukup efektif
    Saya juga mengambil Google/Facebook Takeout, memformat ulang hasilnya, lalu menyimpan dan mengindeks semua korespondensi yang terlihat oleh manusia di sana. Teks itu murah, jadi saya sebagian besar menghindari gambar. Meski begitu ukurannya masih di bawah 200MB, bisa dicari seketika dengan UI yang bagus, dan karena berupa kumpulan file Markdown, mudah dipindahkan

    • Apakah Anda begitu saja melempar tiga kata “alat bantu memori ala Zettelkasten” tanpa konteks apa pun?
    • Untuk sinkronisasi Obsidian di ponsel pakai apa? Apakah itu juga Syncthing?

  • Secara pribadi, saya mengandalkan Obsidian dengan cara yang mirip. Kalau ada sesuatu yang ingin saya arsipkan, seperti posting FB yang mungkin nanti bisa dibagikan, saya menyimpannya bersama tautan aslinya. Layanan eksternal bisa hilang kapan saja, jadi data lokal punya dua kelebihan: kita memilikinya sendiri dan mudah dicari
    Saya juga membuat skrip untuk mengonversi highlight Kindle menjadi file Markdown. Kalau ada yang tertarik, saya bisa merapikannya sedikit lalu membagikannya
    Untuk konten publik, ekosistem static site generator terus membaik. Saya mulai dengan Jekyll karena itu default GitHub, lalu lewat Gridsome, dan akhirnya menetap di Nuxt 3 Content; sekarang rasanya itu titik paling pas bagi saya. Kalau mulai sekarang, mungkin saya akan memilih Astro
    Bagaimanapun, hambatan masuknya lebih rendah daripada sebelumnya. Anda bisa meng-host situs gratis di GitHub, dan kalau butuh style kustom, model AI sangat membantu untuk pekerjaan CSS
    Markdown itu seperti JavaScript untuk pemformatan teks. Meski ada bagian yang aneh, pada akhirnya tetap bekerja dengan baik

    • Saya mem-fork aplikasi Android [1] supaya ketika membagikan artikel ke aplikasi itu, artikelnya dikonversi ke Markdown lalu dikirim ke Obsidian. Saya juga memakai ekstensi Firefox; dengan ekstensi Obsidian Advanced URI, ekstensi itu mengirim versi Markdown dari artikel, termasuk metadata di bagian depan, ke Obsidian[2]
      [1] https://github.com/IAmStoxe/obsidian-markdownr
      [2] https://addons.mozilla.org/en-US/firefox/addon/markdownload/ - ada juga ekstensi Chrome
    • Saya tertarik dengan skrip Kindle itu. Saat menyimpan posting FB, saya penasaran apakah kontennya cukup disalin-tempel, dikonversi ke Markdown, lalu dimasukkan ke Obsidian. Ingin dengar lebih lanjut alur nyatanya

  • Saya sudah melakukan hal serupa sejak 15 tahun lalu. Saya membuat HTML portabel dengan gambar tersemat, mp3, dan sebagainya, supaya tidak perlu software terpisah untuk melihatnya. Sekarang, kalau disimpan di cloud atau ponsel, di perangkat dan sistem operasi apa pun cukup ada browser
    Menyematkan mp3 ke HTML bisa membuat ukurannya membesar, tetapi cukup dengan browser tanpa pemutar musik atau aplikasi terpisah
    Belakangan saya mencoba mengarsipkan dalam format MHTML bersama HTML, alih-alih menyematkan secara manual
    Cukup jalankan server HTTP sederhana lalu jelajahi arsipnya
    Untuk gambar, saya melakukannya seperti ini: simpan semua gambar dalam folder → buka server localhost → buka folder di browser → dengan JavaScript, ubah tautan menjadi tag dengan src=link → setelah browser mengambil dan menampilkan semua gambar, gunakan “Save As” untuk mendapatkan arsip MHTML yang sudah menyematkannya
    Atau Anda juga bisa membuat HTML berisi tag img dan tautan folder dengan skrip Bash sederhana, atau membuat MHTML sebagai template manual
    Tetapi biarkan saja browser melakukan pekerjaan beratnya; tidak perlu melakukannya secara manual
    Selain itu, menyematkan gambar biner langsung di MHTML jauh lebih efisien dan lebih hemat memori daripada penyematan Base64. Misalnya untuk 15 gambar, encoding biner MHTML berukuran 4MB, sedangkan encoding Base64 MHTML 5MB
    Cara lain adalah menjalankan python -m http.server di folder mana pun, atau di Linux memakai tree -H http://localhost:8000 dengan mengatur kedalaman rekursi
    Lalu buka tautan folder dari server atau HTML yang dibuat tree di browser, dan jalankan wget -rkpN -e robots=off http://localhost:8000 dari command line; ini akan membuat ulang folder dengan index.html yang bisa dijelajahi. Setelah itu, server tidak diperlukan lagi untuk melihatnya
    Ini sama seperti ekspor Google, Twitter, YouTube

  • Saat memikirkan hal serupa, saya membuat framework kecil sendiri: https://www.smallweb.run
    Fitur inti tambahan dibanding konfigurasi sendiri yang sudah ada adalah memetakan subfolder ke subdomain. Situs web dinamis juga bisa, tetapi sepertinya Anda tidak tertarik ke arah itu
    Contoh: ~/smallweb/example => https://example.localhost
    Kalau tertarik, ada juga komunitas Discord kecil: https://discord.smallweb.run

    • Kelihatannya seperti membuat ulang CGI/PHP saja

  • Secara pribadi, untuk mencatat saat bekerja saya lebih suka VimWiki. Saya memakainya sebagai tempat mencampur ide, dokumen pendek, dan potongan kode yang ditemukan di web
    Karena terutama ingin menyimpan artikel, tutorial, dan tips berguna, saya cenderung mengarsipkan seluruh situs web. Untuk pekerjaan ini, SingleFile[1] paling saya sukai
    Dengan SingleFile, Anda bisa menyimpan situs web dengan gambar tersemat, dan juga menambahkan anotasi atau memotong iklan yang mengganggu, dan sebagainya. Ia juga mendukung salinan situs web tanpa elemen pengganggu. Sangat saya sarankan untuk dicoba
    [1]https://github.com/gildas-lormeau/SingleFile

    • SingleFile itu luar biasa. Bersama uBlock dan Tree Style Tab, itu masuk daftar instalasi browser standar saya

  • Tulisan seperti ini selalu menarik. Arah yang berteknologi rendah dan mudah dirawat itu bagus, tetapi saya belum pernah benar-benar menghabiskan waktu yang berarti untuk melihat-lihat pekerjaan lama
    Foto adalah pengecualian, tetapi cukup dengan menggulir timeline foto pribadi yang diurutkan berdasarkan tanggal. Saat masih muda saya menghabiskan lebih banyak waktu untuk hal seperti ini, tetapi pada satu titik saya sadar bahwa dalam praktiknya saya sama sekali tidak membukanya lagi
    Saya penasaran mengapa orang sering melihat kembali pekerjaan dari beberapa tahun lalu

    • Saya jarang melihat kembali screenshot, tetapi setiap kali melakukannya saya mendapat inspirasi dan pernah tiba-tiba memulai proyek. Sepertinya perlu arsip yang menampilkan satu item acak per hari
    • Hidup yang direnungkan adalah hidup yang dijalani dua kali

  • Setidaknya dalam kasus saya, jika setiap kali menambahkan item ke koleksi saya harus mengedit file HTML secara manual, secepat dan sesederhana apa pun, rasanya dalam jangka panjang saya pasti tidak akan bisa mempertahankannya
    Ini terlihat seperti kasus ideal untuk memakai generator situs statis DIY yang sangat sederhana. Jika ditulis dengan Bash atau Perl, kompatibilitasnya ke masa depan akan bertahan selamanya

  • Menggunakan situs web statis dengan cara seperti ini bukan hal baru. Inspirasinya datang dari ekspor akun Twitter, yang menyediakan situs web kecil yang bisa dijelajahi secara lokal. Saya juga pernah melihat beberapa platform media sosial lain menyediakan situs web untuk menjelajahi data dengan cara yang mudah dibaca manusia
    Saya pernah membaca di suatu tempat bahwa ekspor Telegram juga seperti ini. Katanya file-file asli diatur sampai batas tertentu dalam direktori, bisa dijelajahi apa adanya, dan disertai situs web statis lokal kecil agar lebih nyaman ditelusuri
    Sangat berbeda dengan Google Takeout, ekspor massal terakhir yang saya gunakan. Google Takeout hanya menumpahkan begitu saja file-file asli dengan skema penamaan yang tidak bermakna bagi pengguna, serta XML yang tidak jelas
    Sampai sekarang pun saya tidak yakin apakah saya sudah menerima semua data yang saya minta sebelum menghapusnya di sisi cloud

    • Facebook juga melakukan ini ketika saya keluar beberapa tahun lalu. Mereka memberi dump besar berisi data dan foto, serta menyertakan file HTML agar lebih mudah dijelajahi