[玩法/技巧] 用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: [bing, google, baidu] # 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)】，大家有兴趣的我可以再开一贴介绍下
最后附上我自己做的一些图标，图标大家可以自己找图片素材，用在线抠图工具制作即可