自托管服务越来越多：博客、网盘、监控、导航、AI 对话……收藏夹塞满了，记 IP 记到崩溃。Homepage 是答案：一个自托管的现代化导航 + 服务仪表盘，服务状态、常用入口、信息聚合一页搞定。同类工具见导航网站搭建。

一、Homepage 是什么：比导航站多一口气

传统导航站（OneNav/WebStack）只是"链接集合"。Homepage 在这个基础上加了仪表盘能力：

1. 服务入口：每个服务一张卡片，图标 + 名称 + 描述，一眼找到
2. 实时状态：集成 Docker API，显示每个容器运行状态/资源占用
3. 信息聚合：天气、日历、RSS、系统信息（CPU/内存/磁盘）一个组件搞定
4. 搜索：直达 Google/百度/GitHub 的多引擎搜索框
5. 现代 UI：响应式、暗色模式、卡片布局——拿得出手当门面

一句话：它是你所有自托管服务的"玄关"。

二、部署：Docker + Docker Socket 集成

docker run -d --name homepage \
  --restart unless-stopped \
  -p 127.0.0.1:3002:3000 \
  -v /data/homepage:/app/config \
  -v /var/run/docker.sock:/var/run/docker.sock:ro \
  ghcr.io/benphelps/homepage:latest

两个挂载是核心：

• /app/config：所有配置（服务、书签、布局）都在这个目录的 YAML 文件里，改配置 = 改文件，不用动容器
• docker.sock：让 Homepage 能读到 Docker 容器信息，实现状态显示和统计

首次访问 http://服务器IP:3002，默认空配置，开始填。

三、配置：三个文件管全部

/data/homepage/config/ 下的结构：

config/
├── settings.yaml      # 全局：标题、主题、布局、搜索引擎
├── services.yaml      # 服务分组和入口
├── bookmarks.yaml     # 书签
└── docker.yaml        # Docker 集成开关

1. settings.yaml——定基调

title: 我的控制台
theme: dark           # 或 light
color: slate
headerStyle: boxed

# 多引擎搜索框
search:
  provider: google    # 可选 baidu/bing/duckduckgo
  target: _blank

# 布局：几列
layout:
  媒体:
    style: row
    columns: 2

2. services.yaml——服务卡片

- 基础设施:
    - 博客:
        href: https://z0w.cn
        description: 技术教程站
        icon: typecho.png
    - 监控:
        href: https://status.yourdomain.com
        description: Uptime Kuma
        ping: https://status.yourdomain.com    # 自动探测可达性
    - 网盘:
        href: https://pan.yourdomain.com
        description: Cloudreve
        server: my-docker      # 关联 docker.yaml 里的主机，显示容器状态
        container: cloudreve   # 显示这个容器的运行状态和资源

ping 字段是亮点：Homepage 会自己探测服务通不通，卡片上直接显示在线/离线——轻量监控白送。要正经告警还是上 Uptime Kuma。

3. docker.yaml——容器状态

my-docker:
  host: unix:///var/run/docker.sock

配好后，services.yaml 里引用 server: my-docker + container: 容器名 的卡片会显示：运行中/已停止 + CPU/内存实时曲线。管理面板的仪式感拉满。

4. 信息组件（可选）

settings.yaml 里加：

# 天气（和风天气免费 key）
weather:
  location: 北京
  provider: qweather

# 系统资源概览
resources:
  cpu: true
  memory: true
  disk: /

四、图标：颜值的另一半

卡片图标不配，颜值减半。Homepage 用 Dashboard Icons 项目（几千个常用服务 SVG）：

# 下载图标包解压到 config/icons/
wget https://github.com/walkxcode/dashboard-icons/archive/refs/heads/main.zip
unzip main.zip -d /tmp/icons
cp /tmp/icons/dashboard-icons-main/svg/* /data/homepage/config/icons/

然后 icon: typecho.svg 直接引用。没有的服务图标，自己丢个 SVG/PNG 进 icons/ 目录即可。

五、对外服务：反代 + HTTPS

server {
    listen 443 ssl;
    server_name home.yourdomain.com;

    ssl_certificate     /etc/nginx/ssl/home.yourdomain.com.pem;
    ssl_certificate_key /etc/nginx/ssl/home.yourdomain.com.key;

    location / {
        proxy_pass http://127.0.0.1:3002;
        proxy_set_header Host $host;

        # WebSocket（Docker 日志查看用）
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

证书自动续期见SSL 证书完全指南，反代细节见Nginx 反向代理实战。

暴露面考量：仪表盘会暴露你有哪些服务（信息搜集价值），建议：

• 只在内网/WireGuard 内网用（组网方案）
• 或对外时加 Basic Auth，别裸奔
• Docker socket 只读挂载已经是权限最小化——绝不给读写权限，那等于把宿主机交出去（Docker 逃逸风险，见Docker 安全加固）

六、和其他工具的分工

仪表盘生态里各管一摊，别指望一个工具全包：

Homepage 卡片的 ping 只做"通不通"的粗探测，不能替代告警——它自己不会半夜给你发消息。

七、常见问题排查

八、五分钟美化清单

想让仪表盘从"能用"到"好看"：

• [ ] 图标全部配上（Dashboard Icons 包）
• [ ] 主题选 dark + 配色 slate/indigo
• [ ] 服务分组不超过 5 组，每组不超过 6 个（信息密度）
• [ ] 加天气/系统资源组件（首页不死板）
• [ ] 移动端打开看一眼（列数自适应）

结语

Homepage 是自托管玩家的"玄关柜"：服务有了统一入口，容器状态抬头可见，常用链接一页齐活。YAML 配置 + Docker 集成，半小时搭好——当你的自托管服务超过五个，你会感谢这个首页。

需要跑自托管服务的服务器，可以看看财富云计算：NAT 型云服务器内存档位全、SSD 系统盘、支持热升级，一台机器挂十几个自托管服务毫无压力，价格比独立 IP 机型省一半以上——"吃配置不吃公网 IP"的自托管全家桶，NAT 型刚好对症。

延伸阅读

1. SSL 证书完全指南：免费证书、自动续期与不过期监控
2. 数据备份体系完全手册：从随手拷到 3-2-1，让数据永远丢不了
3. 压测与容量规划：上线前就知道你的服务器能扛多少人
4. AdGuard Home 内网 DNS：全家去广告、防劫持、内网解析一站解决
5. Hugo 静态博客搭建：秒开的博客，部署只要一个目录
6. 安全应急响应完全手册：服务器被入侵后，按这个流程走
7. 游戏服运营完全手册：从开服到停服，把一台服务器运营成百年老店
8. Loki 日志体系搭建：轻量级日志聚合，Grafana 里查遍所有服务器

更多阅读

1. 上一篇：SSL 证书完全指南：免费证书、自动续期与不过期监控
2. 下一篇：没有了