Homelab Dashboard v1.0: свой стартовый хаб из одного HTML-файла

Когда дома поднимается десятый сервис, закладки в браузере кончаются. У меня их было три папки, половина ссылок на внутренние адреса, и ни одна не работала с телефона. В итоге я собрал свой стартовый хаб — Homelab Dashboard: одна HTML-страница, которая живёт на сервере и показывает все свои сервисы и нужные внешние ссылки. Без бэкенда, без базы данных, без сборки и без зависимостей. Версия 1.0 — в этой статье: как запустить, что умеет и как подстроить под себя.

Как это запускается

Весь дашборд — один файл index.html. Его можно вообще не хостить: распаковать и открыть двойным кликом. Поиск, теги, перетаскивание плиток, экспорт и импорт работают и так, а свои ссылки лежат в localStorage браузера.

Второй вариант — постоянная страница в локальной сети, чтобы заходить с любого устройства, включая телефон. Раздаёт файл обычный nginx, одной командой:

docker run -d --name dashboard --restart unless-stopped \
  -p 8090:80 \
  -v "/opt/dashboard:/usr/share/nginx/html:ro" \
  nginx:alpine

Или через compose, если у вас уже есть свой docker-compose.yml для домашней инфраструктуры:

services:
  dashboard:
    image: nginx:alpine
    ports: ["8090:80"]
    volumes:
      - ./:/usr/share/nginx/html:ro
    restart: unless-stopped

Дальше — http://адрес-сервера:8090/. Сам файл правится в любом текстовом редакторе, рестарт контейнера не нужен: папка смонтирована только на чтение, достаточно перезагрузить страницу. Итого цена «серверной части» — 63 МБ образа nginx и одна строка проброса порта.

Как это создавалось

Первая версия была на 26 КБ: просто список ссылок, сгруппированный по серверам, плюс форма добавления. Работало, но упиралось в то, что список нельзя было быстро рассортировать и отфильтровать. Вторая версия выросла до семисот строк и обросла поиском, тегами, избранным и перетаскиванием.

Три решения, которые определили вид:

• Один файл, чистый JS. Никакого фреймворка, сборщика и CDN. Открывается офлайн, чинится за минуту, живёт вечно — сломаться ему нечем.
• Хранение в браузере. Ссылки, теги, избранное и порядок плиток пишутся в localStorage (ключи homelabLinks_v2 и homelabSettings_v1). Серверу не о чём заботиться, бэкап не нужен — вместо него экспорт в JSON.
• Заводской список прямо в коде. Массив DEFAULTS в начале скрипта — это то, что видит новый браузер. Хочешь свой набор — правь массив, это тот же конфиг.

Иконки — инлайн SVG прямо в файле (объект ICONS, 26 штук). Никаких запросов к сторонним сервисам за фавиконками: во-первых, адреса вида home-server:8096 всё равно никуда не резолвятся, во-вторых, страница не должна никуда стучаться сама.

Что умеет

• Поиск по названию, адресу, заметке, тегу и группе. Фокус в поле — клавиша / или Ctrl+K.
• Теги-фильтры в шапке, со счётчиками: видно, например, что llm — три сервиса, медиа — два.
• Группы-секции. Любые, от «Медиа» до «Инфра»; у каждой своя кнопка «+ в эту группу», так что добавить ссылку можно сразу куда надо.
• Перетаскивание плиток — как плитки в «Пуск» в Windows 11: берёшь и тащишь, соседние разъезжаются в реальном времени. Перетащить плитку в другую секцию — сменить группу. Работает и мышкой, и пальцем (на тач-экране — долгое нажатие).
• Избранное — звезда на карточке, избранное можно поднять наверх всех групп.
• Статус доступности. Зелёная точка означает, что порт отвечает: страница пробует fetch в режиме no-cors и смотрит, поднялось ли соединение. Никакого агента на сервере для этого не нужно.
• Копирование ссылки в буфер одной кнопкой — полезно для адресов вида http://home-server:8088, которые никто не набирает руками.
• Undo для удаления. Удалил плитку — внизу появляется «Вернуть». Никаких подтверждений на каждый чих.
• Экспорт и импорт JSON — перенос набора ссылок между браузером на телефоне и браузером на десктопе, заодно это бэкап.
• Автоподбор иконки по имени и адресу (Jellyfin, qBittorrent, роутер, DNS, гипервизор и т.д.), либо выбор из списка, либо просто буква названия.
• Мобильная вёрстка. На телефоне сетка сжимается до двух колонок, кнопки действий видны всегда.

Как подстроить под себя

Заводской набор — массив DEFAULTS. Формат строки:

{url:'http://home-server:8096/', name:'Jellyfin', group:'Медиа',
 tags:['медиа','видео'], note:'медиасервер', check:true, icon:'play'}

• group — секция на странице, новые группы создавать не надо, они появляются сами;
• tags — фильтры в шапке;
• check:true — пинговать доступность из браузера;
• icon — ключ из ICONS, пустая строка значит «показать первую букву», а если поля нет вообще — включится автоподбор.

Правки в DEFAULTS подхватываются, если localStorage пуст, либо после «⚙ → Сбросить к заводским». Всё, что добавлено из интерфейса, живёт в браузере и в файл не пишется.

Про приватность

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

Скачать версию 1.0

homelab-dashboard-v1.0.zip — 16 КБ: index.html и README.md с командами запуска. Открывается двойным кликом, работает офлайн.

Что дальше

Это первая версия, и список на вторую уже есть:

• светлая тема и переключатель (сейчас только тёмная);
• свои иконки-загрузки: PNG/SVG для конкретной ссылки вместо подбора;
• вариант хранения на сервере (маленький JSON рядом с файлом), чтобы порядок и ссылки не разъезжались между браузером на телефоне и на десктопе;
• мини-виджеты вместо зелёной точки: место на диске, аптайм, счётчик загрузок;
• клавиша для быстрого переключения между группами.

Если есть идеи, что должно быть в версии 1.1 — пишите, прислушаюсь.