前言

在这个信息碎片化的时代，我们每天都会接触到大量内容：常用网站入口、服务器状态、日程提醒、收藏书签、热点信息、工具列表……这些内容如果散落在浏览器标签页、不同 App 或各类网页中，不仅查找繁琐，也让效率大打折扣。

与其频繁切换界面，不如将所有常用入口与资讯集中到一个“主页”。这也正是近年来越来越多人选择 自建个性化导航页（Personal Dashboard） 的原因——它简洁、美观、可定制，让属于自己的信息空间变得井井有条。

1. 项目

FlatNas 正是一款专为此场景而生的开源项目。它提供了现代化 UI、多组件支持、自由布局与高度个性化设置，让用户可以轻松构建一个专属导航主页或 NAS 仪表盘。不管是日常工作生活导航，还是服务器面板入口管理，FlatNas 都能带来清晰优雅的体验。

作为一款前后端开源、自托管的项目，FlatNas 支持 Docker 快速部署，不需要复杂配置，几分钟即可在服务器上搭建完成。因此，它不仅适合技术用户，也适合想要打造个人主页、团队入口页或 NAS 仪表盘的普通用户。

1.1 项目特点

🎨 高颜值现代化 UI
FlatNas 采用简洁、极具现代感的界面设计，支持卡片式布局、柔和配色与响应式排版，无论在桌面还是移动端都能获得优秀的视觉体验。

⚙️ 高度可定制化
通过简单的配置即可自由调整页面布局、模块顺序与主题样式。无论想打造极简导航页还是信息面板，FlatNas 都能满足用户的定制需求。

🧩 丰富组件支持
项目内置了常用的功能组件，包括：

书签导航
搜索栏
时钟与天气
快捷工具
链接面板
自定义内容模块
这些组件可灵活组合，实现高度个性化展示。

🚀 前后端分离架构
FlatNas 基于 Vue3 + TypeScript（前端）与 Express（后端）构建，拥有出色的性能表现，加载迅速、交互流畅，适合长期自托管使用。

📦 支持 Docker 快速部署
官方提供 Docker 镜像，用户只需一条命令即可启动项目，无需处理繁琐依赖，轻松在服务器、NAS 或本地环境中运行。

🔐 可选密码保护与访问控制
支持对首页设置访问密码，用于保护私密导航页、团队内部入口页或企业内部资源列表。

🌙 夜间模式与多主题支持
FlatNas 提供明亮 / 深色主题切换，并支持灵活配色，让界面风格更贴合个人喜好。

📂 本地配置文件管理
项目采用配置文件进行内容管理，便于备份、迁移与版本控制，适合长期维护与个性化开发。

🧭 适用于多种使用场景
无论是个人专属导航页、团队入口门户、NAS 系统首页，还是服务器管理面板入口，FlatNas 都能轻松胜任。

1.2 项目展示

2.相关地址

gitHub开源项目：https://github.com/Garry-QD/FlatNas?tab=readme-ov-file

3.搭建环境

服务器：这里为了方便搭建项目使用的是莱卡云的境外香港云服务器。(国内用户连接建议使用国内的服务器(需备案域名或者IP+端口)延迟会更低)
莱卡云服务器促销活动性价比会更高。查看官网购买链接：https://www.lcayun.com
资源配置：2核2G 30G硬盘
由于国内服务器访问海外源较慢，这边为了方便演示直接使用海外服务器搭建。
服务器系统：Debian-13
【必需】安装Docker：安装好 Docker、Docker-compose
【非必需】域名一枚，可用于解析到服务器上使用域名访问

4.搭建视频

哔哩哔哩：

5.搭建方式

5.1 安装docker和docker-compose

安装教程：服务器上安装docker和docker-compose教程

5.2 创建docker文件

#在opt目录下创建flatnas文件夹
mkdir -p /opt/flatnas

#打开flatnas文件
cd /opt/flatnas

5.3 创建Docker Compose 配置

#编辑docker-compose.yml
vim docker-compose.yml

填入以下的配置文件

根据自己实际情况来设置

services:
  flatnas:
    image: qdnas/flatnas:latest          # 官方 FlatNas 镜像，使用 latest 保持最新版本
    container_name: flatnas              # 容器名称，便于管理和查看状态
    restart: unless-stopped              # 自动重启策略：除非手动停止，否则始终保持运行
    ports:
      - '23000:3000'                     # 端口映射：外部 23000 -> 容器 3000
                                         # 访问地址为 http://服务器IP:23000
    volumes:
      - ./data:/app/server/data          # 持久化存储：保存配置文件、主页内容、用户数据
      - ./music:/app/server/music        # 音乐目录映射：播放器组件可读取本地音乐文件

5.4 运行flatnas的docker镜像

我们先启动docker

# 启动docker
docker compose up -d

# 重启docker
docker compose stop
docker compose start

# 升级docker
docker compose down
docker compose pull
docker compose up -d

启动成功后，你可以通过以下命令查看运行状态：

docker ps | grep flatnas

如果容器状态为 Up，说明已经启动成功。

浏览器访问：

http://你的服务器IP:23000

第一次进入时，FlatNas 会生成默认的示例主页，你可以根据自己的需求逐步调整布局与内容。

6.⚙️ 配置说明

默认密码: 系统初始密码为 admin，请登录后在设置中及时修改。
数据文件: 所有配置（布局、组件、书签等）均存储在 server/data/data.json 中。
音乐文件: 将 MP3 文件放入 server/music 目录，刷新页面后即可在播放器中看到。
CGI 脚本: 将自定义脚本放入 server/cgi-bin 目录，可通过 /cgi-bin/script.cgi 访问。

7.结尾

FlatNas 作为一款兼具美观与高可玩性的开源导航页项目，让信息聚合与个人主页的搭建变得前所未有地简单。无论是打造个人起始页、整理常用工具入口，还是建设团队内部的轻量级门户，FlatNas 都能以极低门槛、极强灵活性满足你的需求。如果你正在寻找一款轻量级且足够自由的首页解决方案，那么 FlatNas 会是一个非常值得尝试的选择。

在服务器上用 Docker 快速部署 FlatNas：打造专属个人导航页

前言