6 ms·

Using static websites for tiny archives

391 points by ingve 2y ago

noja 2y ago
https://www.filestash.app/ https://www.filestash.app/
egeozcan 2y ago
I copy the images in my clipboard and save them in an HTML file to have single-file galleries: https://gist.github.com/egeozcan/b27e11a7e776972d18603222fa523ed4 https://gist.github.com/egeozcan/b27e11a7e776972d18603222fa5... Live: https://gistpreview.github.io/?b27e11a7e776972d18603222fa523ed4 https://gistpreview.github.io/?b27e11a7e776972d18603222fa523... Selecting via file-picker works too. Dragging usually does not. When all works, images are inserted inline as blobs. After adding images, if you save the page (literally file->save), the blobs are saved together. don't want a part when saving (for example, removing images)? inspect element, remove, save page. throw the page on some server or just double click on your computer/mobile.
- joncfoo 2y ago
  That is slick. Offline first in the truest sense.
- freetonik 2y ago
  This is very cool, thank you for sharing.
- mikae1 2y ago
  Love it! True to the original vision of the WWW. Tim Berners-Lee's WorldWideWeb browser was also an editor. https://github.com/cadars/john-doe https://github.com/cadars/john-doe gives me the same feels.
  - _giorgio_ 2y ago
    LOL
- thatcat 2y ago
  Very cool design! note if you can't get it to work, make sure you set file type to complete webpage when saving.
- simonw 2y ago
  That's really neat! You could add a "Download this page" button on the page which does some tricks to produce an HTML file with the images baked in that the user can download, which could work on mobile. Here's a quick prototype: https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd329 https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd... - code here: https://gist.github.com/simonw/14a2c3ef508839f26377707dbf5dd329 https://gist.github.com/simonw/14a2c3ef508839f26377707dbf5dd...
  - egeozcan 2y ago
    Thank you! Great idea, I'll give it a try :)
  - DemocracyFTW2 2y ago
    Can also recommend Single File browser extension https://github.com/gildas-lormeau/SingleFile-MV3 https://github.com/gildas-lormeau/SingleFile-MV3
- dmje 2y ago
  Thanks for sharing! Mind: expanded
mathnmusic 2y ago
Strict hierarchies are indeed too rigid. What about using a tag-based file manager like TagSpaces (which is free and open-source)?
- deafpolygon 2y ago
  MacOS also supports tags.
- deleted 2y ago
  [deleted]
lovegrenoble 2y ago
nice idea
freitzzz 2y ago
Really nice idea! As a data hoarder myself, I think I will follow this as way to remind myself of the things I truly should archive :)
Rhapso 2y ago
I convert content to markdown and relevant images and then store them in an obsidian vault. I self-sync it with syncthing. It has quickly become a rather effective zettelkasten memory prosthetic on my laptop and phone. I also use google/facebook takeouts, reformat the results, and store+index all my human-facing correspondence in there. Text is cheap and I avoid most images. Its still under 200mb and instantly searchable with a nice UI and as a bunch of markdown files it is easily portable.
- PoignardAzur 2y ago
  > zettelkasten memory prosthetic You're really going to drop these three words without any context?
  - Rhapso 2y ago
    I was hit on the head a lot as a child. My memory isn't great, so I take a LOT of notes. Those notes and the writing/searching tools to use them are very literally a memory prosthetic. Zettelkasten is a methodology of organizing a LOT of notes. I index by topic, date and people involved. I can look up a friend and re-read every shared IM, email, and event I logged almost instantly. Faster than any website can. It's my own personal pile of papers future historians will be excited to find because they can actually read it. One of my biggest frustrations is that most of my note-taking tools are not permitted in my workplace for security reasons. I have to keep all my notes on their infrastructure. I'm going to loose a chunk of my brain when I change jobs someday.
    - sourcepluck 2y ago
      Have you thought about writing up a lovely tutorial on this going into all the details? Seems like a lovely setup!
      - Rhapso 2y ago
        Its in the backlog of notes labeled "blog post ideas" :'( I think more general tooling to "convert your assorted takeouts into a local database" is higher on my todo list. I have a bunch of python scripts I cobbled together to convert things. If we can get it all into an easy to use database, everybody could do their own things with them more easily.
massimoto 2y ago
I recently wrote a static site generator from AnyBox's local database, since they currently only allow for backups via iCloud which is locked down on my work laptop. I was surprised by the peace of mind it gave me to have a nice, 100% portable version of my vast bookmark/website archives.
pomdtr 2y ago
I had similar thoughts, and built myself a little framework for this: https://www.smallweb.run https://www.smallweb.run The key feature it adds compared to your own setup is mapping subfolders to subdomains (+ dynamic websites, but you don't seem interested in that). ex: ~/smallweb/example => https://example.localhost https://example.localhost We have a little discord community at https://discord.smallweb.run https://discord.smallweb.run if anyone is interested.
- tga 2y ago
  It looks like you just reinvented CGI/PHP.
  - pomdtr 2y ago
    Yeah you guessed it, smallweb is basically CGI meets Deno sandboxing + https imports.
ejddhbrbrrnrn 2y ago
Markdown files can be a magic low effort way to get this. Even less fancy. Just stick an md file and it is easy to link to stuff. Open it in VS Code. You can go full zettlekasten but you can also just drop some notes around.
- chrisweekly 2y ago
  that's one of the things I love about Obsidian -- at the end of the day, it's "just" an extraordinarily powerful interface to Markdown files.
lazylizard 2y ago
https://linux.die.net/man/1/tree https://linux.die.net/man/1/tree will list your directory tree as a html file..helpful?
justusthane 2y ago
For myself at least, there's no way I'd stick with this over the long run given the overhead of hand-editing an HTML file (however quick and simple) every time I needed to add an item to a collection. Seems like an ideal use for a very simple DIY static-site generator. Write it in Bash or Perl and it will be future-proofed forever.
zoobab 2y ago
PDF is better for archiving, but what about videos? HTML ready sucks for archiving.
- klez 2y ago
  Can you please explain what you mean that PDF is better for archiving while HTML sucks in this aspect? What aspects of the formats are you basing this on?
  - deleted 2y ago
    [deleted]
  - gazook89 2y ago
    I’m not the commenter but I Imagine it just boils down to what you are archiving, but in any case I don’t think the commenter really understands what html is being used for here. The “preserved” material doesn’t have to be html, the html is just to set up the directory navigation. In the blog post, they even mention that each type of material is its own website so that each website can be designed to handle that file/data type.
- approxim8ion 2y ago
  HTML supports video just fine and has for years. Can't imagine why it would be an issue.
crtasm 2y ago
>folders require you to use hierarchical organisation, and everything has to be stored in exactly one place. You can make aliases/shortcuts to files on MacOS, can't you?
- prmoustache 2y ago
  On pretty much any modern OS that uses a modern filesystem that is not exfat I believe.
- kccqzy 2y ago
  Personally I used to use the saved search feature in macOS which is much more convenient than aliases or symlinks. You can specify what to search for and then save them. The files themselves can have arbitrary text based metadata just by writing Spotlight comments for the files. For example for screenshots, I write in the spotlight comments things like from which app I took the screenshot and why I took this screenshot ("funny" or "delightful UI") and then I have a saved search that only searches for PNG files in the Screenshots folder with keyword "funny" (you get the idea). The actual files are of course still organized in folders by year just like the author.
G_o_D 2y ago
Been doing so since 15 years, i make portable html with embedded images, mp3 and much so that i dont need any special software for viewing, just carry it in cloud or my phone nowadays and you only need a browser on any device any os. With embedded mp3 in html, (yes size may grew large) l, but i dont need special music player software or app just browser, Nowadays along with html i try to archive using MHTML format instead of manually embedding Run a simple http server and start browsing archives FOR IMAGES I DO IS ---> Store all images in Folder ---> Open localhost server ---> Open folder in browser ---> Using javascript convert links to <img> tag with src=link --> Once browser fetches and displays all images Save as and i have embedded MHTML archive Or simple bash script can be used to create html with img tag and links to folder Or you can manuaaly template a MHTML BUT i let my browser do the heavy work why go manual, Also instead of BASE64 EMBED, EMDEDDING DIRECTLY BINARY IMAGES IN MHTML IS QUITE MORE EFFECTIVE AND LESS MEMORY CONSUMING Eg i have 15 images MHTML (binary encode) -> 4MB MHTML (BASE64 ENCODE) -> 5MB Another method i use is, Run python -m http.server on any folder Or linux : tree -H http://localhost:8000 http://localhost:8000 Set recursion depth Then open folder link from server or tree created HTML IN BROWSER in cmd execute wget -rkpN -e robots=off http://localhost:8000 http://localhost:8000 It will recreate folder with index.html for you to browse, you dont need server then for viewing Same as export from google or twitter or youtube
corinroyal 2y ago
This excites me. Imagine someone not overcomplicating web tech. I've been thinking of having web sites render as epubs so we don't have to have a sysadmin on call 24/7 just so I can read.
stared 2y ago
For personal use, I rely on Obsidian in a similar way—whenever I want to keep something (like an FB post I might want to share later), I save it along with the source link. External services can disappear anytime, so local data has the dual advantage of being owned by us and easily searchable. I also wrote a script to convert Kindle highlights into Markdown files. If anyone’s interested, I'd be happy to polish it a bit and share. For public-facing content, the Static Site Generator ecosystem keeps improving. I started with Jekyll (since it's the GitHub default), moved through Gridsome, and eventually landed on Nuxt 3 Content, which feels like the sweet spot for me. If I were starting now, I might have chosen Astro. In any case, the barrier to entry has never been lower. We can host sites for free on GitHub, and if custom styling is needed, AI models are incredibly helpful with CSS. Markdown is like JavaScript for text formatting. Despite its quirks, it just works.
- darylfritz 2y ago
  I'm interested in your Kindle script. I'm curious about how you handle saving FB posts—do you just copy and paste the content, convert it to markdown, and store it in Obsidian? Would love to hear more about your process!
  - stared 2y ago
    Here is the script. You need to download "My Clippings.txt" from your Kindle device. https://gist.github.com/stared/ce732ef27d97d559b34d7e294481f1b0 https://gist.github.com/stared/ce732ef27d97d559b34d7e294481f... Regarding Facebook, I do it manually only for selected posts. I tried to do it otherwise, but Facebook exports don't have data about likes (it would be helpful to filter popular content) or comments (often more important than the original post itself).
    - mgobl 2y ago
      Do you know if this file is possible to recover from/for kindle app highlights? (ie. off an Android Tablet) Or only off a kindle device?
- byteknight 2y ago
mediumsmart 2y ago
thank you for posting, I have the same experiences looking for a good way to organize files etc - I tested this now and asked the oracle to write me a bash script that finds all images starting with Screenshot and list them in an html file that grids them at 200px width with click fill screen and second click dismiss. Such a good way to have an overview - going to implement that across the HD.
chrisweekly 2y ago
Awesome post. I'm inspired to take a similar approach. Related tangent: https://sive.rs/ti https://sive.rs/ti is author/entrepreneur Derek Sivers' script for reproducing his bare-bones, low-overhead, long-term "Tech Independence" stack.
meonkeys 2y ago
Lots of folks mentioning Markdown in the comments. +1 to that. Plain text FTW. I think a lot about my own data hoarding / archiving, and plain text is such a key part of that. Very future-proof. Ever since WordPerfect I've preferred more deterministic, lightly-formatted documents with some way to see formatting characters directly. Markdown is brilliant, basically a DSL (domain-specific language) for HTML. The key to plain text is tooling! A couple Markdown tools I haven't seen mentioned here yet (even though they've come up on HN before) are: https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/ https://addons.mozilla.org/en-US/firefox/addon/markdown-view... - pretty-render Markdown right in the browser https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/ - standalone web-friendly Markdown formatter with many features
- codazoda 2y ago
  I use GitHub to host my markdown files. A bit more information is in this article I wrote about it. I actually have 4 or 5 similar articles with various thoughts on this. I'm trying to find a way to make it simpler, maybe even for non-technical users, but I'm not there yet. https://joeldare.com/using-neat-css-on-github-pages https://joeldare.com/using-neat-css-on-github-pages
- tducret 2y ago
  Hey, I made a small JS that allows you to host a markdown file directly (no pre-conversion or plugin needed). It is rendered in the browser as HTML. It can definitely be used in such a local website, giving the convenience of just writing plain markdown. => https://www.tducret.com/pure-markdown/ https://www.tducret.com/pure-markdown/ (source code) https://github.com/tducret/pure-markdown https://github.com/tducret/pure-markdown
  - telgareith 2y ago
    Looks more like you just made an HTML page that invokes "marked. Min. Js" from the npm cdn. Neat demo.
  - Brajeshwar 2y ago
    This is nice. I have used https://ndossougbe.github.io/strapdown/ https://ndossougbe.github.io/strapdown/ to quickly throw out MarkDown files for people to see as rendered HTMLs. I love the cleanliness of your script. Thanks.
itohihiyt 2y ago
Why not use a wiki? Zim desktop is text based local first. It doesn't handle videos but everything is handled. Search is good and you get the other benefits of a wiki. No mobile client, that I'm aware of.
- Pfeil 2y ago
  Markor is an Android Text Editor with Zim (and other markup) Support, althogh I never used the Zim compatibility. But it is probably worth a try. I like that zim is not automatically a hosted solution but a local app. I would love to see more local apps for archiving solutions and PKM. I just have some issues with the Zim app itself. It works nice for some of my use cases, but not for all. And I wish it would just use markdown (I know it has limits). Stuff like that. I think Zim does not really fit into the discussion because it does not rely on easily exchangeable standard software like a file explorer and browsers. That said, I believe that notetaking applications mostly exist because file explorers do an extremely bad job and integrating applications with them is too limited or at least too reunified. Look at what these applications offer. 80% of it is actually the task of a file explorer.
  - itohihiyt 2y ago
    > I think Zim does not really fit into the discussion because it does not rely on easily exchangeable standard software like a file explorer and browsers. Zim is very much based on the file system. Each note is a text file and if it has attachments or embedded images they go into a folder named after that text note. Whilst not in markdown the markup used is easy to understand and convert. Zim itself allows you to copy a note to the clipboard in pandoc markdown and export the note to markdown and/or html (though admittedly the styling for html it atrocious).
    - Pfeil 2y ago
      Yes, but you rely on a working installed software. If it is not properly maintained, you will need to switch at some point, and therefore change your current workflow. The assumption here is that file and web browsers will exist for a long time and not only make the data sustainable, but also the way you use it. Some of the other approaches shown in the comments make the browser not only the viewer, but also the tool. I am not saying zim and obsidian are completely different, but the assumption made above is significantly less likely to hold for these tools. I am not against zim or obsidian. In fact, I currently use plain markdown wit vs code, which boils down to a similar situation. But vs code and its extensions may be gone in a while and then I will have to look what to do.
thenoblesunfish 2y ago
Glad to see my own instincts here. Filesystems, text files, plain HTML, fun, long-lasting.
nyc111 2y ago
I use org-mode export to HTML and then ftp that to the server. Is the OP doing the same without the org-mode?
zirkuswurstikus 2y ago
Personally, I prefer VimWiki for taking notes during my work. So it is a place to mix ideas, small documentations and snippets of things I found on the web. Since I most of the time like to store articles, tutorial or nifty tricks, I like to store the entire website. For this task, my favorite Tool is SingleFile[1]. With SingleFile you can save a Website with embedded images. Also, you can add annotations, and cut away annoying Ads etc. Besides, it supports a distraction free copy of the website. I can highly recommend taking a look. [1]https://github.com/gildas-lormeau/SingleFile https://github.com/gildas-lormeau/SingleFile
- paravz 2y ago
  SingleFile is fantastic, became part of my "standard" browser install, next to uBlock and Tree Style Tab
miragecraft 2y ago
I'm doing the same except with the convenience of HTML includes. https://miragecraft.com/projects/x-include https://miragecraft.com/projects/x-include
RadiozRadioz 2y ago
> folders require you to use hierarchical organisation I find symlinks work for this, which is what I do. I have big directories with the raw pictures dumped from my devices, then categorized directories linking to them.
ericyd 2y ago
I always find posts like this fascinating. I love the direction of going low tech and maintainable, but I have never once found myself spending significant time looking through old work. Photos are the one exception but I've always been fine just scrolling through my personal timeline of date-sorted photos. I used to spend more time on this sort of thing when I was younger and then at some point I just realized I'm never actually looking at it. I'd be curious to know some of the reasons people are frequently revising work from years ago?
- famahar 2y ago
  I rarely go back to screenshot but whenever I do I find inspiration and have even started projects suddenly. I think what I need is an archive that also randomly surfaces one of them once a day.
- rnewme 2y ago
  Life revised is life lived twice.
smugglerFlynn 2y ago
Just thought it would be cool to have a personal "data lifeboat", similar to Twitter export, for exporting Instagram
GrumpyNl 2y ago
Why the html files? You can just expose your directory structure on the web, no need for html.
lloeki 2y ago
> Using a static website like this isn’t new – my inspiration was Twitter’s account export, which gives you a mini-website you can browse locally. I’ve seen several other social media platforms that give you a website as a human-friendly way to browse your data. I've read somewhere that Telegram exports work this way, you get a bunch of raw files somehow organised with directories and browsable by themselves, with a tiny local static website to browse them more conveniently. So different from the last such mass export I used: Google Takeout, which produces a dumb dump of cryptic xml and raw files named in some nonsensical (to the user) scheme. To this day I'm not even sure I got all the data I asked for before deleting it cloudside.
- approxim8ion 2y ago
  Facebook does (or at least used to when I left it a few years ago) this too. They give you a huge dump of your data and photos, with an html file to help you navigate it better.

391 points by ingve 2y ago

noja 2y ago

https://www.filestash.app/ https://www.filestash.app/

I copy the images in my clipboard and save them in an HTML file to have single-file galleries: https://gist.github.com/egeozcan/b27e11a7e776972d18603222fa523ed4 https://gist.github.com/egeozcan/b27e11a7e776972d18603222fa5... Live: https://gistpreview.github.io/?b27e11a7e776972d18603222fa523ed4 https://gistpreview.github.io/?b27e11a7e776972d18603222fa523... Selecting via file-picker works too. Dragging usually does not. When all works, images are inserted inline as blobs. After adding images, if you save the page (literally file->save), the blobs are saved together. don't want a part when saving (for example, removing images)? inspect element, remove, save page. throw the page on some server or just double click on your computer/mobile.

joncfoo 2y ago
That is slick. Offline first in the truest sense.
freetonik 2y ago
This is very cool, thank you for sharing.
mikae1 2y ago
Love it! True to the original vision of the WWW. Tim Berners-Lee's WorldWideWeb browser was also an editor. https://github.com/cadars/john-doe https://github.com/cadars/john-doe gives me the same feels.
- _giorgio_ 2y ago
  LOL
thatcat 2y ago
Very cool design! note if you can't get it to work, make sure you set file type to complete webpage when saving.
simonw 2y ago
That's really neat! You could add a "Download this page" button on the page which does some tricks to produce an HTML file with the images baked in that the user can download, which could work on mobile. Here's a quick prototype: https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd329 https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd... - code here: https://gist.github.com/simonw/14a2c3ef508839f26377707dbf5dd329 https://gist.github.com/simonw/14a2c3ef508839f26377707dbf5dd...
- egeozcan 2y ago
  Thank you! Great idea, I'll give it a try :)
- DemocracyFTW2 2y ago
  Can also recommend Single File browser extension https://github.com/gildas-lormeau/SingleFile-MV3 https://github.com/gildas-lormeau/SingleFile-MV3
dmje 2y ago
Thanks for sharing! Mind: expanded

mathnmusic 2y ago

Strict hierarchies are indeed too rigid. What about using a tag-based file manager like TagSpaces (which is free and open-source)?

deafpolygon 2y ago
MacOS also supports tags.
deleted 2y ago
[deleted]

lovegrenoble 2y ago

nice idea

freitzzz 2y ago

Really nice idea! As a data hoarder myself, I think I will follow this as way to remind myself of the things I truly should archive :)

Rhapso 2y ago

I convert content to markdown and relevant images and then store them in an obsidian vault. I self-sync it with syncthing. It has quickly become a rather effective zettelkasten memory prosthetic on my laptop and phone. I also use google/facebook takeouts, reformat the results, and store+index all my human-facing correspondence in there. Text is cheap and I avoid most images. Its still under 200mb and instantly searchable with a nice UI and as a bunch of markdown files it is easily portable.

PoignardAzur 2y ago
> zettelkasten memory prosthetic You're really going to drop these three words without any context?
- Rhapso 2y ago
  I was hit on the head a lot as a child. My memory isn't great, so I take a LOT of notes. Those notes and the writing/searching tools to use them are very literally a memory prosthetic. Zettelkasten is a methodology of organizing a LOT of notes. I index by topic, date and people involved. I can look up a friend and re-read every shared IM, email, and event I logged almost instantly. Faster than any website can. It's my own personal pile of papers future historians will be excited to find because they can actually read it. One of my biggest frustrations is that most of my note-taking tools are not permitted in my workplace for security reasons. I have to keep all my notes on their infrastructure. I'm going to loose a chunk of my brain when I change jobs someday.
  - sourcepluck 2y ago
    Have you thought about writing up a lovely tutorial on this going into all the details? Seems like a lovely setup!
    - Rhapso 2y ago
      Its in the backlog of notes labeled "blog post ideas" :'( I think more general tooling to "convert your assorted takeouts into a local database" is higher on my todo list. I have a bunch of python scripts I cobbled together to convert things. If we can get it all into an easy to use database, everybody could do their own things with them more easily.

massimoto 2y ago

I recently wrote a static site generator from AnyBox's local database, since they currently only allow for backups via iCloud which is locked down on my work laptop. I was surprised by the peace of mind it gave me to have a nice, 100% portable version of my vast bookmark/website archives.

pomdtr 2y ago

I had similar thoughts, and built myself a little framework for this: https://www.smallweb.run https://www.smallweb.run The key feature it adds compared to your own setup is mapping subfolders to subdomains (+ dynamic websites, but you don't seem interested in that). ex: ~/smallweb/example => https://example.localhost https://example.localhost We have a little discord community at https://discord.smallweb.run https://discord.smallweb.run if anyone is interested.

tga 2y ago
It looks like you just reinvented CGI/PHP.
- pomdtr 2y ago
  Yeah you guessed it, smallweb is basically CGI meets Deno sandboxing + https imports.

ejddhbrbrrnrn 2y ago

Markdown files can be a magic low effort way to get this. Even less fancy. Just stick an md file and it is easy to link to stuff. Open it in VS Code. You can go full zettlekasten but you can also just drop some notes around.

chrisweekly 2y ago
that's one of the things I love about Obsidian -- at the end of the day, it's "just" an extraordinarily powerful interface to Markdown files.

lazylizard 2y ago

https://linux.die.net/man/1/tree https://linux.die.net/man/1/tree will list your directory tree as a html file..helpful?

justusthane 2y ago

For myself at least, there's no way I'd stick with this over the long run given the overhead of hand-editing an HTML file (however quick and simple) every time I needed to add an item to a collection. Seems like an ideal use for a very simple DIY static-site generator. Write it in Bash or Perl and it will be future-proofed forever.

zoobab 2y ago

PDF is better for archiving, but what about videos? HTML ready sucks for archiving.

klez 2y ago
Can you please explain what you mean that PDF is better for archiving while HTML sucks in this aspect? What aspects of the formats are you basing this on?
- deleted 2y ago
  [deleted]
- gazook89 2y ago
  I’m not the commenter but I Imagine it just boils down to what you are archiving, but in any case I don’t think the commenter really understands what html is being used for here. The “preserved” material doesn’t have to be html, the html is just to set up the directory navigation. In the blog post, they even mention that each type of material is its own website so that each website can be designed to handle that file/data type.
approxim8ion 2y ago
HTML supports video just fine and has for years. Can't imagine why it would be an issue.

crtasm 2y ago

>folders require you to use hierarchical organisation, and everything has to be stored in exactly one place. You can make aliases/shortcuts to files on MacOS, can't you?

prmoustache 2y ago
On pretty much any modern OS that uses a modern filesystem that is not exfat I believe.
kccqzy 2y ago
Personally I used to use the saved search feature in macOS which is much more convenient than aliases or symlinks. You can specify what to search for and then save them. The files themselves can have arbitrary text based metadata just by writing Spotlight comments for the files. For example for screenshots, I write in the spotlight comments things like from which app I took the screenshot and why I took this screenshot ("funny" or "delightful UI") and then I have a saved search that only searches for PNG files in the Screenshots folder with keyword "funny" (you get the idea). The actual files are of course still organized in folders by year just like the author.

G_o_D 2y ago

Been doing so since 15 years, i make portable html with embedded images, mp3 and much so that i dont need any special software for viewing, just carry it in cloud or my phone nowadays and you only need a browser on any device any os. With embedded mp3 in html, (yes size may grew large) l, but i dont need special music player software or app just browser, Nowadays along with html i try to archive using MHTML format instead of manually embedding Run a simple http server and start browsing archives FOR IMAGES I DO IS ---> Store all images in Folder ---> Open localhost server ---> Open folder in browser ---> Using javascript convert links to <img> tag with src=link --> Once browser fetches and displays all images Save as and i have embedded MHTML archive Or simple bash script can be used to create html with img tag and links to folder Or you can manuaaly template a MHTML BUT i let my browser do the heavy work why go manual, Also instead of BASE64 EMBED, EMDEDDING DIRECTLY BINARY IMAGES IN MHTML IS QUITE MORE EFFECTIVE AND LESS MEMORY CONSUMING Eg i have 15 images MHTML (binary encode) -> 4MB MHTML (BASE64 ENCODE) -> 5MB Another method i use is, Run python -m http.server on any folder Or linux : tree -H http://localhost:8000 http://localhost:8000 Set recursion depth Then open folder link from server or tree created HTML IN BROWSER in cmd execute wget -rkpN -e robots=off http://localhost:8000 http://localhost:8000 It will recreate folder with index.html for you to browse, you dont need server then for viewing Same as export from google or twitter or youtube

corinroyal 2y ago

This excites me. Imagine someone not overcomplicating web tech. I've been thinking of having web sites render as epubs so we don't have to have a sysadmin on call 24/7 just so I can read.

stared 2y ago

For personal use, I rely on Obsidian in a similar way—whenever I want to keep something (like an FB post I might want to share later), I save it along with the source link. External services can disappear anytime, so local data has the dual advantage of being owned by us and easily searchable. I also wrote a script to convert Kindle highlights into Markdown files. If anyone’s interested, I'd be happy to polish it a bit and share. For public-facing content, the Static Site Generator ecosystem keeps improving. I started with Jekyll (since it's the GitHub default), moved through Gridsome, and eventually landed on Nuxt 3 Content, which feels like the sweet spot for me. If I were starting now, I might have chosen Astro. In any case, the barrier to entry has never been lower. We can host sites for free on GitHub, and if custom styling is needed, AI models are incredibly helpful with CSS. Markdown is like JavaScript for text formatting. Despite its quirks, it just works.

darylfritz 2y ago
I'm interested in your Kindle script. I'm curious about how you handle saving FB posts—do you just copy and paste the content, convert it to markdown, and store it in Obsidian? Would love to hear more about your process!
- stared 2y ago
  Here is the script. You need to download "My Clippings.txt" from your Kindle device. https://gist.github.com/stared/ce732ef27d97d559b34d7e294481f1b0 https://gist.github.com/stared/ce732ef27d97d559b34d7e294481f... Regarding Facebook, I do it manually only for selected posts. I tried to do it otherwise, but Facebook exports don't have data about likes (it would be helpful to filter popular content) or comments (often more important than the original post itself).
  - mgobl 2y ago
    Do you know if this file is possible to recover from/for kindle app highlights? (ie. off an Android Tablet) Or only off a kindle device?
byteknight 2y ago

mediumsmart 2y ago

thank you for posting, I have the same experiences looking for a good way to organize files etc - I tested this now and asked the oracle to write me a bash script that finds all images starting with Screenshot and list them in an html file that grids them at 200px width with click fill screen and second click dismiss. Such a good way to have an overview - going to implement that across the HD.

chrisweekly 2y ago

Awesome post. I'm inspired to take a similar approach. Related tangent: https://sive.rs/ti https://sive.rs/ti is author/entrepreneur Derek Sivers' script for reproducing his bare-bones, low-overhead, long-term "Tech Independence" stack.

meonkeys 2y ago

Lots of folks mentioning Markdown in the comments. +1 to that. Plain text FTW. I think a lot about my own data hoarding / archiving, and plain text is such a key part of that. Very future-proof. Ever since WordPerfect I've preferred more deterministic, lightly-formatted documents with some way to see formatting characters directly. Markdown is brilliant, basically a DSL (domain-specific language) for HTML. The key to plain text is tooling! A couple Markdown tools I haven't seen mentioned here yet (even though they've come up on HN before) are: https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/ https://addons.mozilla.org/en-US/firefox/addon/markdown-view... - pretty-render Markdown right in the browser https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/ - standalone web-friendly Markdown formatter with many features

codazoda 2y ago
I use GitHub to host my markdown files. A bit more information is in this article I wrote about it. I actually have 4 or 5 similar articles with various thoughts on this. I'm trying to find a way to make it simpler, maybe even for non-technical users, but I'm not there yet. https://joeldare.com/using-neat-css-on-github-pages https://joeldare.com/using-neat-css-on-github-pages
tducret 2y ago
Hey, I made a small JS that allows you to host a markdown file directly (no pre-conversion or plugin needed). It is rendered in the browser as HTML. It can definitely be used in such a local website, giving the convenience of just writing plain markdown. => https://www.tducret.com/pure-markdown/ https://www.tducret.com/pure-markdown/ (source code) https://github.com/tducret/pure-markdown https://github.com/tducret/pure-markdown
- telgareith 2y ago
  Looks more like you just made an HTML page that invokes "marked. Min. Js" from the npm cdn. Neat demo.
- Brajeshwar 2y ago
  This is nice. I have used https://ndossougbe.github.io/strapdown/ https://ndossougbe.github.io/strapdown/ to quickly throw out MarkDown files for people to see as rendered HTMLs. I love the cleanliness of your script. Thanks.

itohihiyt 2y ago

Why not use a wiki? Zim desktop is text based local first. It doesn't handle videos but everything is handled. Search is good and you get the other benefits of a wiki. No mobile client, that I'm aware of.

Pfeil 2y ago
Markor is an Android Text Editor with Zim (and other markup) Support, althogh I never used the Zim compatibility. But it is probably worth a try. I like that zim is not automatically a hosted solution but a local app. I would love to see more local apps for archiving solutions and PKM. I just have some issues with the Zim app itself. It works nice for some of my use cases, but not for all. And I wish it would just use markdown (I know it has limits). Stuff like that. I think Zim does not really fit into the discussion because it does not rely on easily exchangeable standard software like a file explorer and browsers. That said, I believe that notetaking applications mostly exist because file explorers do an extremely bad job and integrating applications with them is too limited or at least too reunified. Look at what these applications offer. 80% of it is actually the task of a file explorer.
- itohihiyt 2y ago
  > I think Zim does not really fit into the discussion because it does not rely on easily exchangeable standard software like a file explorer and browsers. Zim is very much based on the file system. Each note is a text file and if it has attachments or embedded images they go into a folder named after that text note. Whilst not in markdown the markup used is easy to understand and convert. Zim itself allows you to copy a note to the clipboard in pandoc markdown and export the note to markdown and/or html (though admittedly the styling for html it atrocious).
  - Pfeil 2y ago
    Yes, but you rely on a working installed software. If it is not properly maintained, you will need to switch at some point, and therefore change your current workflow. The assumption here is that file and web browsers will exist for a long time and not only make the data sustainable, but also the way you use it. Some of the other approaches shown in the comments make the browser not only the viewer, but also the tool. I am not saying zim and obsidian are completely different, but the assumption made above is significantly less likely to hold for these tools. I am not against zim or obsidian. In fact, I currently use plain markdown wit vs code, which boils down to a similar situation. But vs code and its extensions may be gone in a while and then I will have to look what to do.

thenoblesunfish 2y ago

Glad to see my own instincts here. Filesystems, text files, plain HTML, fun, long-lasting.

nyc111 2y ago

I use org-mode export to HTML and then ftp that to the server. Is the OP doing the same without the org-mode?

zirkuswurstikus 2y ago

Personally, I prefer VimWiki for taking notes during my work. So it is a place to mix ideas, small documentations and snippets of things I found on the web. Since I most of the time like to store articles, tutorial or nifty tricks, I like to store the entire website. For this task, my favorite Tool is SingleFile[1]. With SingleFile you can save a Website with embedded images. Also, you can add annotations, and cut away annoying Ads etc. Besides, it supports a distraction free copy of the website. I can highly recommend taking a look. [1]https://github.com/gildas-lormeau/SingleFile https://github.com/gildas-lormeau/SingleFile

paravz 2y ago
SingleFile is fantastic, became part of my "standard" browser install, next to uBlock and Tree Style Tab

miragecraft 2y ago

I'm doing the same except with the convenience of HTML includes. https://miragecraft.com/projects/x-include https://miragecraft.com/projects/x-include

RadiozRadioz 2y ago

> folders require you to use hierarchical organisation I find symlinks work for this, which is what I do. I have big directories with the raw pictures dumped from my devices, then categorized directories linking to them.

ericyd 2y ago

I always find posts like this fascinating. I love the direction of going low tech and maintainable, but I have never once found myself spending significant time looking through old work. Photos are the one exception but I've always been fine just scrolling through my personal timeline of date-sorted photos. I used to spend more time on this sort of thing when I was younger and then at some point I just realized I'm never actually looking at it. I'd be curious to know some of the reasons people are frequently revising work from years ago?

famahar 2y ago
I rarely go back to screenshot but whenever I do I find inspiration and have even started projects suddenly. I think what I need is an archive that also randomly surfaces one of them once a day.
rnewme 2y ago
Life revised is life lived twice.

smugglerFlynn 2y ago

Just thought it would be cool to have a personal "data lifeboat", similar to Twitter export, for exporting Instagram

GrumpyNl 2y ago

Why the html files? You can just expose your directory structure on the web, no need for html.

lloeki 2y ago

> Using a static website like this isn’t new – my inspiration was Twitter’s account export, which gives you a mini-website you can browse locally. I’ve seen several other social media platforms that give you a website as a human-friendly way to browse your data. I've read somewhere that Telegram exports work this way, you get a bunch of raw files somehow organised with directories and browsable by themselves, with a tiny local static website to browse them more conveniently. So different from the last such mass export I used: Google Takeout, which produces a dumb dump of cryptic xml and raw files named in some nonsensical (to the user) scheme. To this day I'm not even sure I got all the data I asked for before deleting it cloudside.

approxim8ion 2y ago
Facebook does (or at least used to when I left it a few years ago) this too. They give you a huge dump of your data and photos, with an html file to help you navigate it better.