家庭主页与导航

它是什么

Homer 是一个由一份 YAML 驱动的静态导航页。我把家里 15 个以上自建服务的入口全收在这一个页面上，手机和电脑打开同一个地址，点一下就能进去。

为什么做

服务一多，问题就很明显：书签栏塞满、端口记不住、域名想不起来，每次找服务都要翻聊天记录。Homer 的做法很朴素——用一份 config.yml 描述分组、名称、图标和链接，页面完全由这份配置生成，改完刷新就生效。

解决了什么

• 入口分散：一个页面替代一堆书签，按“运维 / 媒体 / 工具”这类分组排开。
• 地址记不住：卡片上直接写清名称和副标题，端口、域名不用背。
• 手机不好用：响应式布局，手机上同样一屏可点，不用缩放。

现在的状态

运行中。静态文件放在 /opt/web/homer-assets，配置文件是 config.yml，前面用 NPM 做反向代理和 HTTPS 证书。日常维护就是改 YAML、刷新页面，不涉及数据库和后端进程，重启也不丢状态。

功能

• 15 个以上自建服务入口，按分组一页直达
• 整站由单份 config.yml 驱动，改完刷新即生效
• 响应式布局，手机与电脑共用同一地址
• 通过 NPM 统一域名与 HTTPS 证书
• 纯静态托管，无数据库、无后端进程

技术栈

使用 / 部署教程

部署步骤

1. 准备静态目录

把 Homer 的发布包解压，得到 index.html 和 assets/ 等静态文件，整体放到 /opt/web/homer-assets。真正需要你维护的只有 assets/config.yml 这一份配置。

2. 编写 config.yml

基本结构是 services 下挂若干分组，每个分组里列条目，常用字段包括 name、subtitle、logo、tag、url。建议先搭两三个分组跑通，再批量往里加，避免一次写错定位半天。缩进用空格，层级错一格页面就会空白。

3. 配置 Web 服务与反向代理

在 NPM 里新建一个 Proxy Host，域名填你自己的导航域名，上游指向承载静态文件的 Web 服务；如果直接用 Nginx，把 root 指到 /opt/web/homer-assets 即可。顺手在 SSL 页签申请证书并开启强制 HTTPS。

4. 验证

先用电脑浏览器打开域名，确认分组、图标、链接都正常；再用手机打开同一地址，检查卡片是否自动折行、点击区域够不够大。任何一项不对，回 config.yml 找对应条目。

5. 备份与维护

config.yml 是唯一有信息量的文件，把它纳入 Git 或定期复制一份出来。以后新增服务，只需要在配置里加一条，刷新页面生效，不用重新部署。