开篇碎碎念

本篇主题：首发！在Docker、群晖、威联通、绿联NAS上搭建精美的HomePage个人导航页，保姆级教程，打造你的专属导航页

大家好，又到新的一篇文章，本期主题在上方已经说明，前面我已经演示了如何搭建Flare、Dashy等个人导航页，相信不少朋友也成功用上了。

最近发现HomePage导航页更加精美和强大，除了常规显示书签外，还可以显示你的容器信息，官方演示的界面非常精美，大家来看看。

左上角显示宿主机空间、CPU、内存占用情况，右上是搜索栏，可配置天气等信息。

中间是常规书签栏，可显示宿主机已安装的各种容器的运行状态，下方同样可显示自定义书签。

因为是初上手，简单研究了一下，我最终搭建了我的专属HomePage导航页，如下。

Docker状态这些因配置繁琐，后续各位感兴趣的话可以再出一篇进阶使用的，主要是我也没开始细致去研究，因为HomePage的配置是通yaml文件配置的，建议配合VS Code等开发工具使用。

虽说配置麻烦，但不难，在本文中会一步步演示如何去配置，达到和我一样的效果，真的不难，各位跟着步骤来即可操作，在NAS上搭建使用还是非常不错的。

手机上界面如下，各位觉得好看吗，并且添加了Ping值显示。

如果你有影音服务器之类，比如Jellyfin，甚至可以在此配置，查看此时Jellyfin运行状态、播放状态等，很强大。

好的，废话不多说，进入正题。

常规Docker部署HomePage

常规Docker即通用命令可在官方开源界面看到，记得将图中路径替换成你机器的真实路径即可，最好新建一个文件夹来保存此容器的文件。

威联通、群晖NAS部署HomePage

接着来演示威联通和群晖部署；

威联通使用的是TS-462C，N4505处理器，升级了8G内存，运行虚拟机和Docker也是极为流畅，并且4K解码非常流畅，有需要朋友可了解下。

群晖的话依旧是这台使用两年半的蜗牛星际，安装了群晖，非常稳定，J1900也满足基础需求。

威联通进入后台，打开控制台，搜索并打开SSH功能，点击应用。

如是群晖，一样，进入后台，找到控制面板，搜索SSH并打开。

使用putty等相关软件，通过SSH登录进入命令行界面。群晖和威联通操作一样的，地址填写NAS的IP地址，端口默认是22，输入登录NAS后台的账密，使用一个有管理权限的账号登录。

不知道怎么用这些软件的朋友请去查PUTTY如何连接之类的，非常简单，此处不多说，如果这些PUTTY连接都登录不上，后续Homepage的操作会更难。

登录后，如果是admin账户，会出现一个框框警告之类的，按Q，再输入Y，返回正常界面即可，此处做一个提示。登录成功后字眼大概如下提示。

返回群晖或威联通文件总管，威联通的话在Container文件夹下新建homepage文件夹，然后在homepage文件夹中新建config文件夹，然后右键config文件夹-属性，复制此路径，然后加上config。记得，开头要添加/share才是完整，即最终完整路径即是：/share/Container/homepage/config

群晖在docker文件夹中新建homepage文件夹，然后在homepage文件夹中新建config文件夹。选中config文件夹，右键属性，复制路径。完整路径即是图中：/volume1/docker/homepgae/config

注意，一切以你实际显示路径为准，复制粘贴，新建文件保存此路径即可，后续安装会用到。

返回开源界面，找到With Docker，复制图中红框中的命令，完整复制，新建一个文件把它保存下来。

保存好的原始命令如下图，完善一下原始命令，在.sock和ghcr中间添加–restart=always命令，注意，在英文状态下输入，且–restart=always命令前后各有一个空格；这样，NAS重启后，导航页也会跟着重启的意思。

然后继续编辑安装命令，图中原始命令是前面复制的，把原始命令中的/path/to/config替换成你得到的config路径属性即可，就得到最终命令。然后复制这个最终命令。

注意，默认是映射了3000端口，如主机的3000端口被占用，可自定义端口，如6999:3000即可，改动第一个3000数值代表自定义主机端口，我3000端口未占用，就不改动了，按3000来使用。

回到SSH命令界面，复制粘贴得到的最终命令，回车运行。会提示Unable开头，表示在本地没镜像，会去镜像库中拉取，等它拉取完成，不要急，快慢取决于你网络。

威联通、群晖均是如此操作。流程一样。

注意，刚运行命令可能提示docker：Got permission denied，说明没管理权限，运行sudo -i，然后回车输入密码，获取管理权限，再次运行安装命令即可正常下载和安装镜像，此处需要注意一下。

网络有点慢，第一层镜像拉了好久，没办法，等吧。

当你看到一长串数字，说明部署成功，返回Docker后台即可看到镜像，可进行开启等操作。如提示bind端口占用等，记得把3000端口替换成未占用端口即可。

OK，在威联通或群晖后台即可看到镜像，如未启动，就开启。

注意，威联通不要在安装完容器后做任何编辑，不然会失效，无法启动后台，所以威联通安装完成后，不要再次编辑容器，默认让它运行即可，群晖也是。

在浏览器中加上NAS的IP地址，加上你自定义的端口，即可进入homepage后台了。威联通、群晖下部署成功。

绿联NAS部署HomePage

绿联使用的是旗舰级DX4600，N5105处理器+8G内存，可扩展内存+双M2+4盘位，配置拉满，玩Docker之类也是轻轻松松了。全金属机身，质感非常不错，凭借着易用性，这两年也是收藏不少用户，感兴趣朋友可了解下。

在绿联电脑版APP中打开Docker。

点击镜像管理-添加-私有库（注意是私有库，这个镜像未发布在Docker Hub），URL地址处输入：ghcr.io/benphelps/homepage:latest

找到刚下载好的镜像，点击创建容器。打开高级设置，点击下一步。

设置重启策略、勾选创建后启动容器。

网络处，选择brideg，如你的3000端口未被占用，可直接选择Host；如选择brideg，点击端口设置，在本地端口处自定义一个未占用端口即可，此处我使用6999端口。

返回文件管理处，新建一个homepage文件夹，专门保存此容器目录，再在homepage文件夹中新建config文件夹。

返回Docker，点击存储空间，按下图，添加文件夹，选择刚创建的config文件夹，装载路径请照抄，类型为可读写。

本来还要映射docker.sock，进行容器状态查看、整合之类的，但绿联未开放SSH，无法选择此目录，幸好此选项是可选，最多不能查看各容器状态信息，不影响正常使用。

点击下一步，确认，确认，直到完成容器创建。

点击快捷访问，即可进入homepage后台，成功部署。

HomePage初上手

首先，homepage的配置修改是在yaml文件夹上进行修改的，参考官方说明未找到图形化修改形式。大家可在homepage开源界面中找到相关操作文档。如果英文不错的同学可能很容易看懂。

我这里演示常用的书签和服务添加的操作，返回文件管理、文件总管，找到安装时创建的homepage下的config文件夹，下载services.yaml文件。

然后电脑上安装VS Code这个软件，把下载的services.yaml文件拖入即可打开，初始长这样。

比如书签形式，第一次我的修改如下。也就是把这些格式的字眼按下图形式替换成你的书签。

可以看到，我将书签分成外内访问类、内网书签类、常用工具类，共3大类书签，并且每一类下都添加了一个书签。

将保存好的services.yaml文件重新上传到homepage下的config文件夹下，替换原有的services.yaml文件即可。群晖威联通也是一样，替换即可。

返回容器管理界面，重启一下homepage容器。最好重启一下，虽然不重启好像也是可即时生效的。

返回Homepage后台，刷新一下吧。OK，前面修改的yaml文件生效了，界面如下，成功展示我的3大类书签。

如果想添加图标怎么添加呢？如下图，在书签处添加一行icon:的标签，后接需要的图标的网址，比如下图的测速图标，搜图引擎中搜索，复制图片地址，粘贴地址即可。

其它几个书签也是同样如此填写。

将保存好的services.yaml重新上传到config文件夹，刷新后台。可以看到，成功显示书签图标了。

如果想在每个分类书签中添加多个书签，怎么操作。请看下图，没错，就是复制粘贴大法，有规律可循，复制框中，粘贴到第二排，修改书签名、图标地址、书签地址，依次操作即可。

第二类书签也是可以如此操作。如果想添加第4分类书签，直接一整个大类复制粘贴即可，就添加了第4类书签。

上传修好好的yaml文件替换，刷新，效果出现了。是不是就出现多条书签了。

你甚至还可以添加ping功能，测试延迟。

保存修改，替换yaml文件后，刷新，效果图如下。只要添加了ping的，都出现延迟数值了。

好的，书签以及添加分类就完成了，各位就按前面步骤操作。

支持小组件，如下图，在官方文档中找到Service Widgets，支持哪些小组件也列出来了，比如Jellyfin、EMBY等，点击即可跳转，复制它的文本。

如下图，处于一级类目中的Jellyfin书签中添加widget即可，然后填写url地址和API（Jellyfin后台可开启API，获取即可）。

效果如下图所示，当我在Jellyfin后台播放影片时，homepage刚添加的widget就会显示在播放哪部影片、以及目前播放进度，是不是很强。当然，不止支持Jellyfin，也支持EMBY、PLEX等许多容器，支持数十个常见的镜像，各位去官方文档查看，就按我前面的yaml配置方法套用上去即可。

可以发现，底部还默认有一些书签，同样可编辑，在homepage的config文件夹中找到bookmarks.ymal，下载下来，使用VS Code打开编辑。

默认是右图，左图是我在此基础上修改的，和前面一样，如果要添加多条书签，复制第二条—开始的整个部分，粘贴后，设置书签即可，不再赘述了。

保存后，更新上传bookmarks.ymal文件后，刷新，可以发现成功变动了。

同样，左上角的信息也是可以自定义的，请看官方文档。

最终，初步研究和上手之后，我的HomePage导航页暂定这样，我感觉美观度还是可以的。

此外，还可以设置显示Docker容器信息等操作，目前我还没细致去研究，如果各位朋友有需求，后续再看看出一篇，请关注、点赞支持，给我更大创作动力，感谢各位。

关于远程访问

个人导航页做好了，为了在户外也能访问导航页，可考虑使用各种远程服务，具体可参考下我这篇的远程访问解决方案。

结尾

本文也是在这天心血来潮搭建和安装的，光是总结群晖、威联通、绿联NAS的安装操作流程就花了不少时间，还简单研究了下官方操作文档，如有不对，请指正。

应该是首发关于HomePage在NAS上搭建的图文教程，创作不易，如有帮助，请关注、点赞，感谢各位。