作为一个NAS爱好者，折腾NAS的各种功能自然是少不了，而且Docker的服务也越来越多，面对众多的功能服务要记住每个的网页入口还真是考验你的记忆力，此时你就需要一个个人导航页汇总所有的信息，今天要分一个美观又功能强大的个人导航页Homepage。

Homepage 是一个现代化、全静态、快速、完全安全代理、高度可定制的应用程序仪表板，集成了 100 多种服务。专为自托管环境设计，支持 Docker 集成与多种服务 API 对接，兼具美观的现代界面与强大功能，帮助用户打造高效、安全、个性化的每日工作与生活入口。

Homepage特点

Homepage是你理想一天的开始，也是你得心应手的助手，拥有众多功能例如快速搜索、书签、天气支持、服务集成和小组件，优雅而现代的设计并注重性能。

快速加载：网站在构建时静态生成，实现近乎瞬时的页面加载速度。
安全可靠：所有后端服务的 API 请求均通过反向代理转发，有效隐藏敏感密钥，防止泄露。
多架构支持：提供 AMD64 和 ARM64 架构的镜像。
全面国际化：支持超过 40 种语言，满足全球用户本地化需求。
服务和书签管理：可添加自定义服务链接和网页书签，集中管理常用网站与应用。
Docker 集成：实时显示容器状态与资源使用情况，支持通过容器标签自动发现服务。
服务集成丰富：内置 100+ 服务集成，涵盖 Sonarr、Radarr、Plex、Portainer 等主流自建服务。
功能型小部件：提供天气、时钟、日期、快速搜索等实用小工具。
更多。。。

Homepage部署流程

本教程将以威联通 Qu405 为例，演示如何在 NAS 上通过 Docker 部署 Homepage 应用。这款机型是威联通最新推出的四盘位 NAS，外观延续了品牌一贯的简约设计，但在硬件配置上迎来了全面升级。**Qu405 搭载英特尔 N355 处理器与 DDR5 内存，相比上一代平台在多任务处理、系统响应速度与能效表现上都有明显提升。在多任务并行、进行大文件传输或执行 4K 视频转码等任务时，整机依然保持出色的流畅度与稳定性，整体抗压能力较以往有了显著增强。

在系统层面上，Qu405 同时支持 QTS 与企业级 QuTS hero 系统，用户可根据使用场景灵活选择。得益于 QNAP 自家的 Container Station 管理平台，部署 Docker 应用的流程被大幅简化，无需繁琐的命令行操作，只需在图形界面中完成镜像下载与容器创建即可顺利运行。系统还内置了 Qsirch 智能搜索、Qfiling 自动归档、File Station 文件管理等功能，这些组件能够在后台协同工作，有效降低系统负担，使整体操作体验更轻量、更流畅。无论是初次接触 NAS 的用户，还是习惯多任务环境的进阶玩家，都能快速上手，并根据需求灵活定制属于自己的工作空间。

总的来说，新一代威联通 Qu405 不仅在硬件性能上实现了显著跃升，在系统优化与应用体验上也更加成熟。凭借强劲的多任务处理能力和优秀的资源调度表现，它为 Docker 部署和容器化应用提供了更稳定的运行环境，也让 NAS 不再只是存储设备，而逐渐成为家庭与办公场景中可靠的智能计算中枢。接下来，本文将以 Qu405 为示例，详细展示如何在 QNAP NAS 上部署并运行 Homepage，让你的首页管理更加高效与直观。

Homepage的创建建议采用Docker Compose方式，威联通Container Station中点击最上面浏览旁边的箭头找到创建应用程序。

在弹出框中输入官方教程的代码，不过不能完全抄录需要修改几个地方。

首先ports是默认3000，如果有冲突需要自行修改。volumes里要修改config文件夹的映射，威联通Container Station修改为./config:/app/config。第三个需要修改的就是HOMEPAGE_ALLOWED_HOSTS参数，必须要设置为你访问Homepage页面的地址，格式为NAS的IP:Homepage端口。所以首版本的YAML代码如下：

services:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
ports:
- 3000:3000
volumes:
- ./config:/app/config
- /var/run/docker.sock:/var/run/docker.sock
environment:
HOMEPAGE_ALLOWED_HOSTS: 192.168.9.120:3000

但是后来我发现有一个问题就是自定义Homepage的一些图片采用本地方式会有问题，因为没有映射图片文件夹导致很不方便，因此我又在volumes添加images文件的映射./images:/app/public/images。最终版本的YAML代码如下：

services:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
ports:
- 3000:3000
volumes:
- ./config:/app/config
- /var/run/docker.sock:/var/run/docker.sock
- ./images:/app/public/images
environment:
HOMEPAGE_ALLOWED_HOSTS: 192.168.9.120:3000

成功创建后会自动生成你Docker Compose创建时候映射的目录，而且不需要你提前创建目录。具体路径为Container->container-statuon-data->application->应用名称。该应用程序映射的目录都放在该应用程序名称文件夹下。

Homepage成功启动后在浏览器输入IP:3000即可访问了，默认界面是比较简陋的，可见的内容很少，如果要炫酷又功能多的Homepage是需要自己手动去打造。

Homepage优化完善

由于Homepage是一个功能强大的导航页面，涉及的功能众多，接下先介绍入门攻略。这是我经过初步改造后实现的Homepage导航页面。

首先我们先来了解下页面的整体布局，页面布局从上至下依次为小组件内容、服务内容和书签内容三部分。

Homepage的页面配置全部采用yaml语法的配置文件设置。入门的攻略需要用到配置文件夹中的四个文件，setting.yaml、widgets.yaml、services.yaml、bookmarks.yaml。setting为整个Homepage页面效果以及功能的设置。widgets为页面中小组件内容的设置。services为服务内容的设置。bookmarks为书签内容的设置。

默认的setting.yaml跟空文件差不多，相比一把的配置文件会把默认值也写上，Homepage的setting配置内容可以说是非常极简。

我自己摸索后添加了完善后的内容，相比默认增加了诸多的功能。

providers:
openweathermap: openweathermapkey
weatherapi: weatherapiapikey
title: Dylan温文尔雅的导航
description: 这是我个人导航主页
#background: https://
#background: /images/8582995.jpg
background:
image: /images/8582995.jpg
# blur: xs # xs, sm, md, xl... 模糊
saturate: 90 # 0, 50, 100... 饱和度
# brightness: 100 # 0, 50, 75... 亮度
opacity: 90 # 0-100...不透明度
favicon: /images/favicon.ico
headerStyle: boxedWidgets #underlined ,boxed,clean,boxedWidgets
language: zh-CN
quicklaunch:
searchDescriptions: true
hideInternetSearch: true
showSearchSuggestions: true
hideVisitURL: true
provider: bing
layout:
影音:
style: row
columns: 3
BT下载:
style: row
columns: 3
Docker:
style: row
columns: 3

title为导航页面的标题，favicon为设置导航页面的图标，调整后显示在浏览器的标签页面。

language: zh-CN，默认语言为英文，将语言设置为 zh-CN导航会汉化所有内容显示为中文。

background为设置页面的背景图，可以是网络图片地址也可以NAS本地图片，之前创建时候images文件的映射此时就可以用到。此外还可以对背景图设置模糊、饱和度、亮度、不透明度四个效果。

headerStyle用于设置头部的样式效果也就是小组件信息部分的样式。共提供underlined，boxed,clean,boxedWidgets四种效果。

quicklaunch是个非常方便功能，当我们的导航页面内容非常丰富的时候，单独找一个内容就会非常费眼睛。quicklaunch就是一个很方便的功能，他不仅能搜索页面内的内容，也能通过制定的搜索引擎搜索外网。

layout可以对整个页面的元素布局进行设置，默认对Group分组的内容是采用列布局，可以根据需求设置为行布局，以及每行的数量。

widgets.yaml配置文件主要用于设置导航头部小组件的内容，

- resources:
cpu: true
memory: true
disk: /
- search:
provider: [bing, baidu, google]
target: _blank
- datetime:
text_size: 3xl
format:
dateStyle: short
timeStyle: medium
- openmeteo:
latitude: 36.0649
longitude: 120.3804
units: metric
cache: 5

在原来的基础修改了搜索引擎，并增加了日期时间显示和天气显示。search搜索引擎修改为bing/baidu/google，具体根据需求自己修改。datetime日期时间显示我感觉目前调整的不需要修改。天气显示使用的是免费的openmeteo，只需要把latitude、longitude经纬度调整为你本地的即可。

services.yaml主要设置要展示的所有服务，简单版本的设置比较简单，根据以下格式即可，icon可以设置显示的图标可以使用系统自带的图标也可以使用NAS本地的文件（可参考setting中的background参数）。进阶的话可以对每个服务设置单独的服务小组件，监控显示服务的一些信息，由于涉及的内容比较多，本文暂时不做进一步的讲解。

- 影音:
- Emby:
icon: emby.png
href: /
description: Emby 是一个媒体解决方案，允许您从任何地方访问您的家庭视频、音乐和照片。
- Jellyfin:
icon: jellyfin.png
description: Jellyfin 是一款免费的软件媒体系統，允许您安裝並运行自己的媒体服务器。
- Plex:
icon: plex.png
description: Plex 是一款媒体服务器软件，可让您从一个地方流式传输所有媒体内容。
- BT下载:
- qBittorrent:
icon: qbittorrent.png
href: /
description: Qbittorrent 是一个免费的开源 torrent 软件，是 µTorrent 的替代品。
- Transmission:
icon: transmission.png
href: /
description: Transmission是一款跨平台开源BitTorrent客户端软件，，采用MIT与GNU通用公共许可证双协议授权。

bookmarks.yaml文件比较好理解就是网址导致，类似浏览器的收藏夹，设置比较简单，可以单独设置icon图标或者abbr标识，具体可参考下列的代码。

- 视频:
- 腾讯:
- icon: /images/tengxun.png
href:
- 爱奇艺:
- icon: /images/iqiyi.png
href:
- 优酷:
- icon: /images/youku.png
href:
- 技术:
- Github:
- abbr: GH
href:
- Reddit:
- icon: reddit.png
href:

写在最后

Homepage一个功能强大而且简洁快速的个人导航页面，非常值得深入研究，本身自带100多个服务非常方便个人快速设置，方便监控你的服务和网站的情况。其实本身Homepage不仅仅是一个导航页面，你可以理解它为一个仪表板可以非常丰富的监控服务的信息。威联通的Container Station可以说是非常好用的Docker管理软件，而且本来威联通的NAS也是极具有性价比非常值得入手。

规格参数