用Homepage搭建一个好看的群晖应用导航页
本帖最后由 gasment 于 2023-11-7 09:40 编辑私人服务导航页应用有很多，今天介绍一下homepage
先上效果图：
homepage是纯文本配置布局的，没有图形界面配置，所以会有那么一点上手门槛，好在官方文档比较详细，琢磨下还是比较好理解的
官方项目地址：https://gethomepage.dev
先把Docker容器部署起来：
这里用docker compose方式比较简易，dsm7.2也有了图形化的docker compose界面
进入群晖后台，打开container manager ,转到项目，新增如图：
docker-compose.yml示例：（内容格式缩进有要求，论坛排版可能有出入，注意修改）
version: "3.3"
services:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
ports:
- 3000:3000
volumes:
- /home/docker_data/homepage/config:/app/config # Make sure your local config directory exists
- /home/docker_data/homepage/logo:/app/public/icons
- /var/run/docker.sock:/var/run/docker.sock:ro # (optional) For docker integrations
restart: unless-stopped
稍等片刻，container manager会自动完成镜像拉取和容器部署，之后访问群晖ip+3000端口即可访问
可以看到，新部署的界面还是一片荒芜，接下来就是让他丰富起来
使用群晖的文件共享，打开刚才映射的homepage宿主目录，可以看到多了几个yaml文件
[*]settings.yaml
注意yaml内文本格式与缩进有要求，错误的格式将导致homepage页面崩溃，建议使用vscode等编辑软件修改
修改可实时生效，刷新页面可查看效果（新加入的图标图片需要重启容器才能加载）
建议每修改一处，就刷新检查，更容易定位错误
providers:
openweathermap: openweathermapapikey
weatherapi: weatherapiapikey #以上两个是天气组件的api,不作修改
language: zh-CN #设置语言
headerStyle: clean #标题样式，改变搜索框样式，有几个可选样式，详情参阅官方文档
title: Priv-Cloud 导航 #页面title,位于页面左上角
fiveColumns: true #5列模式，开启横向5列布局
layout: #layout布局，下面每一项就是每列的标题，参考我的效果图
应用书签:
style: column #排列方式有行和列两种
icon: /icons/app.png #定义标题图标位置
后端管理:
style: column
icon: /icons/server.png
Docker服务总览:
style: column
icon: /icons/docker.png
Docker应用状态:
style: column
icon: /icons/docker-app.png
hideErrors: true #隐藏错误的显示
background:
image: /icons/background.jpg #设置背景图片
blur: xl # sm, "", md, xl... see https://tailwindcss.com/docs/backdrop-blur
saturate: 50 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
brightness: 50 # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
opacity: 50 # 0-100 #背景模糊参数，后面的网站有详细说明
[*]bookmarks.yaml ---根据示例配置即可，bookmarks就是普通的书签，只提供连接跳转，可自定义图标
[*]services.yaml
servcies有分带widget和不带widget两类
- 应用书签: #这里定格的是一级分类，要与settings.yaml中的layout名称对应
- FileStation: #一级分类下的子项
icon: /icons/filestation.png #图标配置位置
href: https://xxxxxx.com:5100/file #点击后需要跳转到的连接
description: 群晖文件管理器 #子项描述
ping: https://xxxxxx.com:5100/file #链接检测地址，用于显示服务在线、离线状态
上面是简单的不带widget，下面看下带widget的，我们在上面项续写（注意缩进格式）：
- 应用书签:
- FileStation:
icon: /icons/filestation.png
href: https://xxxxxx.com:5100/file
description: 群晖文件管理器
ping: https://xxxxxx.com:5100/file
- Jellyfin: icon: /icons/jellyfin.png href: https:/xxx.com:8920 description: 多媒体影音库 ping: https:/xxx.com:8920 widget: type: jellyfin url: http://192.168.x.x:8096 key: 0cf76eb9602941ba922474e3******** enableBlocks: true # optional, defaults to false enableNowPlaying: true # optional, defaults to true
homepage支持很多常用widget，widget参数根据不同的service有所不同，详细设定参阅官方文档
[*]docker.yaml
这里配置需要监控的docker主机地址
N1-docker: #定义docker宿主机名称
socket: /var/run/docker.sock #使用socket连接至本地主机
swarm: true
DSM-docker:
host: 192.168.x.x#推荐远程docker宿主机部署dockerproxy来提供连接接口
port: 2375 #dockerproxy端口
这里贴下远程docker主机部署dockerproxy的compose参数
version: "3.3"
services:
dockerproxy:
image: ghcr.io/tecnativa/docker-socket-proxy:latest
container_name: dockerproxy
environment:
- CONTAINERS=1 # Allow access to viewing containers
- SERVICES=1 # Allow access to viewing services (necessary when using Docker Swarm)
- TASKS=1 # Allow access to viewing tasks (necessary when using Docker Swarm)
- POST=0 # Disallow any POST operations (effectively read-only)
ports:
- 2375:2375
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro # Mounted as read-only
restart: unless-stopped
监控总体docker容器在线情况，可以在servcies.yaml中配置portainer-ce的子项，配置对应的widget即可
需要监控单个docker容器状态，可以在servcies.yaml中配置对应的子项，如：
- Mysql 8:
icon: /icons/mysql.png
href: http://localhost/ #我这里只做监控，如果需要点击跳转，配置对应地址即可
description: mysql 8 数据库服务
server: DSM-docker #这里server就是docker宿主机，必须与docker.yaml中定义的一样，容器在哪个宿主就填哪个
container: mysql-8 #容器名称，必须与容器实际名称一致
showStats: true #展示容器详情
[*]widgets.yaml
- search: #设置搜索引擎参数
provider: # google, duckduckgo, bing, baidu, brave or custom
focus: true # Optional, will set focus to the search bar on page load
target: _blank # One of _self, _blank, _parent or _top
- openmeteo: #配置地理位置信息用于天气检索
label: 地名 # optional
latitude: xxx #维度
longitude: xxxx#经度
timezone: Asia/Shanghai # optional
units: metric # or imperial
cache: 5 # Time in minutes to cache API responses, to stay within limits
- logo:
icon: /icons/logo.jpg #页面左上角logo
- greeting:
text_size: xl
text: Priv-Cloud 导航 #页面左上角标题
- resources:
label: 系统状态
cpu: true #显示CPU使用率
memory: true#显示内存使用率
- resources:
label: 系统盘
disk: /volume1 #显示磁盘使用率
大体配置就是这样了，还有很多玩法，官方文档很详细，这里不做过多介绍了
这里提醒下，由于homepage目前还没有密码登录的功能，就这样放上去外网就一丝不挂了
我们可以使用nginx proxy反向代理功能，添加一个Basic认证来解决登录问题(如图）
至于怎么配置反代，我这里推荐一个非常方便快捷的工具【Lucky (lucky666.cn)】，大家有兴趣的我可以再开一贴介绍下
最后附上我自己做的一些图标，图标大家可以自己找图片素材，用在线抠图工具制作即可
**** Hidden Message *****
感谢分享！ 感谢分享。。。 我学习学习 楼主发贴辛苦了，谢谢楼主分享！ 多谢分享 楼主发贴辛苦了，谢谢楼主分享！ 好东西呀 看看怎么样
看看怎么做的 这是好东西。 感谢分享！
感谢分享！ 谢谢大佬分享 已经很详细了 跟着做就能做好了 谢谢兄弟 谢谢分享
页:
[1]