Küçük arşivler için statik web sitelerinden yararlanma

 (alexwlchan.net)
4 puan yazan GN⁺ 2024-10-19 | 1 yorum | WhatsApp'ta paylaş
  • Yerelde biriken belgeleri, ekran görüntülerini, yer imlerini ve medya dosyalarını daha sonra yeniden bulabilmek için, her küçük koleksiyonun yanına bir statik web sitesi ekleyerek geziniyor
  • Her koleksiyon diskte bir klasör olarak bırakılıyor; kökteki HTML dosyası tarayıcıda açılarak Finder’dan daha zengin metadata ve düzenleme biçimleri sunuyor
  • Web sunucusu, build sistemi, bağımlılık veya JavaScript framework’ü olmadan elle yazılıyor; her site en fazla birkaç yüz satır kod düzeyinde olduğu için küçük projelere uygun
  • Mevcut klasör hiyerarşileri, Finder etiketleri, “everything bucket” uygulamaları ve kendi yaptığı araçların sırasıyla hiyerarşi dayatması, uygulama sınırları, uygulamanın düşünme biçimine uyum gerektirmesi ve bakım yükü gibi sorunları vardı
  • Elle düzenlemek zaman alsa da yalnızca saklamaya değer dosyaların seçilmesini sağlıyor; HTML’in basitliği uzun vadeli koruma için avantajlı

Yerel arşivi mini web sitesi olarak görüntülemek

  • Koleksiyon bazında statik web siteleri oluşturarak yerel arşivde geziniyor
    • Taranmış evraklar
    • Kendi oluşturduğu belgeler
    • Alınmış ekran görüntüleri
    • Kaydedilmiş web sayfası yer imleri
    • Kaydedilmiş video ve ses dosyaları
  • Dosyanın niteliğine göre her koleksiyon için farklı bir görünüm kullanılıyor
    • Ekran görüntüsü koleksiyonu görüntü ızgarası olarak gösteriliyor
    • Yer imleri metin bağlantıları listesi olarak sunuluyor
    • Videolar küçük resim ve metnin karıştığı bir listeyle düzenleniyor
  • Amaç karmaşık bir sistem değil, macOS Finder’dan biraz daha iyi bir dosya gezinme arayüzü yapmak
    • Sayfaya daha fazla metadata eklenebiliyor
    • Kendi yaptığı arama ve düzenleme biçimleri kullanılabiliyor

Kurulum biçimi ve teknoloji seçimi

  • Her koleksiyon yerel diskte bir klasör; web sitesi ise o klasörün kökünde bulunan bir veya daha fazla HTML dosyası
  • Kullanırken HTML dosyası doğrudan web tarayıcısında açılıyor
  • Bilinçli olarak küçük ölçek ve düşük teknoloji düzeyi korunuyor
    • Web sunucusu yok
    • Build sistemi yok
    • Bağımlılık yok
    • JavaScript framework’ü yok
  • Her şey elle yazılıyor, ancak küçük projelerde bu yönetilebilir
    • Her web sitesi en fazla birkaç yüz satır kod düzeyinde
  • Yalnızca diskteki dosyalar ve HTML’den oluştuğu için uzun ömürlü olma ihtimalinin yüksek olduğu düşünülüyor
    • Klasör-dosya yapısının basitliği ve taşınabilirliği korunuyor
    • Üzerine yalnızca gereken işlevler biraz ekleniyor

Önceki yöntemlerin uzun ömürlü olmamasının nedenleri

  • Sıradan dosya ve klasör yöntemi hiyerarşik yapı dayatıyor ve her dosyanın tam olarak tek bir yerde bulunmasını gerektiriyor
    • Kod gibi bazı veri türlerine iyi uyuyor
    • Medya dosyaları için tatmin edici bir hiyerarşi tasarlamak zordu
    • Hangi klasöre koyacağını düşünürken masaüstü düzensiz kalıyordu
  • Anahtar kelimeyle etiketleme, bir dosyaya birden çok etiket verip onu birden fazla şekilde yeniden bulmayı sağladığı için daha çok tercih ediliyor
    • macOS Finder da etiketleri destekliyor, ancak uygulaması yeterli olmadığı için önemli işler için kullanmak istenmiyordu
  • DEVONThink, Evernote, Yojimbo gibi “everything bucket” uygulamaları da uygun değildi
    • Uygulamanın çalışma biçimine göre düşünmeyi değiştirmek gerekiyormuş gibi hissettiriyordu
  • Kendi yaptığı dosya düzenleme araçlarını da en az 12 kez denedi; son denemelerden biri docstore idi
    • Kendi düşünme biçimine daha iyi uyuyordu ama bakım yükü doğurdu
    • Python yükseltmeleri veya macOS güncellemelerinde her seferinde bir şeyler bozuluyor, kodu düzeltmek gerekiyordu

Klasörü mini web sitesine dönüştürme yöntemi

  • En üst klasöre indeks görevi gören bir HTML dosyası koyunca, tüm dosyalar istenen metadata ve etiketlerle gösterilebiliyor
  • Bu yöntem klasör yapısını basitleştiriyor ve mükemmel bir hiyerarşi bulma yükünü azaltıyor
    • Dosyalar genellikle yalnızca yıla veya dosya adının ilk harfine göre gruplanıyor
    • Klasörlere yalnızca yeni dosya eklerken bakılıyor; gezinmek için kullanılmıyor
    • Dosya aranırken her zaman web sitesi kullanılıyor
  • Web sitesi, anahtar kelime etiketleriyle dosyaların birden çok şekilde bulunmasını sağlıyor ve gerçek klasör yapısının ayrıntılarını gizliyor
  • HTML, az bakım gerektiren, esnek ve kaybolma olasılığı düşük bir teknoloji olarak seçiliyor
    • Web’in temel teknolojisi
    • Neredeyse tüm modern bilgisayarlarda HTML sayfalarını render edebilen bir tarayıcı var
    • 2006’da okul dersi için yapılan ilk web sitesi de modern tarayıcılarda sorunsuz render ediliyor

“Küçük” arşivlere uygun olmasının nedeni

  • Dosya düzenleme, metadata yazma ve görüntüleyici hazırlamanın önemli bir kısmı elle yapıldığı için büyük koleksiyonlara iyi ölçeklenmiyor
  • Yüzlerce öğeyi saklamak bile azımsanmayacak zaman alıyor, ancak bu sürtünme saklanacak şeyleri seçmeye yardımcı oluyor
    • Düzgünce düzenlemeye değer olup olmadığına karar verdiriyor
    • Kaydetmek için 1 dakika bile harcamak istenmeyen bir dosyaya yeniden bakma ihtimali olup olmadığını sorduruyor
    • Saklamaya karar verilen dosyalar için daha sonra kolay bulunmaları adına metadata daha özenli yazılıyor
  • Önceden binlerce dosya büyük ve belirsiz klasörlerde birikiyordu; düzgün düzenlenmediği için yeniden bakılmıyordu
  • Şimdi birkaç yüz öğe içeren küçük web siteleri var; öğeler daha dikkatli seçiliyor ve daha faydalı şekilde açıklanıyor
  • Otomasyonu sevse bile, daha manuel bir sürecin getirdiği kısıtları olumlu karşılıyor

Koruma aracı olarak statik web sitesi

  • Bu yöntemin ilhamı Twitter hesap dışa aktarımından geldi
    • Twitter hesap dışa aktarımı, yerelde gezilebilen mini bir web sitesi sunuyor
    • Birçok sosyal medya platformu da verileri insanların kolayca gezebileceği web sitesi biçiminde sunuyor
  • Statik web siteleri, born-digital arşivlerle ilgilenen dijital koruma yöntemi olarak da yararlı olabilir
    • Basitlik, uzun ömür ve düşük bakım gereksinimi; onlarca ya da yüzlerce yıl korumayı hedefleyen bellek kurumları için daha da değerli
    • Basit bir HTML web sitesi, temel Not Defteri veya metin editörüyle bile yapılabilir
  • Data Lifeboat project Flickr arşivinin bazı bölümlerini paketleme yöntemi olarak daha büyük statik web siteleri oluşturuyor
    • Yerel arşivler genelde liste görünümüne daha yakınken, Data Lifeboat içindeki web sitesi daha fazla sayfa ve işleve sahip
  • Ed Summers’ın Historypin’i korumak için statik siteyle ilgili yazısı da aynı yönde bir örnek

Kademeli geçiş ve HTML’in kişisel kullanımı

  • Diskin geneline dağılmış çok sayıda dosya zaten bulunduğu için her şeyi bir kerede taşımak büyük iş
  • Yeni dosyalar statik web sitesine kaydediliyor; eski dosyalar ise bulundukça mevcut depolama konumundan çıkarılıp uygun statik site klasörüne taşınıyor
  • İlk site yapısı oluşturulduktan sonra çalışır durumda tutmak için neredeyse hiç bakım yükü olmadı
  • İlk kez web sitesi yapmayı denemek isteyenlere Blake Watson’ın HTML for People öneriliyor
    • “İsteyen herkes HTML ile web sitesi yapabilmeli” felsefesini taşıyor
  • HTML uzun süre başkalarının göreceği web sitelerini yayımlama aracı olarak düşünülmüştü, ancak yerel kişisel arşivlerde de kullanılabilir
  • 19 Şubat 2025 güncellemesiyle, kod ayrıntılarını açıklayan devam yazısı How I create static websites for tiny archives eklendi

İlgili okumalar

1 yorum

 
GN⁺ 2024-10-19
Hacker News yorumları

  • Panodaki görseli kopyalayıp bir HTML dosyasına kaydederek tek dosyalık galeri olarak kullanıyorum
    https://gist.github.com/egeozcan/b27e11a7e776972d18603222fa5...
    Canlı örnek: https://gistpreview.github.io/?b27e11a7e776972d18603222fa523...
    Dosya seçiciyle seçmek de çalışıyor ama sürükleme genelde pek iyi çalışmıyor. Düzgün çalıştığında görsel, blob olarak belgenin içine gömülü biçimde ekleniyor
    Görseli ekledikten sonra sayfayı olduğu gibi kaydederseniz, yani file->save'e basarsanız blob da birlikte kaydediliyor. Kaydetmeden önce bazı kısımları çıkarmak isterseniz, örneğin bir görseli silmek isterseniz, öğe incelemeyi açıp kaldırdıktan sonra sayfayı kaydedebilirsiniz
    Bu dosyayı sunucuya yükleyebilir ya da bilgisayarda veya mobilde çift tıklayarak açabilirsiniz

  • Yorumlarda Markdown'dan çokça bahsediliyor; ben de buna bir oy veriyorum. Düz metin en iyisi. Kendi veri toplama ve saklama süreçlerimi çok düşünüyorum; düz metin bunun merkezinde ve geleceğe uyumluluğu çok iyi
    WordPerfect'ten beri, biçimlendirmenin daha deterministik ve hafif olduğu, biçimlendirme karakterlerini doğrudan görebildiğim belgeleri tercih ediyorum. Markdown harika ve aslında HTML için alan özelinde bir dile oldukça yakın
    Düz metnin kilit noktası araçlar. HN'de daha önce yer almış ama burada henüz görmediğim birkaç Markdown aracı var
    https://addons.mozilla.org/en-US/firefox/addon/markdown-view... - Markdown'ı tarayıcıda güzelce render ediyor
    https://casual-effects.com/markdeep/ - çok özellikli, bağımsız ve web dostu bir Markdown biçimlendirici

    • Markdown dosyalarını doğrudan barındırmaya yarayan küçük bir JS yaptım. Ön dönüşüm ya da eklenti olmadan tarayıcıda HTML olarak render ediliyor
      Böyle yerel web sitelerinde kullanınca sadece düz Markdown yazma kolaylığını elde ediyorsunuz
      => https://www.tducret.com/pure-markdown/
      Kaynak kod: https://github.com/tducret/pure-markdown
    • Markdown dosyalarımı GitHub ile barındırıyorum. Konuyla ilgili yazdığım bir yazıda biraz daha derli toplu anlattım. Benzer düşünceleri içeren gerçekten 4-5 kadar yazı var ve bunu daha da basitleştirmenin yolunu arıyorum
      Teknik olmayan kullanıcıların da kullanabilmesini istiyorum ama henüz o noktaya gelemedim
      https://joeldare.com/using-neat-css-on-github-pages
    • Ben de giderek daha fazla Plain Text kullanıyorum. Arşivimle ilgili düşüncelerimi https://brajeshwar.com/2022/plain-text/ adresinde yazdım
      Google/Search'ten düz metinle not tutmanın yollarını arayan epey kişi geliyor; o basit yazı yardımcı olmuş gibi görünüyor

  • İçeriği Markdown'a ve ilgili görsellere dönüştürüp Obsidian vault içinde saklıyorum. Senkronizasyonu Syncthing ile kendim hallediyorum. Dizüstü bilgisayar ve telefonda epey etkili, Zettelkasten tarzı bir bellek yardımcısına dönüşüyor
    Google/Facebook Takeout'u da içe aktarıp sonuçları yeniden formatlıyorum; insanın gördüğü tüm yazışmaları orada saklayıp indeksliyorum. Metin ucuz olduğu için görsellerden çoğunlukla kaçınıyorum. Buna rağmen hâlâ 200MB'ın altında; iyi bir UI ile anında aranabiliyor ve Markdown dosyaları demeti olduğu için kolayca taşınabiliyor

    • “Zettelkasten tarzı bellek yardımcısı” diye üç kelimeyi hiçbir bağlam vermeden bırakıp gidiyor musun?
    • Telefonda Obsidian senkronizasyonu için ne kullanıyorsun? O da Syncthing mi?

  • Kişisel olarak benzer bir şekilde Obsidian’a güveniyorum. Daha sonra paylaşabileceğim bir FB gönderisi gibi saklamak istediğim bir şey olduğunda, özgün bağlantısıyla birlikte kaydediyorum. Harici servisler her an ortadan kaybolabileceğinden, yerel verinin iki avantajı var: ona biz sahibiz ve araması kolay.
    Kindle vurgularını Markdown dosyasına dönüştüren bir betik de yazdım. İlgilenen olursa biraz elden geçirip paylaşabilirim.
    Herkese açık içerikler için statik site oluşturucu ekosistemi sürekli daha iyi hale geliyor. GitHub’ın varsayılanı olduğu için Jekyll ile başladım, Gridsome’dan geçtim ve sonunda Nuxt 3 Content’te karar kıldım; şu anda benim için en iyi denge noktası o gibi geliyor. Bugün başlasaydım Astro’yu seçmiş de olabilirdim.
    Her hâlükârda giriş bariyeri hiç olmadığı kadar düşük. GitHub’da ücretsiz site barındırabiliyorsunuz; özel stil gerekiyorsa yapay zeka modelleri CSS işlerinde inanılmaz yardımcı oluyor.
    Markdown, metin biçimlendirme için JavaScript gibi. Tuhaf yanları olsa da sonunda gayet iyi çalışıyor.

    • Android uygulamasını [1] fork’layıp, bir yazıyı uygulamaya paylaştığımda onu Markdown’a dönüştürüp Obsidian’a gönderecek hale getirdim. Firefox eklentisi de kullanıyorum; Obsidian eklentisi Advanced URI’den yararlanarak yazının Markdown sürümünü, baştaki metadata dâhil Obsidian’a gönderiyor[2].
      [1] https://github.com/IAmStoxe/obsidian-markdownr
      [2] https://addons.mozilla.org/en-US/firefox/addon/markdownload/ - Chrome eklentisi de var
    • Kindle betiği ilgimi çekti. FB gönderilerini kaydederken içeriği sadece kopyalayıp yapıştırıyor, Markdown’a dönüştürüp Obsidian’a mı koyuyorsun, merak ediyorum. Gerçek akışı biraz daha duymak isterim.

  • 15 yıl önce benzer şeyler yapmaya başladım. Görmek için ayrı yazılım gerekmesin diye görüntüleri gömülü taşınabilir HTML’ler, mp3’ler vb. oluşturuyordum. Bugünlerde buluta ya da telefona koyup taşırsanız, herhangi bir cihazda ve işletim sisteminde tarayıcı olması yeterli.
    HTML’e mp3 gömmek boyutu büyütebilir ama ayrı bir müzik çalar ya da uygulama gerektirmez; tarayıcı yeterlidir.
    Bugünlerde HTML ile birlikte elle gömmek yerine MHTML biçiminde saklamaya çalışıyorum.
    Basit bir HTTP sunucusu çalıştırıp arşive göz atmak yeterli.
    Görseller için şöyle yapıyorum: tüm görselleri bir klasöre kaydet → localhost sunucusu aç → klasörü tarayıcıda aç → JavaScript ile bağlantıları src=link olan etiketlere dönüştür → tarayıcı tüm görselleri getirip gösterdiğinde “Farklı Kaydet” diyerek gömülü MHTML arşivini elde et.
    Ya da basit bir Bash betiğiyle img etiketleri ve klasör bağlantıları içeren bir HTML oluşturabilir, MHTML’i elle şablonla da üretebilirsiniz.
    Ama zor işi tarayıcıya yaptırmak varken elle yapmaya gerek yok.
    Ayrıca Base64 gömmeye kıyasla ikili görselleri doğrudan MHTML’e gömmek çok daha verimli ve daha az bellek tüketiyor. Örneğin 15 görsel için MHTML ikili kodlama 4 MB, MHTML Base64 kodlama ise 5 MB’tı.
    Başka bir yöntem de herhangi bir klasörde python -m http.server çalıştırmak ya da Linux’ta tree -H http://localhost:8000 ile özyineleme derinliğini ayarlamak.
    Ardından sunucunun klasör bağlantılarını ya da tree’nin oluşturduğu HTML’i tarayıcıda açıp, komut satırında wget -rkpN -e robots=off http://localhost:8000 çalıştırınca, gezilebilir bir index.html içeren klasörü yeniden oluşturur. Sonrasında görüntülemek için sunucu gerekmez.
    Google, Twitter, YouTube dışa aktarımlarındaki yöntemle aynı.

  • Benzer bir şey düşünürken küçük bir framework’ü kendim yaptım: https://www.smallweb.run
    Mevcut elle kurulumlara kıyasla eklenen temel özellik, alt klasörleri alt alan adlarına eşlemek. Dinamik web siteleri de mümkün ama o tarafa ilginiz yok gibi görünüyor.
    Örnek: ~/smallweb/example => https://example.localhost
    İlgilenirseniz küçük bir Discord topluluğu da var: https://discord.smallweb.run

    • Sadece CGI/PHP’yi yeniden icat etmişsiniz gibi görünüyor.

  • Kişisel olarak iş sırasında not almak için VimWiki’yi tercih ediyorum. Fikirleri, kısa dokümanları ve web’de bulduğum kod parçalarını bir araya koyduğum bir yer olarak kullanıyorum.
    Genelde yazıları, öğreticileri ve yararlı ipuçlarını saklamak istediğim için tüm web sitesini arşivleme eğilimindeyim. Bu iş için en çok SingleFile[1] hoşuma gidiyor.
    SingleFile ile görselleri gömülü web siteleri kaydedebilir, not ekleyebilir ya da rahatsız edici reklamları vb. kesip çıkarabilirsiniz. Dikkat dağıtıcı unsurları olmayan web sitesi kopyalarını da destekliyor. Mutlaka bakmanızı öneririm.
    [1]https://github.com/gildas-lormeau/SingleFile

    • SingleFile harika. uBlock ve Tree Style Tab ile birlikte benim standart tarayıcı kurulum listemde yer alıyor.

  • Bu tür yazılar her zaman ilginç. Düşük teknolojili ve sürdürülebilir bir yönelim iyi ama eski işlerime bakmak için anlamlı bir zaman harcadığım hiç olmadı.
    Fotoğraflar istisna; ama tarih sırasına dizilmiş kişisel fotoğraf zaman çizelgesini kaydırmak benim için yeterliydi. Küçükken böyle şeylere daha çok zaman ayırırdım ama bir noktada aslında hiç dönüp bakmadığımı fark ettim.
    İnsanların yıllar önceki işlerine sık sık geri dönme nedeni nedir, merak ediyorum.

    • Ekran görüntülerine yeniden bakmam nadir, ama her baktığımda ilham alıp birden proje başlattığım oldu. Sanırım günde bir tane rastgele çıkarıp gösteren bir arşive ihtiyacım var.
    • Geriye dönüp bakılmış bir hayat, iki kez yaşanmış hayattır.

  • En azından benim durumumda, koleksiyona her öğe eklediğimde HTML dosyasını elle düzenlemem gerekseydi, ne kadar hızlı ve basit olursa olsun uzun vadede bunu kesinlikle sürdüremezdim gibi geliyor.
    Çok basit bir DIY statik site üreticisi kullanmak için ideal bir örnek gibi görünüyor. Bash ya da Perl ile yazılırsa sonsuza kadar geleceğe uyumlu olur.

  • Statik web sitelerini bu şekilde kullanmak yeni değil. İlham, Twitter hesabı dışa aktarımından geldi; yerelde gezilebilen küçük bir web sitesi sağlıyordu. Başka birçok sosyal medya platformunun da verileri insanın rahat okuyup gezebileceği web siteleri sunduğunu gördüm.
    Bir yerde Telegram dışa aktarımının da bu şekilde olduğunu okumuştum. Orijinal dosyaların dizinler halinde bir ölçüde düzenlendiği, kendi başlarına da gezilebilir oldukları ve daha rahat göz atmak için küçük bir yerel statik web sitesiyle birlikte geldikleri söyleniyor.
    Son kullandığım büyük ölçekli dışa aktarım olan Google Takeout bundan çok farklıydı. Google Takeout, kullanıcı açısından anlamsız bir adlandırma şemasına sahip orijinal dosyaları ve ne olduğu belirsiz XML’leri aptalca döküp veriyor.
    Bulut tarafında silmeden önce istediğim verilerin tamamını alıp almadığımdan hâlâ emin değilim.

    • Facebook da birkaç yıl önce ayrılırken bunu böyle yapmıştı. Verileri ve fotoğrafları büyük bir döküm olarak veriyor, daha iyi gezilebilmesi için yanına HTML dosyaları ekliyordu.