HTML как архивный формат. Локальные мини-сайты

В перспективе отключения глобального интернета в РФ актуальным становятся разные способы сохранять информацию в офлайне для последующего потребления: архивы кинофильмов, музыки, книг, копии сайтов — своя мини-версия Архива интернета ^[1].

Отдельного внимания заслуживает личный информационный архив, куда мы сохраняем самую ценную приватную информацию: скриншоты рабочих проектов, закладки, домашнее видео и прочее. Но в каком виде информация наиболее удобна для просмотра и поиска?

Один из вариантов — генерация локальных мини-сайтов ^[2] с перекрёстными гиперссылками. В таком виде информация воспринимается очень комфортно.

Мини-архив интернета

Личный «архив интернета» — гарантия сохранности информации на случай, если сайт прекратит существование. Есть специальный софт ^[3], с помощью которого удобно автоматически сохранять на диске все посещённые веб-страницы и медиаконтент, а затем индексировать их для полнотекстового поиска.

Личный архив

Личный архив — это отдельная история, потому что он необходим человеку как «цифровая память» о его жизни: это домашние фото, видео, закладки, персональные документы и т. д. Отбирая контент для такого архива, важно не переборщить с количеством файлов, фильтровать и удалять лишнее ^[4], иначе в миллионах фото- и видеозаписей невозможно будет разобраться без специального мозгового импланта:

За годы цифрового накопительства может скопиться огромное количество ненужного хлама. В статье «Цифровое хомячество и цифровой минимализм» ^[5] мы обсуждали вещизм и цифровое скопидомство как «накопление цифровых файлов до степени потери перспективы, что приводит к стрессу и дезорганизации».

Учёные давно исследуют этот феномен ^[6].

Если мы почистили архив и избавились от лишнего, то следующий шаг — представить всё в удобном виде для навигации.

Статические сайты

Статические мини-сайты ^[2] — специально сгенерированные сайты из коллекций файлов.

Для каждой коллекции создаётся отдельный сайт. Например, для скриншотов:

Статический сайт пишется вручную ^[7], просто в Блокноте:

<h1>Закладки</h1>

<ul>
  <li><a href="https://estherschindler.medium.com/the-old-family-photos-project-lessons-in-creating-family-photos-that-people-want-to-keep-ea3909129943">Lessons in creating family photos that people want to keep, by Esther Schindler (2018)</a></li>
  <li><a href="https://www.theatlantic.com/technology/archive/2015/01/why-i-am-not-a-maker/384767/">Why I Am Not a Maker, by Debbie Chachra (The Atlantic, 2015)</a></li>
  <li><a href="https://meyerweb.com/eric/thoughts/2014/06/10/so-many-nevers/">So Many Nevers, by Eric Meyer (2014)</a></li>
</ul>

На этой демо-странице ^[8] можно посмотреть, как реализовать фильтрацию, сортировку и другие простые функции на JS. Вот также подробная инструкция ^[7] на эту тему.

Сохранять скриншоты крайне важно для рабочего архива ^[9]. Скриншоты с датами помогают быстро восстановить контекст, то есть вспомнить рабочий проект, включая конфигурацию ПК (аппаратная платформа, ОС), конфигурацию среды разработки (IDE, версии инструментов), условия сборки, компиляции и выполнения программы и т. д.:

Вот простой генератор ^[10] веб-страничек с превьюшками изображений из файлов, демо ^[11].

Пример сайта для закладок:

Для подборки любимых кинофильмов и видеоклипов:

Такие же отдельные сайты можно сгенерировать для документов, домашних фотографий и других коллекций файлов, при необходимости.

У каждой подборки — свой сайт, со своим дизайном, который наилучшим образом подходит к конкретной тематической подборке. Архив скриншотов представляет собой сетку миниатюрных копий для предпросмотра, а сайт для закладок — это ряд текстовых ссылок с кратким описанием.

Мини-сайт с картинками для предпросмотра немного информативнее и удобнее, чем просто коллекция папок в Проводнике. Например, по ссылкам удобнее перемещаться, чем по папкам в каталоге.

В то же время сайт легко генерируется из коллекции папок, не нужно менять даже файловую структуру. Просто в корневую директорию добавляем index.html со ссылками:

Отдельные изображения хранятся в папках по годам, а в файле metadata.js — машиночитаемые метаданные, которые используются для отображения сетки изображений.

Автор оригинальной идеи ^[9] специально выбрал lowtech-подход, без каких-то фреймворков, веб-сервера или системы сборки, без излишнего использования JS. Это делается для максимальной простоты и долговечности. Весь код можно написать вручную в Блокноте, его легко прочитать и поддерживать спустя много десятилетий. Для небольших проектов это оптимальный вариант. Каждый сайт состоит максимум из нескольких сотен строк кода.

Кроме поддержки и долговечности, ещё одно преимущество простых мини-сайтов — портативность. Такие сайты легко переносятся с одной системы на другую, везде запускаются и открываются. Они почти не отличаются от обычного бэкапа, просто два дополнительных файла: index.html и metadata.js.

Кстати, одного файла index.html достаточно для создания многостраничного сайта ^[12], если для отдельных страниц использовать <section> с уникальными id:

Альтернативные подходы

Судя по статьям на Хабре, многие пользователи пробуют альтернативные подходы для организации личного архива. Например, много любителей органайзеров типа Obsidian ^[13], Evernote ^[14], DEVONThink ^[15] или Yojimbo ^[16].

Но перепробовав варианты, многие люди приходят к осознанию, что лучший ежедневник — это текстовый файл ^[17], а лучший информационный архив — коллекция хорошо организованных папок. Причина может быть в том, что каждое приложение вроде Evenote заставляет пользователя подстраиваться под логику приложения, как бы «переформатируя» собственную систему мышления ^[18]. Отдельные программы прямо позиционируют себя как ваш мозг ^[19], а такое «переформатирование» не всегда комфортно.

Некоторые программисты пишут ^[20] собственные информационные менеджеры, на Github их десятки ^[21].

Базовый HTML

Файлы и папки — самый простой и понятный «менеджер файлов». А интерфейс статического веб-сайта — простой UI для такого архива.

Файл index.html в корневой папке содержит список всех файлов, которые отображаются вместе с метаданными и тегами, что удобно для поиска и рубрикации. Файлы сгруппированы или по годам, или по первой букве. В любом случае, файловая структура используется только при добавлении новых файлов, ну а навигация и поиск — исключительно через UI, то есть веб-сайт.

VPS ^[22] хорошо подходит для такого рода хранилища, потому что представляет собой фронтенд к информационному архиву. Этот фронтенд доступен с любого компьютера или смартфона: можно запаролить сайт и выдавать доступ родственникам или доверенным лицам, которые имеют право на просмотр файлов. Главное, что такой центральный хаб доступен из любой точки мира.

HTML прост в обслуживании, гибок и никогда не устареет. Наверное, и через несколько сотен лет браузеры смогут отобразить HTML-страницы. По крайней мере, самые простые сайты 90-х отлично отображаются в браузере до сих пор.

Небольшие веб-сайты, как на примере выше — это уже в каком-то роде произведения искусства, потому что в отбор контента вложено время, силы и душа. Это тщательно отобранные файлы с понятным описанием, которые имеют реальную ценность.

Локальный веб-сайт с перекрёстными ссылками — универсальный способ для цифрового сохранения данных, то есть долговременного архива на десятилетия или столетия. К сожалению, современный интернет — крайне изменчивая среда. Например, в 2025 году уже недоступны 38% веб-сайтов из 2013 года ^[23], то есть «период полураспада» Интернета составляет примерно 17 лет. В таких условиях в Сети действует несколько проектов по долговременному сохранению цифрового контента для наших потомков. Например, программа Data Lifeboat ^[24] на фотохостинге Flickr позволяет скачать для локального хранения часть коллекции Flickr, вместе с лайками и комментариями. Этот фотохостинг с миллиардами фотографий называет себя «одним из крупнейших культурных архивов в истории человечества», который важно сохранить для будущих поколений.

Локальная коллекция Flickr Commons 1K ^[25]:

Экспорт коллекции Flickr тоже создаёт локальный веб-сайт с перекрёстными ссылками — самый удобный формат для долговременного хранения данных.

Аналогичный подход используют активисты фотоархива Historypin ^[26]: статические сайты как инструмент сохранения данных ^[27]. Для экспорта сайта в локальный мини-сайт разработана утилита pincushion ^[28].

Есть даже идея создания децентрализованного хранилища ^[29] для архива общественно полезной информации в пиринговой сети, которая не зависит ни от одной государственной или благотворительной организации. Такой проект может стать частью большого децентрализованного веба ^[30].

Таким образом, HTML (и Markdown) — отличный формат хранения информации, и не только для интернета, но и для локального архива.

© 2025 ООО «МТ ФИНАНС»