Projects/Family Homepage and Navigation
Tools

Family Homepage and Navigation

Homer single-page navigation: 15+ self-hosted service entries, directly accessible on one page on mobile and desktop.

中文版 ↗← Back

What It Is

This is a Homer single-page navigation page I run on my Homelab. The title is "Xie Jun's Self-Hosted Services," and the subtitle says "Sixteen entries on a single page." Open the same address on a phone or computer, and fifteen or sixteen self-hosted services are laid out on one page. One click gets you there—no more digging through bookmarks or typing domains from memory.

Why I Built It

Once there are more services, problems appear: some use domains, some still have ports, and some hide behind paths. Over time, even I can't remember them all. Add tunnel consolidation—everything changed to portless, path-based routing—and the entry points changed once, making a unified place to centralize them even more necessary. Homer is just lightweight enough: a static page + a YAML file, no database, and no need to maintain another backend just for a navigation page.

How to Use

Configuration is in config.yml: title, subtitle, columns: "3", layout: list, colorTheme: auto. Links default to target: "_blank" to open in a new window, and connectivity: true conveniently checks whether each site is reachable. Groups are by purpose. For example, under "My Services" are AI chat (Open WebUI), email (SnappyMail), code repository (Gitea), AI console (DeepSeek Harness, password required), plus handy entries like one-click "Sync Now" and novel reading.

The page also pulls in a smart-status.json: the SMART health check results for two disks are read and displayed directly—sda is WDC WD30EFRX, sdb is BIWIN SSD, current health is PASSED for both, and temperature, reallocated sectors, and power-on hours are listed as well, with overall as OK. To see whether the disks are okay, the homepage is enough.

Current Status

Running, with entries grown from the earliest fourteen to sixteen. I change the configuration fairly often, so I keep a .bak backup before each change; historical versions are also stored in /opt/web/homer-backups/, so I can roll back anytime if a change breaks it. PWA icons, manifest, and theme wallpaper are all configured; add it to the home screen and it looks like a proper app.

Features

  • 单页收纳 15+ 个自建服务入口，三列列表布局，手机电脑同页直达
  • 全部走无端口域名 / 路径分流，隧道整合后的统一收口
  • 按用途分组：AI 对话、邮箱、代码仓库、AI 控制台、同步入口等
  • 首页读取 smart-status.json 展示硬盘 SMART 健康、温度与重映射扇区
  • PWA 化：manifest + 多尺寸图标，可添加到主屏
  • 配置改动前留 .bak 备份，历史版本集中在 homer-backups 目录

Stack: Homer · YAML · Nginx Proxy Manager · PWA · JSON · CSS

Deployment Approach

Homer is a purely static site, with two ways to run it: hand it to Nginx for direct hosting, or spin up a container using the official image. I use static hosting plus a reverse proxy, with path-based routing, so it doesn't occupy a port.

Steps

  1. Get the files. Grab an assets directory from the official Homer repository (containing config.yml, custom.css.sample, icons/, themes/) and put it in /opt/web/homer-assets.
  2. Edit the config. Edit config.yml: first set title, subtitle, logo, then set columns: "3" and defaults (layout: list, colorTheme: auto, target: "_blank"). connectivity: true performs connectivity checks, which slows down homepage loading a bit when you have many services — turn it off if that bothers you.
  3. Fill in services. services is a series of groups, each with name and icon; within items, each entry specifies name, subtitle, url, icon. For icons, just use Font Awesome class names, e.g. fas fa-envelope. If a single entry needs to open in a new window vs. the current window, write target on that entry individually.
  4. Back up before making changes. Before editing, run cp config.yml config.yml.bak-$(date +%Y%m%d-%H%M%S), and move historical versions uniformly to /opt/web/homer-backups/. One wrong space in YAML indentation blanks the whole page — with a backup, you won't panic.
  5. Hook up status data. To display disk health, write the output of the SMART check script to assets/smart-status.json, following the checked_at / overall / disks structure for fields; the frontend reads it directly.
  6. PWA and icons. Configure name, short_name, start_url, theme_color in manifest.json, then add pwa-192x192.png, pwa-512x512.png, apple-touch-icon.png, favicon.ico. Once added to the home screen on mobile, it opens fullscreen.
  7. Reverse proxy. Create a proxy entry in NPM pointing to the site where the homer directory lives; if going through a tunnel, keep the portless, path-based routing style, and don't tack a port onto the url.

Styling Tweaks

To change the color scheme or wallpaper, copy custom.css.sample to custom.css and edit it; put theme wallpapers in themes/<name>/. After changes, do a hard refresh — browser cache is quite stubborn.