Dashy 自建导航页:从 0 到 1 在 群晖NAS / Docker 上搭一套“像样”的个人首页
本文最后更新于 42 天前,如有失效请评论区留言。

声明

本文仅面向你合法拥有或授权管理的设备与服务。Dashy 本质是一个“入口页/导航页”,如果你打算暴露到公网,请务必开启鉴权、HTTPS、并限制访问来源(后面我会把关键注意事项写清楚)。

为什么我最后选了 Dashy

自建导航页这件事,很多人第一次接触都会在这些项目里纠结:Heimdall、Flare、homepage、Dashy。它们都能“放链接”,但气质和适用场景差别挺大。我一入坑nas时使用的是Homepage,后面看到了一个更惊艳的产品,于是乎花了半天时间研究出了安装方法,期间花了几个小时踩了坑。

Heimdall:上手快、够用,但天花板也低

  • 优点
    • 安装简单、界面直观,适合“我就想把常用服务摆一排”的需求。

  • 不足

    • 更偏“应用启动器”,可玩性与组件生态有限;当你想做复杂布局、多个页面、组件化展示时,会比较快碰到边界。

Flare:轻量、离线友好,但更偏“书签/导航”而非“仪表盘”

这里的 Flare 指的是常见的自建书签/导航类 Flare(主打简单轻量)。

  • 优点

    • 单体轻量、依赖少、对外网依赖低,部署维护成本很低。

  • 不足

    • 强项是“导航/书签管理”,如果你希望像“控制台”一样挂状态、挂小组件、做更复杂的展示,通常需要自己多折腾。

homepage:性能和集成很强,但更“工程化”

  • 优点

    • 走“静态、快、稳”的路线;对 Docker/K8s 有不错的自动发现与集成能力,适合容器很多、想做统一控制台的人。

  • 不足

    • 配置偏工程化(尤其是多服务集成时),如果你追求“高自由度 UI + 快速调主题 + 可视化编辑”,未必是最省心的。

Dashy:我选它的理由——“可玩性”和“可维护性”兼得

  • 优点

    • 配置集中在 conf.yml,同时支持 UI 里可视化编辑/导入导出;主题、布局、组件(widgets)、多页面能力都比较成熟。

    • 自定义空间很大:从纯导航到“信息面板”都能做,整体更像一个可以慢慢打磨的个人主页。

  • 可能的不足

    • 可配置项多,第一次配置会觉得“选项太丰富”;但换个角度,这也是它最值钱的地方。

结论很简单:如果你要的是“像样的个人首页/控制台”,Dashy 的上限更高;如果只是摆链接,Heimdall/Flare 也能很快交差。

环境与前提条件

以 NAS / 家庭服务器场景为主:

  • 已安装 Docker / Container Manager(群晖 DSM 7.x 对应 Container Manager)

  • 已经规划好一个持久化目录(下面用 docker/dashy 举例)

  • 可选:如果要公网访问,最好已经有域名和反代(Nginx/Traefik/群晖反代都行)

下面的教程一切以群晖为例。

安装 Dashy

创建目录(建议这样分层,后面维护很省心)

在 File Station 里建:

  • docker/dashy/config/conf.yml(配置文件)

  • docker/dashy/public/images/(放自定义图标/图片)

权限建议:给 Everyone 读写(至少确保 Docker 能写入)。

拉取镜像

  • 打开 Container Manager – 镜像仓库 – 搜索 lissy93/dashy– 选择 lissy93/dashy – 右键选择下载此映像 – 默认下载即可,会自动跳转到映像里面下载,下载失败多试几次。
  • github的官方地址

配置文件和图片文件准备

网址找到Configuring,一直拉取到底部,复制官方提供的基础配置文件:


---
pageInfo:
  title: Home Lab
sections: # An array of sections
- name: Section 1 - Getting Started
  items: # An array of items
  - title: GitHub
    description: Source code and documentation on GitHub
    icon: fab fa-github
    url: https://github.com/Lissy93/dashy
  - title: Issues
    description: View currently open issues, or raise a new one
    icon: fas fa-bug
    url: https://github.com/Lissy93/dashy/issues
  - title: Demo
    description: A live demo
    icon: far fa-rocket
    url: https://dashy-demo-1.netlify.app
- name: Section 2 - Local Services
  items:
  - title: Firewall
    icon: favicon
    url: http://192.168.1.1/
  - title: Game Server
    icon: https://i.ibb.co/710B3Yc/space-invader-x256.png
    url: http://192.168.130.1/

注意,以上代码并不包含密码登录界面,官方提供了多种密码登录方式,其中之一是hash加密,即在配置文件里面添加:


appConfig:
  theme: colorful
  layout: auto
  iconSize: medium
  language: cn
  auth:
    users:
      - user: admin
        hash: 8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918 ## cha256 哈希加密,地址用这个: https://emn178.github.io/online-tools/sha256.html
        type: admin

其二是自定义密码,但是这个功能要求必须在创建容器时创建一个环境变量(VUE_APP_ADMIN_PASSWORD,只是要求以VUE_开头的变量即可):


appConfig:
  theme: colorful
  layout: auto
  iconSize: medium
  language: cn
  auth:
    enableGuestAccess: false
    users:
      - user: 你的用户名
        password: VUE_APP_ADMIN_PASSWORD
        type: admin

由于我采用的是自定义密码,因此我的初始配置文件(目录为docker/dashy/conf.yml)为:


---
pageInfo:
  title: Home Lab
appConfig:
  theme: glow
  layout: vertical
  iconSize: large
  customColors:
    cherry-blossom:
      primary: '#e1e8ee'
      background: '#11171d'
      background-darker: '#070a0d'
      font-headings: '"Sniglet",cursive'
      font-body: '"Raleway","Trebuchet MS",sans-serif'
      font-monospace: '"PTMono","Courier New",monospace'
  auth:
    enableGuestAccess: false
    users:
      - user: 用户名
        password: VUE_APP_ADMIN_PASSWORD
        type: admin
sections: # An array of sections
- name: Section 1 - Getting Started
  items: # An array of items
  - title: GitHub
    description: Source code and documentation on GitHub
    icon: fab fa-github
    url: https://github.com/Lissy93/dashy
  - title: Issues
    description: View currently open issues, or raise a new one
    icon: fas fa-bug
    url: https://github.com/Lissy93/dashy/issues
  - title: Demo
    description: A live demo
    icon: far fa-rocket
    url: https://dashy-demo-1.netlify.app
- name: Section 2 - Local Services
  items:
  - title: Firewall
    icon: favicon
    url: http://192.168.1.1/
  - title: Game Server
    icon: https://i.ibb.co/710B3Yc/space-invader-x256.png
    url: http://192.168.130.1/

运行容器(关键:端口与挂载)

  • 端口

    • 容器端口:通常为 HTTP 服务端口(自已定义)(按环境映射到一个高一点的本地端口更安全,比如 18888, 容器端口默认是8080)

  • 挂载(非常关键)

    • 把配置文件目录(我的为/docker/dashy/config)挂到:/app/user-data/

    • 把图标/图片目录(我的为/docker/dashy/public/images)挂到:/app/public/item-icons/(这样你就能用“本地图片”做 icon,图片放到images文件夹中)

    • 把公共目录(我的为/docker/dashy/public/)挂到:/app/public/

注意!!! 配置文件挂载的文件路径为/app/user-data/conf.yml,不是/app/public/conf.yml,我参考的好多教程都是后者,最新的以及改到了前者,导致我在配置密码登录时始终不成功,我测试了端口、文件映射、密码不合规、配置换行错误等等很多情况,最后发现,配置完全没起作用!!!一看才发现官方给的命令路径已经变了。

访问 Dashy

浏览器打开:http://<NAS_IP>:自定义的端口号(本地端口,不是容器端口),若配置密码登录的,就会出现以下界面:

登录后就进入到dashy后台。
首先,界面默认中英文,点击右上角的螺丝刀图标进入设置,在MAIN MENU中点击Change App Language,选择适合你的语言即可。

提供很多主题,任君采撷,我比较喜欢的主题有:

  • Cherry-Blossom
  • Argon
  • Crayola
  • Glow

点击右上角的笔的图标,即可进入编辑模式。可编辑部分以下几部分。
1,页首,即Home Lab旁的编辑图标和文字;
2,Section,大类别,可无限添加;
3,每个Section中都有Add New Item选项,可添加书签或快捷方式。

 

关于Dashy的使用我在此处不多赘述,相信各位彦祖亦菲随便在网上都能找到教程。由于篇幅限制,小编在此处只说明每个对象的图标怎么设置。

图标设置

如上图所示,在添加Item时,Icon一栏可以填写图标的网址,比如可以在网上搜寻公开的图片,将其网址填到此处。也可以在图标网站寻找:Font Awesome 图标 | 菜鸟教程

当然也可以将图片放到本地,自行读取。具体的方式为:

假设你将图片放到目录里面:/docker/dashy/public/images,取名为ficture.png,那么在Icon处填写的路径为:ficture.png

假设你将图片放到目录里面:/docker/dashy/public/images/dashboard_icons/ ,取名为ficture.png,那么在Icon处填写的路径为:dashboard_icons/ficture.png

按照这样填写的前提是,创建容器时目录映射为:

/docker/dashy/public/images)-> /app/public/item-icons/即将images文件夹的所有内容映射到容器的item-icons文件夹下,读取时默认会从该站点读取。

结果

我的初步结果图为:

增加页面

当页面不够用的时候,可以增加页面,具体方式是,在配置文件的同目录下新建一个配置文件,假设为/docker/dashy/config/conf1.yml,配置文件与conf.yml的内容相似(或者直接进行复制,等弄好后在面板里面进行修改保存到本地),然后在/docker/dashy/config/conf.yml内容的最底部添加以下内容


pages:
  - name: 名字自取(英文)
    path: conf.yml
    displayData:
      hideForGuests: false
  - name: 名字自取(英文)
    path: conf1.yml
    displayData:
      hideForGuests: false

通过域名远程访问

导航页最方便还是可以在公网访问,不然,我离开家或者别人使用不就歇菜了!!!

我采用的方式是宝塔面板建立站点然后进行nginx的反向代理(通过frp)。当然,还可以采用Lucky容器实现这一系列操作!!!

  • 接下来在路径/www/server/nginx/conf/nginx.conf(nginx的配置路径,小编是宝塔安装的,具体路径可能会不一致),填入一下内容:

server 
    {
        listen 80;
        server_name dashy.abc.com;  # 你的域名
    
        # 将 HTTP 请求重定向到 HTTPS
        location / {
            return 301 https://$server_name$request_uri;
        }
    }
server 
    {
        listen 443 ssl;
        http2 on;
        server_name dashy.abc.com;
    
        ssl_certificate /www/server/panel/vhost/letsencrypt/dashy.abc.com/fullchain.pem;  # 你的域名
        ssl_certificate_key /www/server/panel/vhost/letsencrypt/dashy.abc.com/privkey.pem;  # 你的域名
    
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';
        ssl_prefer_server_ciphers on;
        
        location / {
        proxy_pass http://127.0.0.1:端口/;  # 你的端口
        proxy_ssl_server_name on;
        proxy_ssl_name 127.0.0.1;  

        # WebSocket(必需)
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    
        # 转发头(含前缀)
        proxy_set_header Host                $host;
        proxy_set_header X-Real-IP           $remote_addr;
        proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto   $scheme;
        client_max_body_size 200m;
        # proxy_set_header X-Forwarded-Prefix  /jellyfin;
    
        # 播放长连
        proxy_read_timeout 3600;
        proxy_send_timeout 3600;
        proxy_buffering off;
        proxy_request_buffering off;
    
        # 不让上游改写 Location
        proxy_redirect off;
        }
        
    }

宝塔通过 Let’s Encrypt 生成的证书在路径/www/server/panel/vhost/letsencrypt/你的域名/

之后通过域名访问即可实现公网访问。

实用注意事项

1)强烈建议:别直接把 Dashy 裸奔到公网

Dashy 可以做鉴权(简单用户/Keycloak/HeaderAuth 等),但最稳的做法是:

  • Dashy 自带 auth 开启(最少一层)

  • 外层反代(Nginx/Traefik/群晖反代)再加 HTTPS

  • 再进一步:限制来源 IP 或者上 WAF/Zero Trust

2)端口尽量用高位端口,减少“随缘被扫到”

端口不占用、尽量大一点。这个原则在公网场景尤其重要(安全不是玄学,先把暴露面缩小)。

3)配置修改后怎么生效?

  • 如果你用 Docker 部署,Dashy 通常会自动处理构建/加载;但最稳妥的做法是:

    • 改完 conf.yml → 重启容器

  • Dashy 文档也提供了配置校验方式。

4)备份 conf.yml

Dashy 的“灵魂”基本都在 conf.yml:标题、布局、分组、链接、鉴权、主题都在里面。
建议把 docker/dashy/conf.yml 纳入:

  • NAS 定期快照 / Hyper Backup

  • 或者私有仓库(Gitea)里做版本管理(改动有迹可循)

这是示例文本,单击 “编辑” 按钮更改此文本。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
新年
快乐