高度可定制应用程序仪表板homepage

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 4.6k 阅读时长 ≈ 4 分钟
homepage 是一个由 yaml 文件管理的自托管仪表板。

本文软件得到网友 冷心 的推荐；

什么是 homepage ？

homepage 是现代、安全、高度可定制的应用程序仪表板，集成了超过 25 种服务和超过 15 种语言的翻译。可通过 YAML 文件轻松配置（或通过 docker 标签发现）。

安装

ghcr.io 镜像下载

官方的镜像没有发布在 docker hub，而是在 ghcr.io，所以直接用命令行来安装。

在 SSH 客户端中依次执行下面的命令

1
2
# 下载镜像
docker pull ghcr.io/benphelps/homepage:latest

如果没有科学上网，很可能会拉不动，可以试试 docker 代理网站：https://dockerproxy.com/，但是会多几个步骤

1
2
3
4
5
6
7
8
# 如果拉不动的话加个代理
docker pull ghcr.dockerproxy.com/benphelps/homepage:latest

# 重命名镜像（如果是通过代理下载的）
docker tag ghcr.dockerproxy.com/benphelps/homepage:latest ghcr.io/benphelps/homepage:latest

# 删除代理镜像（如果是通过代理下载的）
docker rmi ghcr.dockerproxy.com/benphelps/homepage:latest

当然代理网站也不是什么时候都好使，有时候也会报错，例如下面👇这样的

1
Error response from daemon: received unexpected HTTP status: 500 Internal Server Error

所以有一个稳定的科学上网环境还是很重要的

Docker API 说明

与容器相关的应用，都需要绑定挂载 /var/run/docker.sock ，包括我们之前安装的 portainer、watchtower，Glances，Netdata 、lazydocker 等。

什么是 /var/run/docker.sock ?

/var/run/docker.sock 是 Docker API 的主要入口，简单地说，它是 Docker 守护进程（Docker daemon）默认监听的 Unix 域套接字（Unix domain socket），容器中的进程可以通过它与 Docker 守护进程进行通信。

title

图片来自：https://betterprogramming.pub/about-var-run-docker-sock-3bfd276e12fd

这里只要通过 /var/run/docker.sock 与 Docker 集成

Docker Cli 安装

如果你熟悉命令行，可能用 docker cli 更快捷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 新建文件夹 homepage 和 子目录
mkdir -p /volume2/docker/homepage/{config,icons}

# 进入 homepage 目录
cd /volume2/docker/homepage

# 修改目录权限
chmod -R 777 config/

# 运行容器
docker run -d \
   --name homepage \
   -p 3344:3000 \
   -v $(pwd)/config:/app/config \
   -v $(pwd)/icons:/app/public/icons \
   -v /var/run/docker.sock:/var/run/docker.sock \
   ghcr.io/benphelps/homepage:latest

docker-compose 安装

将下面的内容保存为 docker-compose.yml 文件

1
2
3
4
5
6
7
8
9
10
11
12
version: "3.3"

services:
  homepage:
    image: ghcr.io/benphelps/homepage:latest
    container_name: homepage
    ports:
      - 3344:3000
    volumes:
      - ./config:/app/config
      - ./icons:/app/public/icons
      - /var/run/docker.sock:/var/run/docker.sock

然后执行下面的命令

1
2
3
4
5
6
7
8
9
10
11
12
13
# 新建文件夹 homepage 和 子目录
mkdir -p /volume2/docker/homepage/config

# 进入 homepage 目录
cd /volume2/docker/homepage

# 修改目录权限
chmod -R 777 config/

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:3344 就能看到主界面

回到 File Station，你会在 config 目录中发现一些 yaml 文件

  • bookmarks.yaml：书签配置文件，除了作为链接外不包含任何额外的功能。abbr 设计为 2 个字母，但没有强制要求。
  • docker.yaml： Docker 实例的配置文件，在使用自动服务发现时无法定义严格的顺序，顺序将由 Docker API 返回的顺序决定。发现的服务优先于定义的服务 services.yaml ，并将显示在它们之上。
  • services.yaml：服务配置文件，您可以有任意数量的组，每个组可以有任意数量的服务。
  • settings.yaml：系统设置文件，它允许您定义应用程序级别的选项。要使对此文件所做的更改生效，您需要重新生成静态 HTML，这可以通过单击页面右下角的刷新图标来完成。
  • widgets.yaml：信息小部件配置文件，信息小部件位于第一条水平折叠线上方，可以多次配置。

yaml 文件，最好都保存为 utf-8 编码格式，避免中文出现乱码，当然纯英文的无所谓；

老苏随便试了下，先上张整体的效果图

图标

所用到的 png图标，均可在这个开源项目中找到： https://github.com/walkxcode/Dashboard-Icons

settings.yaml

settings.yaml 就一句话

1
language: zh-CN

其实还可以设置背景图片等等；

widgets.yaml

widgets.yaml 控制的是最上面的一排，官方称为信息小部件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- greeting:
    text_size: xl
    text: 老苏的导航

- resources:
    label: 系统
    cpu: true
    memory: true
    
- resources:
    label: 存储  
    expanded: true
    disk:
      - /

- datetime:
    text_size: xl
    format:
      dateStyle: long
      timeStyle: long
      hour12: false

- weatherapi:
    label: 杨浦
    latitude: 31.305873
    longitude: 121.522311
    units: metric 
    apiKey: <你的 weatherapi 的 API Key>
    cache: 5
    
- search:
    provider: baidu
    focus: true
    target: _blank

关于 Weather API 的申请和使用，请参考老苏之前写的 『 个人仪表板软件Flame 』

docker.yaml

这个文件的设置，在界面上不会显示，但是 services.yaml 会引用到

1
2
my-docker:
  socket: /var/run/docker.sock

services.yaml

services.yaml 显示在第二排，其中部分服务还支持服务小部件，比如常用的 Jellyfin 和 Portainer 等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
---
    # For configuration options and examples, please see:
    # https://github.com/benphelps/homepage/wiki/Services
    
    - 音影:
        - Jellyfin:
            icon: jellyfin.png
            href: "http://192.168.0.197:8096/"
            description: 媒体服务器
            server: my-docker
            container: jellyfin
            widget:
                type: jellyfin
                url: http://192.168.0.197:8096
                key: <你的 token api key>     
    
    - 运维:
        - Portainer:
            icon: portainer.png
            href: "http://192.168.0.197:9000/"
            description: 容器管理服务器
            server: my-docker
            container: portainer
            widget:
                type: portainer
                url: http://192.168.0.197:9000
                env: 2
                key: <你的 portainer 的 access key>
    
    - 开发:
        - Adminer:
            icon: adminer.png
            href: "http://192.168.0.197:8989/"
            description: 数据库连接服务器
            server: my-docker
            container: adminer1

bookmarks.yaml

bookmarks.yaml 显示在第三排，也就是最下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- 群晖:
    - 管理主页:
        - abbr: HP
          href: http://192.168.0.197:5000/

- 博客:
    - 老苏的博客:
        - abbr: LS
          href: https://laosu.tech/
    - CSDN:
        - abbr: CS
          href: https://blog.csdn.net/wbsu2004/

- 网盘:
    - 天翼云盘:
        - abbr: TY
          href: https://cloud.189.cn/
    - 阿里云盘:
        - abbr: AL
          href: https://www.aliyundrive.com/

注意事项

  1. 因为用到了中文，所以 yaml 文件要选择 utf-8 格式保存，否则中文会乱码；
  2. yaml 文件对缩进有严格要求，建议用代码编辑器，老苏一般用 vscode，否则容易出现下面这样的报错；

其他更详细的配置和说明可以去看官方文档：https://gethomepage.dev/en/configs/services/

参考文档

benphelps/homepage: A homepage (or startpage) for my local network.
地址：https://github.com/benphelps/homepage

I’ve created a new self-hosted dashboard. : selfhosted
地址：https://www.reddit.com/r/selfhosted/comments/wx8knv/ive_created_a_new_selfhosted_dashboard/