All in one（十四）个人用导航界面Homepage

前面我们已经部署了相当多的服务，而且很多都是要通过web ui来管理和访问。又由于绝大多数用户应该都不会用到商用网络，所以说80和443这两个不需要输入的端口号的访问端口一般都是被运营商封了的。于是除非你只在内网使用并且改host或者局域网内部建一个DNS服务器，否则我们之前的那些服务肯定会用到一大堆奇奇怪怪的端口号，记忆起来比较麻烦。所以我们可以考虑整一个工具来记录这些服务的地址，并且还可以简单监控一下他们的状态。当然了直接使用浏览器记录书签肯定是最简便的方法，或者说使用相同的端口但是不同的域名来反代实现只记一个端口号，但是我们都折腾all in one了，不再部署个服务来折腾一下怎么行呢。

其实这类工具还是有那么几个，本来之前有个sun panel支持图形化操作配置稍显简单一点而且有用户区分挺好的，但是现在闭源收费了，免费版本只到1.3.0，所以这里就不做推荐了， 还是推荐用开源的homepage，虽然说配置上比较复杂一点，但是免费开源还是有其可取之处。效果如下：

图片

作者给的效果图是这么配置的

图片

项目github地址

https://github.com/gethomepage/homepage

项目网站

https://gethomepage.dev/

项目网站上可以找到详细的各个部件的配置示例，本文没有讲的也可以去项目网站的configuration和widgets里面看看，因为我有的组件也没有用所以配置不了。虽然网站是英文的，但是可以活用浏览器的翻译功能。

一、docker配置homepage

配置其实非常的简单，跟前面的docker部署的那些项目一样，先在docker目录内建立一个homepage目录方便管理，然后我们只需要在homepage的目录里面建立一个config目录、images目录（可选）、icons目录（可选）和一个yml文件，yml示例如下，可以自行修改你喜欢的端口号。config是配置文件存储的目录，images是本地背景图片存储的目录，icons是本地图标存储的目录，这两个本地存储你不用的话也可以不映射。

services:

homepage:

image: ghcr.io/gethomepage/homepage:latest

container_name: homepage

ports:

- 28765:3000

volumes:

- ./config:/app/config # Make sure your local config directory exists

- /var/run/docker.sock:/var/run/docker.sock:ro # optional, for docker integrations

- ./images:/app/public/images

- ./icons:/app/public/icons

restart: unless-stopped

然后你就会看见config目录里面生成了一系列的yaml文件，我们的配置都需要修改这些yaml，不是直接图形化的处理，这也是这个项目不太方便的地方。

二、配置homepage

这里我建议把我们前一期All in one（十三）一些小工具里面的it-tools里面的yaml美化和格式化拿出来用用，方便检验yaml的退格是否符合规则。

然后我们可以用WinSCP来访问我们的docker主机，进入到/docker/homepage/config目录就可以看到需要配置的几个yaml文档，我们直接用WinSCP打开编辑即可。

1、settings.yaml

首先是决定主体结构的settings.yaml，其中的部分全局设定可以被services中的单个设定覆盖。

第一个部分是背景图片标题之类的以及一些全局设定，具体如下

title: 你的网页名字

startUrl: 有些app会用的，我没设置这个，默认是/

background:

image: /images/你的图片文件名字 #记得传到images目录里面，或者使用网络图片，网络图片就是图片url

blur: sm # 模糊，就是覆盖一层，sm小, ""这个是没有，记得是两个双引号 md中, xl大... 参考 https://tailwindcss.com/docs/backdrop-blur

saturate: 100 # 饱和度0, 50, 100... 参考 https://tailwindcss.com/docs/backdrop-saturate

brightness: 70 #亮度 0, 50, 75... 参考 https://tailwindcss.com/docs/backdrop-brightness

opacity: 75 #不透明度 0-100

cardblur: xl #就是你那些l链接卡片的模糊度，参数和上面一样

favicon: /images/你的图片文件名字 #记得传到images目录里面，或者使用网络图片，网络图片就是图片url

language: zh-CN #语言

hideVersion: true #是否隐藏版本号

disableCollapse: true #是否禁用折叠，默认是true禁用

groupsInitiallyCollapsed: true #所有版块是否默认折叠，注意和上面一条的冲突，以及每个板块可以单独设置覆盖这个全局设置

showStats: true # 显示所有跟docker容器相关卡片的状态，本条也可用在services具体的卡片下面，并且会覆盖本条全局设定

statusStyle: "dot" # 容器状态显示形式，有dot和basic两种，一个是个点，另外一个显示文字，同上可以用在services里面覆盖全局设定

第二个部分就是具体的排版了，以layout字段开始，这里我只写通用的写法，要想要更多的功能可以参考项目网站的configuration内的settings，0.6.30之后新增了tab功能，设置了之后我们可以通过最上面的选择条切换，也可以通过在访问homepage的地址后面增加#标签名字，例如你的homepage是www.example.com:28765，那么访问first这个标签的板块就是www.example.com:28765#first（注意这里要全小写，标签不限于序数词，什么字母都可以）从而实现标签区别访问。可以考虑设定来区分一个内外网访问地址，比如说我创建了两个基本相同的板块，只是一个板块内卡片全指向内网地址，然后用Local标签，另外一个全部指向公网访问地址，用Net标签。这么搞可以增加一定的访问便捷度，毕竟公网地址要走nginx的服务器，但不多。当然嫌麻烦也可以不弄。标签的顺序是标签在layout当中出现的顺序。

layout:

板块1: # 自己改板块标题名字

icon: 图标，可不设置，具体参看后面services里面的图标设置

tab: First #url后面增加这个后缀就可以分类访问这些标签，没这一行就是所有标签都有这个板块

style: row #row 横排 column 列

columns: 4 #每排列数，如果上面选的列这里就改成row，默认最多4列

header: false #是否显示标题，默认是显示true，所以要显示可以直接不要这一行

useEqualHeights: true #强制等高 默认false

initiallyCollapsed: true # 初始是否折叠本版块，默认为false，同时注意全局是否按默认禁用了折叠

其他板块以此类推，注意缩进和板块1一致
这是设置了tab之后最上面会出现的一个选择条，比如我这里有Net和Local两个切换条

图片

2、docker.yaml

docker配置提到前面来说是因为后面services里面会用到，我们这里直接使用socket连接，因为本来我们就是root权限创建的容器，也映射了docker.sock，这样最简便。打开docker.yaml，写入如下内容

my-docker: # 这个名字你可以自己改

socket: /var/run/docker.sock

假设后续配置好services文档之后相关的docker读不出来信息，就进入/etc/docker目录内，新建daemon.json文件，写入如下内容

{

"hosts": [

"tcp://0.0.0.0:2375",

"unix:///var/run/docker.sock"

]

}

如果说是已经有了daemon.json只是修改的文件的话，将大括号内的内容加在本来的大括号内容里面，注意上下文加英文逗号隔开，不确定格式是否正确就用it-tools里面的json美化和格式化工具看看。配置完成后重启docker服务

systemctl restart docker

3、services.yaml

正如名字所写，这里是用来配置具体服务的，也就是配置上面的layout块下的每个板块具体有些什么，例子如下，注意板块名字要和settings里面对应

- 板块名:

- 卡片名字:

href: 你这个卡片想要跳转服务的链接

icon: 非必须项，图标图片

description: 对于这个卡片的描述，非必须项

widget:

# 组件部分，主要是每个功能的组件都不相同，后面来详细说明

server: 可选，上一步中你给docker服务器取的名字，比如示例的my-docker

container: 可选 创建docker的时候这个docker的名字

关于图标这里，你可以用线上的dashboard icon里面去选

https://github.com/walkxcode/dashboard-icons

然后直接就写XXXX.png或者svg即可，或者可以去Material Design Icons使用mdi-XXXX-色号或者Simple Icons使用si-XXX-色号都行，网址分别如下

https://pictogrammers.com/library/mdi/

https://simpleicons.org/

如果说是要用本地图标类似于前面的image，只是说上传路径变成那个icons目录，然后icon后面跟的路径是/icons/你的图标图片名字

接下来就是services的小组件widget了， 由于每个不同的service的小组件格式都不一样，而可以使用小组件的服务实在是太多了，所以我这里只提一下我前面文章里面有的服务，没使用的还请去项目网站的widgets页面阅读，其实写的也还是比较清晰。主要的步骤其实就是按照指引设置参数给homepage访问该服务信息的权限以及配置显示的信息，访问权限的办法有账号密码或者api等等。

PVE

PVE的小组件可以显示虚拟机和容器总数量及启动数量，以及CPU和内存的占用率。

PVE要使用首先你要创建一个API，我们先来到数据中心-权限-群组-创建群组，名字随意，我这里参考项目的示例

图片

然后回到权限选择添加群组权限，按下图选择根目录，刚才的群组，PVEAuditor，打钩继承

图片

然后再创建一个该群组的PAM标准身份验证不过期的用户

图片

然后是去api令牌处创建api令牌，令牌ID可以自己取

图片

创建成功后就可以看见令牌ID和密钥了，注意密钥只会在这里显示，注意复制保存

图片

最后是回到权限处，选择添加api令牌权限，跟上面的群组权限一样，只是选择令牌而已

图片

然后我们就可以对PVE卡片添加他的小组件了，这里我按完整的来作示例，实例中我的PVE卡片放在devices这个板块里面。后面的服务我就只放widgets部分了，只是你自己用的时候需要注意退格。

- Devices: #板块名字可以自己改

- PVE: #卡片标题名字你也可以自己改

href: 链接地址

icon: proxmox.svg

widget:

type: proxmox

url: PVE链接地址，这里可以用局域网的，因为我们homepage也在局域网内

username: api@pam!homepage 注意你自己取的名字是不是这个

password: 刚才的令牌密钥

node: pve 如果你的节点不是pve那你就自己改

Truenas

truenas的小组件可以显示的是系统负载，开机时间以及警告数量

防止写明文账号密码我们还是用api好了，最好是用admin组的用户创建，不然其他用户可能权限不够。这个创建api比较简单，右上角点击用户选择api密钥

图片

然后点击添加输入一个名字就好了，例如homepage。同样的注意保存密钥，他只会在这里显示，关闭后就不再显示。

注意下面的widget是三级缩进，记得实际部署的时候挂在Turenas卡片下要空格。

widget:

type: truenas

url: Truenas的链接，同上可以用内网的

key: api密钥

enablePools: true

群晖

群晖的小组件可以显示已启动时间、剩余磁盘空间（不过只能显示一个盘，不过后面我们可以靠glances解决这个问题），CPU和内存占用。

群晖这边是建议新建一个专门用来登录啥目录和应用程序访问权限都没有的管理员账户

具体就是点击控制面板，选择用户和群组，点击新增，用户名你自己取，密码可以用它生成的也可以你自己编一个复杂的，群组勾选第一个administrators，共享文件夹权限直接选择禁止访问，配额会被跳过，应用程序权限先选择拒绝，然后把DSM改为允许，速度限制不设。最后检查页确认一下群组列表里面有administrators，可读写和只读都是空的，权限包含里面只有DSM就行了。然后用这个账号在网页端登录一次，暂时把控制面板-安全性-防护里面的启动自动封锁关了，等这个正常运行后再开启自动封锁功能

群晖的widget格式如下

widget:

type: diskstation

url: 群晖地址，注意https和http的端口不一样

username: 刚才那个用户名

password: 密码

volume: volume_N 默认是显示第一个盘，你可以把N改成你要的第几个盘

jellyfin

jellyfin之前的文章没有展开说docker部署，docker compose部署的yml文档在这篇文章的最后

Windows体验NAS(三）：影音管理工具jellyfin

小组件可以显示电影数量、剧集数量以及总的集数还有音乐的数量，然后下面还有一个显示当前正在播放的状态

同样也是使用api获得访问信息权限，jellyfin的api设置方式为先打开控制台，然后选择api密钥

图片

然后点击右边的加号输入app名称，这个随意，比如说我们就用homepage

图片

接着就可以看到api密钥，jellyfin的密钥会一直保持显示。

然后就是jellyfin的widget格式

widget:

type: jellyfin

url: jellyfin地址同样注意http和https的端口

key: api密钥

enableBlocks: true # 可选，默认false，就是默认不显示你的电影数量等信息

enableNowPlaying: true # 可选, 是否显示正在播放，默认为true

enableUser: true # 可选, 是否显示播放的用户名，默认为false

showEpisodeNumber: true # 可选, 是否显示播放剧集数，默认为false

expandOneStreamToTwoRows: false # 可选, 是否分成两行显示，默认为true

immich

docker部署在这篇文章，目前已经1.117了，但是网络问题我的拖取镜像也卡住了，目前我还停留在1.113.1

Windows体验NAS(二）：相片备份整理工具Immich

可以显示用户数、照片数、视频数和存储体积

依旧还是api访问，immich生成api方式为点击右上角你的用户名选择account setting，然后点击api keys，接着new api key

图片

点击后也是输入一个名字，例如就是homepage，接着会显示api，immich的api也只会显示一次，注意保存。

然后就是immich的widget格式

widget:

type: immich

url: immich地址

key: 你的api key

transmission

可以显示下载中任务数，下载速度，做种数量，上传速度

账号密码就是我们在部署transmission的时候在environment里面设置的账号和密码，widget格式如下

widget:

type: transmission

url: transmission地址

username: 账号

password: 密码

rpcUrl: /transmission/ # 可选，远程调用地址，和你/transmission/config目录里面的settings.json的rpc-url一致，如果你改了的话

glances

部署的方式在这篇文章的最后一个小工具

All in one（十三）一些小工具

这个小组件就是我的配置显示图里面顶部的那些监视器，由于不需要网页链接、图标和描述，所以说可以直接板块-卡片-widget，我测试下来目录映射两次之后不会正常显示大小了，所以我其实docker主机和nas上都部署了glances。由于我的docker主机是PVE的lxc容器而且给了跟物理核一样多的核心数，所以我这儿的CPU和内存显示信息和主机理论上是差不多的。

我们还是先进入glances的网页端，能显示的监视器都在这个里面了

图片

先简单说一下几个指标metrics代表的数据

info：就是左上角的信息，包含系统信息，cpu信息还有资源占用这些基础的

cpu：cpu占用率

memory: 内存占用率.

process: 前五占用cpu的进程.

network:<网卡名字>: 就是network白字那里的数据，网卡名字就在下面

sensor:<传感器ID>: 温度传感器，红字sensor那儿，传感器ID就在那里，看你自己选哪一个

disk:<盘ID>: 硬盘读写监控，红字disk区域，这个只有在连了某块硬盘的机子上才能看见那块硬盘，之前我们直通了SATA控制器给nas，所以需要在nas上部署的glances才能看见，同样硬盘ID就是以下面那些

gpu:: 好像没有识别核显，或者是我设置的权限问题

fs:<挂载点>: 看挂载目录的剩余空间，你可以把不同的硬盘的不限制空间的目录挂载到容器内不同的/mnt内的目录或者/host目录来实现看不同硬盘的剩余空间。挂载点的名字就在fs红字那里，例如我的nas上我就简单粗暴地把硬盘1的某个目录挂载给了/mnt，硬盘2的某个目录挂载给了/host，从而让他们可以显示剩余空间。

最后还是widget的格式，由于glances不用配置网页链接、图标和描述，所以我这里完整举例一下

- 自己取的板块名字:

- 监控信息1:

widget:

type: glances

url: glances地址

metric: 上面的指标，例如info

version: 4

- 监控信息2:

widget:

type: glances

url: glances地址

metric: 另外一个上面的指标，例如sensor:传感器ID

version: 4

以此类推

4、widget.yaml

系统直接用的组件widget配置部分在项目网页widget的最下面information widgets部分，我这里只配置了日期时间，其他的还有什么欢迎语换logo天气预报以及这里也能配置glances，可以自行研究。

- datetime:

text_size: 4xl #字体大小，从小到大有xs sm md xl 2xl 3xl 4xl

format:

timeStyle: short #短时间格式 也可以试试long

dateStyle: short #短日期格式 也可以试试lon

hourCycle: h23 #时间循环格式，有11,12,23,24四种，例如h23就是0-23

5、bookmark.yaml

就是一般的网址书签，最为简单的部分，格式和之前的其实也差不太多，依然还是模块-卡片这样的形式，只是说没有什么花里胡哨的配置，直接拿例子说明，卡片里面的几个字段可以自由组合

- 板块名字:

-卡片名字 :

- abbr: 缩写

href: 链接

- 卡片名字:

- icon: 图标，跟之前的设置逻辑一样

href: 链接

description: 描述

总结一下，settings里面是全局的设置一个声明各个板块的顺序以及板块内部的排版格式，板块内具体的卡片有些什么功能则是在services或者bookmarks里面去具体设置的，如果说你有板块没有显示确认一下是不是services或者bookmarks里面的板块名字和settings里面没有对上。然后以上的配置修改只要保存了就是实时更新的，如果有错误会在网页上显示错误的行是哪一行。

最后需要提醒的是homepage服务本身没有给身份管理相关的设置，所以我们最好在nginx反代的时候设置密码并且确保里面每一个到我们内网服务的连接点了之后都有身份确认的设置，反代设置密码的办法可以在这篇文章中去搜索htpasswd。

All in one（七）Nginx反向代理基础设置

至此我们的All in one基本上到了一个可以用的程度，这个系列也算是暂告一个段落。接下来可能会写写看智谱开源的那个文生视频模型试用，不过那个要4090才能跑估计可能受众也不算多。然后还有一个新出的nas系统飞牛os可能也会去试一试，虽然说没有经过时间的检验安全性和稳定性不得而知，不过可以尝试一下，毕竟按照我们现在All in one的思路来，对NAS的要求只要能稳定储存和共享就行，别的都是添头，如果国产系统真的好用倒也不是不可以。