Usando sites estáticos para pequenos arquivos

 (alexwlchan.net)
4 pontos por GN⁺ 2024-10-19 | 1 comentários | Compartilhar no WhatsApp
  • Para conseguir reencontrar depois documentos, capturas de tela, favoritos e mídias acumulados localmente, a ideia é anexar um site estático a cada pequena coleção para facilitar a navegação
  • Cada coleção continua como uma pasta no disco, e um arquivo HTML na raiz é aberto no navegador para oferecer metadados e formas de organização mais ricas do que o Finder
  • Tudo é escrito manualmente, sem servidor web, sistema de build, dependências ou framework JavaScript, e cada site fica no máximo na casa de algumas centenas de linhas de código, o que combina com projetos pequenos
  • Hierarquias de pastas tradicionais, tags do Finder, apps “balde para tudo” e ferramentas próprias tinham, respectivamente, problemas de hierarquia forçada, limitações de implementação, necessidade de se adaptar à lógica do app e custo de manutenção
  • Organizar manualmente dá trabalho, mas ajuda a guardar só arquivos que realmente valem a pena, e a simplicidade do HTML favorece a preservação de longo prazo

Ver arquivos locais como mini sites

  • Criar um site estático para cada coleção e usar isso para navegar pelo arquivo local
    • documentos digitalizados
    • documentos criados por conta própria
    • capturas de tela salvas
    • favoritos de páginas da web
    • arquivos de vídeo e áudio salvos
  • Cada coleção pode ter uma interface diferente de acordo com o tipo de arquivo
    • a coleção de capturas de tela aparece em uma grade de imagens
    • os favoritos são mostrados como uma lista de links em texto
    • os vídeos são organizados em uma lista com miniaturas e texto
  • O objetivo não é criar um sistema complexo, mas sim uma interface de navegação de arquivos um pouco melhor que o Finder do macOS
    • é possível colocar mais metadados na página
    • dá para usar formas próprias de busca e organização

Estrutura e escolha de tecnologia

  • Cada coleção é uma pasta no disco local, e o site consiste em um ou mais arquivos HTML na raiz dessa pasta
  • No uso do dia a dia, o arquivo HTML é aberto diretamente no navegador
  • A ideia é manter tudo deliberadamente pequeno e simples do ponto de vista técnico
    • sem servidor web
    • sem sistema de build
    • sem dependências
    • sem framework JavaScript
  • Tudo é escrito à mão, mas isso continua administrável em projetos pequenos
    • cada site tem no máximo algumas centenas de linhas de código
  • A expectativa é que uma estrutura baseada apenas em arquivos no disco e HTML tenha alta durabilidade
    • preserva a simplicidade e a portabilidade da estrutura de pastas
    • e acrescenta só o necessário por cima

Por que as abordagens anteriores não duraram

  • O modelo comum de arquivos e pastas força uma estrutura hierárquica, e todo arquivo precisa estar exatamente em um único lugar
    • isso funciona bem para alguns tipos de dados, como código
    • mas foi difícil projetar uma hierarquia satisfatória para arquivos de mídia
    • a dúvida sobre em qual pasta colocar algo acabava deixando a área de trabalho bagunçada
  • A preferência é por etiquetagem por palavras-chave, porque ela permite aplicar vários rótulos a um arquivo e reencontrá-lo de formas diferentes
    • o Finder do macOS também suporta tags, mas a implementação não parece boa o bastante para uso importante
  • Apps “balde para tudo” como DEVONThink, Evernote e Yojimbo também não serviram bem
    • havia a sensação de precisar mudar a própria forma de pensar para se adaptar ao app
  • Também houve pelo menos umas 12 tentativas de criar ferramentas próprias para organizar arquivos, e uma das últimas foi o docstore
    • isso combinava melhor com a forma de pensar da pessoa, mas trazia custo de manutenção
    • a cada upgrade do Python ou atualização do macOS, alguma coisa quebrava e o código precisava ser corrigido

Como transformar pastas em mini sites

  • Ao colocar um arquivo HTML que funciona como índice na pasta principal, é possível exibir todos os arquivos com os metadados e tags desejados
  • Essa abordagem simplifica a estrutura de pastas e reduz a pressão de encontrar uma hierarquia perfeita
    • os arquivos normalmente são agrupados só por ano ou pela primeira letra do nome
    • as pastas só são vistas ao adicionar novos arquivos, não para navegação
    • para encontrar arquivos, o site é sempre o ponto de acesso
  • O site permite localizar arquivos de várias formas com tags por palavra-chave e esconde os detalhes da estrutura real de pastas
  • O HTML foi escolhido por ser uma tecnologia flexível, com pouca manutenção e baixa chance de desaparecer
    • é uma tecnologia fundamental da web
    • quase todo computador moderno tem um navegador capaz de renderizar páginas HTML
    • até o primeiro site escolar criado em 2006 ainda renderiza sem problemas em navegadores atuais

Por que isso funciona para arquivos “pequenos”

  • Como a organização dos arquivos, a escrita de metadados e a criação do visualizador são feitas em grande parte manualmente, isso não escala bem para coleções grandes
  • Mesmo para guardar algumas centenas de itens, o processo já consome tempo considerável, mas esse atrito ajuda a selecionar melhor o que vale a pena salvar
    • força a pensar se aquilo merece mesmo ser organizado direito
    • faz surgir a pergunta: se não vale nem um minuto para salvar agora, qual a chance de eu querer rever isso depois?
    • e, ao decidir salvar, a pessoa tende a caprichar mais nos metadados para facilitar a busca no futuro
  • Antes, havia milhares de arquivos acumulados em pastas grandes e vagas, sem organização adequada, e por isso acabavam nunca mais sendo vistos
  • Agora, existem pequenos sites com algumas centenas de itens, escolhidos com mais cuidado e descritos de forma mais útil
  • Mesmo gostando de automação, aqui a restrição de um processo mais manual é vista de forma positiva

Sites estáticos como ferramenta de preservação

  • A inspiração para essa abordagem veio da exportação de conta do Twitter
    • a exportação do Twitter entrega um mini site que pode ser navegado localmente
    • várias plataformas de mídia social também fornecem os dados em formato de site, para facilitar a navegação humana
  • Sites estáticos também podem ser úteis como abordagem de preservação digital para arquivos born-digital
    • simplicidade, longevidade e baixa manutenção têm ainda mais valor para instituições de memória que querem preservar algo por décadas ou séculos
    • é possível criar um site HTML básico só com o Bloco de Notas ou qualquer editor de texto simples
  • O Data Lifeboat project está criando sites estáticos maiores como forma de empacotar partes do arquivo do Flickr
    • arquivos locais costumam se parecer mais com uma visualização em lista, mas os sites dentro do Data Lifeboat têm mais páginas e funcionalidades
  • O texto de Ed Summers sobre sites estáticos para preservar o Historypin vai na mesma direção

Migração gradual e uso pessoal do HTML

  • Como já existem muitos arquivos espalhados pelo disco, mover tudo de uma vez exigiria bastante trabalho
  • Os arquivos novos passam a ser salvos nos sites estáticos, e os antigos são movidos do local original para a pasta apropriada do site estático conforme vão sendo reencontrados
  • Depois de montar a estrutura inicial do site, quase não houve custo de manutenção para mantê-lo funcionando
  • Para quem quer experimentar criar um site pela primeira vez, a recomendação é HTML for People, de Blake Watson
    • a proposta é a de que “qualquer pessoa que queira deveria poder criar um site em HTML”
  • Durante muito tempo, HTML foi visto como ferramenta para publicar sites para outras pessoas, mas ele também pode ser usado em arquivos pessoais locais
  • Em uma atualização de 19 de fevereiro de 2025, foi acrescentado o texto complementar How I create static websites for tiny archives, explicando os detalhes do código

Leituras relacionadas

1 comentários

 
GN⁺ 2024-10-19
Comentários do Hacker News

  • Copio imagens da área de transferência e as salvo em um arquivo HTML, usando-o como uma galeria de arquivo único
    https://gist.github.com/egeozcan/b27e11a7e776972d18603222fa5...
    Exemplo ao vivo: https://gistpreview.github.io/?b27e11a7e776972d18603222fa523...
    Selecionar pelo seletor de arquivos também funciona, mas arrastar geralmente não funciona bem. Quando funciona corretamente, a imagem é inserida inline no documento como blob
    Depois de adicionar imagens, se você salvar a página como está, ou seja, clicar em file->save, o blob também é salvo junto. Se quiser remover parte disso antes de salvar, por exemplo apagar uma imagem, basta abrir o inspetor de elementos, removê-la e então salvar a página
    Esse arquivo pode ser enviado para um servidor ou aberto com duplo clique no computador ou no celular

  • Estão falando muito de Markdown nos comentários, então deixo mais um voto a favor. Texto puro é o melhor. Penso muito em coleta e preservação de dados, e texto puro é central nisso, além de ter excelente compatibilidade futura
    Desde o WordPerfect, passei a preferir documentos em que a formatação é mais determinística e leve, e em que se pode ver diretamente os caracteres de formatação. Markdown é excelente e, na prática, quase um DSL para HTML
    O ponto central do texto puro são as ferramentas. Já apareceu no HN, mas há algumas ferramentas de Markdown que ainda não vi mencionadas aqui
    https://addons.mozilla.org/en-US/firefox/addon/markdown-view... - renderiza Markdown de forma agradável no navegador
    https://casual-effects.com/markdeep/ - formatador de Markdown independente, amigável para a web e cheio de recursos

    • Fiz um pequeno JS para hospedar diretamente arquivos Markdown. Eles são renderizados em HTML no navegador, sem pré-conversão nem plugins
      Ao usar isso em um site local desse tipo, você ganha a conveniência de simplesmente escrever Markdown comum
      => https://www.tducret.com/pure-markdown/
      Código-fonte: https://github.com/tducret/pure-markdown
    • Hospedo meus arquivos Markdown no GitHub. Organizei um pouco mais disso em um texto que escrevi. Na verdade tenho uns 4 ou 5 textos com ideias parecidas, e estou tentando encontrar uma forma de deixar tudo ainda mais simples
      Quero que usuários não técnicos também consigam usar, mas ainda não cheguei lá
      https://joeldare.com/using-neat-css-on-github-pages
    • Eu também tenho usado cada vez mais Plain Text. Escrevi minhas ideias sobre meu arquivo em https://brajeshwar.com/2022/plain-text/
      Muita gente chega pelo Google/Search procurando formas de fazer anotações em texto puro, e aquele texto simples parece ter ajudado

  • Converto o conteúdo para Markdown e imagens relacionadas, depois salvo tudo em um vault do Obsidian. A sincronização eu mesmo faço diretamente com Syncthing. Isso está virando uma ajuda de memória no estilo Zettelkasten bastante eficaz no notebook e no celular
    Também importo Google/Facebook Takeout, reformato os resultados e salvo e indexo lá toda correspondência visível para humanos. Texto é barato, então evito imagens na maioria dos casos. Ainda assim, continua com menos de 200MB, com busca instantânea por meio de uma boa UI, e como é um conjunto de arquivos Markdown, é fácil de mover

    • Você vai mesmo soltar essas três palavras, “ajuda de memória no estilo Zettelkasten”, sem nenhum contexto?
    • O que você usa para sincronizar o Obsidian no celular? Também é Syncthing?

  • Pessoalmente, dependo do Obsidian de um jeito parecido. Se há algo que quero guardar, como uma postagem no FB que talvez eu compartilhe depois, salvo junto com o link original. Serviços externos podem desaparecer a qualquer momento, então os dados locais têm duas vantagens: são nossos e fáceis de pesquisar
    Também fiz um script que converte destaques do Kindle em arquivos Markdown. Se alguém tiver interesse, posso dar uma polida e compartilhar
    Para conteúdo público, o ecossistema de geradores de sites estáticos continua melhorando. Comecei com Jekyll porque era o padrão do GitHub, passei pelo Gridsome e acabei ficando no Nuxt 3 Content, que hoje parece ser o ponto ideal para mim. Se eu começasse agora, talvez escolhesse Astro
    De qualquer forma, a barreira de entrada está mais baixa do que nunca. Dá para hospedar um site de graça no GitHub e, se você precisar de estilo personalizado, modelos de IA ajudam muito com CSS
    Markdown é como JavaScript para formatação de texto. Tem umas partes estranhas, mas no fim funciona bem

    • Eu fiz um fork do app Android [1] para que, ao compartilhar um texto com o app, ele o converta em Markdown e depois envie para o Obsidian. Também uso uma extensão do Firefox que, com a ajuda da extensão do Obsidian Advanced URI, envia para o Obsidian a versão em Markdown do texto, incluindo os metadados no começo[2]
      [1] https://github.com/IAmStoxe/obsidian-markdownr
      [2] https://addons.mozilla.org/en-US/firefox/addon/markdownload/ - também há uma extensão para Chrome
    • Tenho interesse no script do Kindle. Quando você salva postagens do FB, queria saber se você simplesmente copia e cola o conteúdo, converte para Markdown e depois coloca no Obsidian. Gostaria de ouvir mais sobre o fluxo real

  • Faço algo parecido há 15 anos. Crio HTML portátil com imagens incorporadas, mp3 etc., para que não seja necessário software separado para visualizar. Hoje em dia, se você carregar isso na nuvem ou no celular, basta ter um navegador, em qualquer dispositivo ou sistema operacional
    Incorporar mp3 em HTML pode aumentar o tamanho, mas você só precisa do navegador, sem player de música ou app separado
    Hoje em dia, em vez de incorporação manual junto com HTML, tento arquivar em formato MHTML
    Basta subir um servidor HTTP simples e navegar pelo arquivo
    Com imagens, faço assim: salvo todas as imagens em uma pasta → abro um servidor localhost → abro a pasta no navegador → com JavaScript, converto os links em tags com src=link → quando o navegador baixa e mostra todas as imagens, uso “salvar como” para obter um arquivo MHTML incorporado
    Ou dá para fazer um HTML com tags img e links para a pasta usando um script Bash simples, e também dá para montar o MHTML manualmente com um template
    Mas não há motivo para fazer isso manualmente quando o navegador pode fazer o trabalho pesado
    Além disso, em vez de incorporação em Base64, incorporar imagens binárias diretamente em MHTML é muito mais eficiente e consome menos memória. Por exemplo, com 15 imagens, a codificação binária em MHTML deu 4MB, enquanto a codificação Base64 em MHTML deu 5MB
    Outra forma é executar python -m http.server em qualquer pasta ou, no Linux, usar tree -H http://localhost:8000 definindo a profundidade recursiva
    Depois, abra no navegador os links de pasta do servidor ou o HTML gerado pelo tree e execute na linha de comando wget -rkpN -e robots=off http://localhost:8000, que ele recria a pasta com um index.html navegável. Depois disso, não é mais necessário um servidor para visualizar
    É o mesmo princípio de exportações do Google, Twitter e YouTube

  • Pensei em algo parecido e acabei criando eu mesmo um pequeno framework: https://www.smallweb.run
    Em comparação com montar tudo manualmente, o principal recurso extra é mapear subpastas para subdomínios. Também dá para fazer sites dinâmicos, mas aparentemente isso não interessa muito aqui
    Ex.: ~/smallweb/example => https://example.localhost
    Se houver interesse, também há uma pequena comunidade no Discord: https://discord.smallweb.run

    • Parece que você simplesmente recriou CGI/PHP

  • Pessoalmente, para escrever notas durante o trabalho, prefiro VimWiki. Uso como um lugar para misturar ideias, documentos curtos e trechos de código encontrados na web
    Como quero principalmente guardar textos, tutoriais e dicas úteis, costumo arquivar sites inteiros. Para isso, o SingleFile[1] é o que mais gosto
    Com o SingleFile, você pode salvar sites com imagens incorporadas, adicionar anotações ou cortar anúncios incômodos e outras coisas. Ele também oferece suporte a cópias de sites sem distrações. Recomendo muito dar uma olhada
    [1]https://github.com/gildas-lormeau/SingleFile

    • SingleFile é excelente. Está na minha lista padrão de instalação do navegador junto com uBlock e Tree Style Tab

  • Esse tipo de texto sempre é interessante. Gosto da direção low-tech e sustentável, mas nunca passei um tempo significativo procurando trabalhos antigos
    Fotos são exceção, mas para isso sempre bastou rolar uma linha do tempo de fotos pessoais ordenadas por data. Quando eu era mais novo, gastava mais tempo com esse tipo de coisa, mas em algum momento percebi que na prática eu quase nunca revisitava nada disso
    Fico curioso sobre por que as pessoas revisitam com frequência trabalhos de anos atrás

    • Eu raramente revejo capturas de tela, mas toda vez que vejo acabo me inspirando e às vezes começo um projeto do nada. Acho que preciso de um arquivo que me mostre uma aleatória por dia
    • Uma vida revisitada é uma vida vivida duas vezes

  • Pelo menos no meu caso, se eu tivesse que editar arquivos HTML manualmente toda vez que adicionasse um item à coleção, acho que nunca conseguiria manter isso no longo prazo, por mais rápido e simples que fosse
    Parece um caso ideal para usar um gerador de site estático DIY bem simples. Se for escrito em Bash ou Perl, provavelmente será compatível com o futuro para sempre

  • Usar um site estático desse jeito não é novidade. A inspiração veio da exportação da conta do Twitter, que fornece um pequeno site navegável localmente. Também vi várias outras plataformas de mídia social fornecerem um site para explorar os dados de um jeito legível para humanos
    Li em algum lugar que a exportação do Telegram também é assim. Os arquivos originais vêm mais ou menos organizados em diretórios e já podem ser explorados por si só, junto com um pequeno site estático local para navegar de forma mais conveniente
    É muito diferente do Google Takeout, que foi a última exportação em massa que usei. O Google Takeout simplesmente despeja arquivos brutos com uma convenção de nomes sem sentido para o usuário e um XML indecifrável
    Até hoje não tenho certeza se recebi todos os dados que solicitei antes de apagá-los do lado da nuvem

    • O Facebook também fazia isso quando saí de lá, anos atrás. Entregava um grande dump dos dados e das fotos, junto com arquivos HTML para facilitar a navegação