Glance Dashboard:把 RSS、YouTube、服务器状态装进一个页面

前言

事情是这样的。我每天的信息获取路径大概是这样的:

打开浏览器 → 看一眼 RSS 阅读器 → 切到 YouTube 看看订阅频道更新 → 打开 Hacker News 扫一眼 → Reddit r / selfhosted 有没有新玩具 → GitHub 关注的项目有没有 release → VPS 都还活着吗 → Docker 容器有没有挂的 → 哦对了今天天气怎么样。

就这些,分散在七八个标签页里,每天早上都得走一遍” 打卡流程”。

直到我发现了 Glance。

一个页面,三列布局,所有信息流全在里面。打开就是你的专属信息中枢。

选型:Dashboard 工具那么多,为什么是 Glance?

自托管 Dashboard 这几年卷了不少。Homer 是最老牌的,一个 YAML 配静态页面,稳但功能少。Homepage 功能很全,集成了一堆服务 API,但 YAML 配置复杂到我看了想关页面。Homarr 有拖拽 UI,但资源占用不低。Dashy 也是静态 YAML,但更像书签墙,不适合做信息聚合。

Glance 走的是另一条路。

它的定位不是「服务导航页」,而是「信息聚合面板」。核心能力是把 RSS、YouTube、Reddit、HN、天气、股市这些外部信息源拉到一起,同时顺手带上服务器监控和 Docker 状态。

技术上也是极简主义:Go 写的单二进制,不到 20MB,一个 YAML 文件搞定所有配置,不依赖数据库,内存占用低到可以忽略。GitHub 34.7k Stars,AGPL-3.0 开源,社区活跃。

说真的,大部分 Dashboard 工具一装就是 MySQL + Redis + Node 全家桶,Glance 一个二进制跑起来的感觉,像一股清流。

5 分钟部署

官方提供了 Docker Compose 模板,三行命令搞定:

Terminal window
mkdir glance && cd glance
curl -sL https://github.com/glanceapp/docker-compose-template/archive/refs/heads/main.tar.gz | tar -xzf - --strip-components 2

解压出来是这样一个结构:

glance/
├── docker-compose.yml
├── .env
├── config/
│ ├── glance.yml # 主配置
│ └── home.yml # 页面配置
└── assets/
└── user.css # 自定义样式

看一眼 docker-compose.yml

services:
glance:
image: glanceapp/glance:latest
container_name: glance
volumes:
- ./config:/app/config
- ./assets:/app/assets
- /var/run/docker.sock:/var/run/docker.sock # 如果要监控 Docker
- /etc/timezone:/etc/timezone:ro
- /etc/localtime:/etc/localtime:ro
ports:
- "8080:8080"
restart: unless-stopped

挂载 /var/run/docker.sock 是为了读 Docker 容器状态,不需要的话可以去掉。

Terminal window
docker compose up -d

打开 http://你的IP:8080,一个默认的 Glance 面板就出来了。

布局策略:三列信息中枢

Glance 的布局逻辑很清晰:页面 → 列 → 组件。每页最多三列,列宽分 small(300px 固定)和 full(剩余宽度)。

我的方案是经典的三列布局:

┌──────────┬─────────────────────┬──────────┐
│ small │ full │ small │
│ │ │ │
│ 天气 │ RSS 信息流 │ 书签 │
│ 时钟 │ YouTube 视频 │ 服务监控 │
│ 股市 │ Hacker News │ Docker │
│ │ Reddit │ 状态 │
└──────────┴─────────────────────┴──────────┘

左侧放「速览类」:天气、时钟、股市,扫一眼就好。中间放「信息流」:RSS、视频、社区热帖,是主要内容消费区。右侧放「工具类」:书签、服务状态、Docker 容器。如果信息源特别多,还可以拆成多个页面,比如单独一个「视频」页、一个「监控」页。

配置起来也直观,在 glance.yml 里:

pages:
- name: 首页
slug: home
width: default
columns:
- size: small
widgets:
- type: weather
location: Shenzhen, China
units: metric
- type: clock
hour-format: 24h
timezones:
- timezone: Asia/Shanghai
label: 深圳
18 collapsed lines
- type: markets
markets:
- symbol: SPY
name: S&P 500
- symbol: BTC-USD
name: Bitcoin
- size: full
widgets:
- type: rss
# ... RSS 配置
- size: small
widgets:
- type: bookmarks
# ...
- type: monitor
# ...

三层嵌套结构,读起来跟页面的视觉结构一一对应,改起来不用脑补渲染结果。

核心 Widget 实战

RSS 聚合

RSS 是 Glance 的灵魂组件。支持四种展示风格:

风格效果
vertical-list紧凑列表,适合信息密度高
detailed-list带摘要的列表
horizontal-cards横排卡片,适合少量精选源
horizontal-cards-2两行卡片布局

我的配置:

- type: rss
title: 技术资讯
style: vertical-list
limit: 20
collapse-after: 5
feeds:
- url: https://selfh.st/rss/
title: selfh.st
- url: https://www.joshwcomeau.com/rss.xml
title: Josh Comeau
- url: https://ishadeed.com/feed.xml
title: Ahmad Shadeed

collapse-after: 5 表示默认只展示前 5 条,其余折叠 —— 避免一个源刷屏。想看全部点一下展开就行。

YouTube 频道追踪

不用打开 YouTube、不用被算法推荐绑架,直接在 Dashboard 里看订阅频道更新:

- type: videos
channels:
- UCXuqSBlHAE6Xw-yeJA0Tunw # Linus Tech Tips
- UCR-DXc1voovS8nhAvccRZhg # Jeff Geerling
- UCsBjURrPoezykLs9EqgamOA # Fireship
limit: 15
style: horizontal-cards
collapse-after: 7

频道 ID 怎么拿?打开频道页面,看 URL 里 /channel/ 后面的那串。或者用 view-sourcechannelId

Hacker News / Reddit

技术社区速览,两个组件都很直白:

- type: hacker-news
limit: 10
collapse-after: 5
sort-by: top
- type: reddit
subreddit: selfhosted
style: vertical-list
show-thumbnails: true
limit: 10

服务监控 + 服务器状态

内网服务挂了第一个知道,比 UptimeRobot 更直接:

- type: monitor
title: 服务状态
sites:
- title: Blog
url: https://mifsh.de
icon: si:hashnode
- title: AFFiNE
url: https://affine.mifsh.de
- title: LobeChat
url: https://chat.mifsh.de
- type: server-stats
servers:
- type: local
name: NUC9

服务器状态走的是系统级指标(CPU、内存、磁盘),不需要额外装 agent。

Docker 容器状态

一眼看全所有容器的运行状态:

- type: docker-containers

前提是挂载了 /var/run/docker.sock。如果有多台 Docker 主机,可以通过 TCP 连接远程 Docker daemon:

- type: docker-containers
server:
url: http://192.168.1.100:2375

股市 + 天气 + 书签

这三个放在侧栏,锦上添花:

# 股市
- type: markets
markets:
- symbol: SPY
name: S&P 500
- symbol: BTC-USD
name: Bitcoin
- symbol: NVDA
name: NVIDIA
# 天气
- type: weather
location: Shenzhen, China
units: metric
hour-format: 24h
11 collapsed lines
# 书签
- type: bookmarks
groups:
- title: 常用
links:
- title: GitHub
url: https://github.com
icon: si:github
- title: VPS 面板
url: https://panel.example.com

美化:从默认黑到你的专属面板

Glance 默认的暗色主题其实挺好看,但如果你想折腾,它给了足够的自由度。

主题配色

用 HSL 格式调色(色相 饱和度 明度):

theme:
background-color: 240 8 9
primary-color: 43 50 70
positive-color: 61 66 44
negative-color: 0 70 70
contrast-multiplier: 1.1

其实吧,大部分时候调调 background-color 就够了。想抄作业的话,Glance 的 docs/themes.md 有一堆社区主题可以直接用。

图标系统

Glance 支持四套图标库,用得最多的是 Simple Icons:

icon: si:github # Simple Icons — 品牌/服务图标
icon: sh:immich # selfh.st icons — 自托管工具专用
icon: di:immich # Dashboard Icons
icon: mdi:camera # Material Design Icons

图标托管在 cdn.jsdelivr.net,不想走 CDN 的话可以下载到 assets/ 自托管,然后配置 server.assets-path

自定义 CSS

每个 widget 都有 widget-type-{name} 这样的 CSS 类名。比如想让 RSS 标题大一点:

.widget-type-rss a {
font-size: 1.1rem;
}

也可以给单个 widget 加 css-class 属性做精准覆盖。

踩坑记录

配置重载清缓存

Glance 的配置修改会自动重载,很爽。但重载时会清掉所有缓存数据,包括 RSS feed 内容和 API 响应。如果你频繁保存配置文件(调样式的时候很容易反复改),缓存就被反复清,某些 API(比如 Reddit)可能因为请求太频繁临时限流你。

解法:调样式的时候先把 cache 参数设长一点,比如 1h,调完再改回来。

Reddit IP 被拦

前面提过,很多 VPS IP 段被 Reddit 拉黑了。访问 Reddit API 直接返回空或者 403。解决方案就三种:注册 Reddit App 用 OAuth(麻烦)、挂代理(简单)、或者干脆不用 Reddit 组件。

反代后真实 IP 丢失

如果前面套了 Nginx / Caddy 反代,Glance 拿到的请求 IP 全是反代服务器的。加上这个:

server:
proxied: true

Glance 会读 X-Forwarded-For 头获取真实 IP(用于暴力登录防护的 IP 封禁)。

移动端体验

Glance 的移动端适配还不错,但三列布局在手机上会变成单列堆叠。如果有些信息在移动端不必要,可以考虑单独建一个精简版页面。

总结

Glance 不是最全的 Dashboard,但它是把「信息聚合」这件事做得最干净的那个。没有花里胡哨的功能,没有复杂的配置语法,一个 Go 二进制一个 YAML 文件,打开浏览器就是你的信息中枢。

我现在每天早上打开它的习惯已经替代了之前七八个标签页的打卡流程。坦率讲,这种「一切尽在眼前」的感觉,比省下的那点时间更值。

如果你也在找一个轻量、纯粹的信息聚合面板,Glance 值得试一下。五分钟部署,配置写 YAML,改完即时生效 —— 没有理由不折腾一下。