群晖Web Station搭建个人导航站：从零到日常维护全记录

有阵子我特别烦浏览器书签栏：台式机、笔记本、手机三处各存一套，加一个新网站要在三个地方重复操作，标签一多连自己都找不到。后来认真搭了一个基于群晖Web Station的静态导航站，把常用链接全收进一个网页里，白天在办公室打开、回家里在局域网打开，响应很快，文件还牢牢在自己手里。这篇文章完整记录我从零开始的过程——Web Station到底怎么用、写一个够用的导航页、发布到群晖、再排错和日常维护，全在这里。适合手里有一台群晖、不想折腾重型建站程序、只想搞一个能自己控制的导航页的朋友。如果你连“导航站”这个概念都不熟，也没关系，跟着走一遍就明白了。

1. 被书签栏折腾够之后，导航站到底解决什么问题

1.1 浏览器书签的真相：收藏了一堆，用的时候一个都找不到

浏览器书签栏看着方便，真用起来问题不少。最典型的是多设备同步：台式机、笔记本、手机各登各的账号，有的浏览器同步正常，有的浏览器一换设备书签直接消失。公司电脑通常不会登你的个人账号，书签栏等于不存在，临时要找一个常去网站只能现场百度。标签一多更麻烦，几百个书签堆在一起，既没有有效的分类，也没有搜索功能，翻半天翻不到，最后干脆重新输域名。

无痕模式下书签基本不显示，这也是一个经常被忽略的点。很多时候你会想临时收藏一个页面，结果发现当前是隐私模式，书签压根不可用。等切回正常模式，那个页面早就忘了。书签栏还有一个天然的物理限制：垂直空间就那么多，收藏到一定数量以后，每个新链接都会吃掉一行空间，最后整个浏览器上方全是书签，连地址栏都被挤得看不清楚。

1.2 在线导航工具看着香，但总觉得不是自己的

后来我也试过各种在线导航类工具，比如网上那些“个人主页”“网址导航”服务。刚用的时候挺新鲜，把链接一个个填进去，还能换壁纸、换主题。但用久了就发现几个绕不开的问题。

第一，数据在别人的服务器上。链接列表看起来只是几十条网址，但里面其实暴露了你的使用习惯：哪些网站天天逛、哪些工具天天用、大概从事什么行业，全都能分析出来。有些导航工具还要注册账号、登录使用，等于把个人数据主动交出去。

第二，平台不确定性太大。免费工具说不准哪天就开始加会员、弹广告、强制改版，甚至直接停止服务。真到了那一步，你积累的几百条分类链接要么手工迁移，要么直接作废。这种事我在网上见过不止一次，所以越来越倾向于把数据放回自己手里。

第三，定制程度有限。大部分在线导航允许你改的只有“名字”“图标”“颜色”这类表层东西，布局逻辑、页面结构、搜索行为全都按平台的设计走。一旦平台整体改版，你只能被迫适应新界面，没有讨价还价的余地。

1.3 群晖自建导航站的优势

自建导航站最核心的价值就一句话：数据完全归自己。所有文件都存在群晖硬盘里，想备份就备份，想导出就导出，想删掉重来也只是一条命令的问题。

日常使用上，局域网内访问导航页不需要经过外部互联网，纯走内网带宽，打开速度直接是秒开。相比每次加载一个云端导航页还要等图片、等字体、等脚本，体验差距非常明显。页面长什么样、有哪些分类、搜索框放哪个位置、要不要显示描述，全部由自己控制。想改成极简风格就删掉多余CSS，想加一个日期栏就加一行HTML，完全不受平台限制。

对群晖新手来说，这个项目也是绝佳的练手机会。它能让你把套件安装、文件夹权限、端口配置、Web服务器基础概念全部过一遍，而且出错也不会影响NAS本身，实在不行把站点删掉重来就行。风险极低，收获却很实在。

2. 动手前先搞懂Web Station：不只是一个文件展示器

2.1 Web Station的实质：网站站点管理器

很多人第一次打开Web Station，看到界面里的“网页服务门户”“虚拟主机”“PHP设置”几个选项就懵了，以为这是个很复杂的套件。其实它的本质是一个图形化的网站站点管理器，帮你在群晖上把“一个目录”映射成“一个可访问的网站”。

背后工作的其实是Web服务器，一般是Nginx或者Apache。Web Station相当于给这些服务器套了一层图形界面，你不需要自己去写Nginx配置，不需要手动规定端口和目录，只需要在界面上点几个按钮：选好目录、填好端口、确定类型，Web Station就帮你在后台生成对应的站点配置，并且自动管理服务进程。

理解“文档根目录”这个概念最重要。所谓文档根目录，就是这个网站文件所在的文件夹。用户访问你指定的端口时，Web服务器就去这个文件夹里找index.html之类的文件，然后返回给浏览器。导航站项目里，文档根目录就是我们后面要创建的web/navsite目录，里面放着页面所需的HTML、CSS、JavaScript文件。

2.2 静态网站、PHP网站、反向代理门户，到底该选哪个

Web Station支持的门户类型不止一种，新建站点时经常要选。很多新手在这里纠结，我直接列个对比表说明白。

导航站显然选第一种，静态网站。它没有后端逻辑，不需要数据库，不需要PHP，不需要登录后台，只是把写好的页面文件“喂”给访问者。

2.3 为什么我坚持导航站用纯静态

曾有人问我，既然Web Station支持PHP，为什么不直接上WordPress再装个导航插件，功能更全。我的答案很简单：导航站的核心需求是“快”和“省心”，纯静态在这两点上碾压一切动态方案。

安全方面，静态站没有数据库、没有表单提交、没有用户登录接口，常见的SQL注入、后台爆破、插件漏洞这些攻击手段基本无处施展。就算站点目录被人拿到了，里面也只有无法执行的静态文件，搞不出大动静。

性能方面，Nginx返回静态文件的速度极快，几毫秒就能完成一次请求。局域网里访问几十个链接的导航页，体感就是瞬时加载，不需要等PHP进程跑起来，更不需要等数据库查询返回。维护方面，改一个链接只需要改data.js文件里的一个数组项，传上去刷新页面就完事，比进WordPress后台一层层点菜单高效得多。

3. 正式开工：套件安装与目录规划

3.1 装好Web Station和它的小伙伴

打开群晖的套件中心，搜索“Web Station”，点击安装。DSM 7版本安装Web Station时，一般会自动把Web Server、PHP等依赖组件一起装好，你不需要额外去搜索安装。如果你和我一样只跑静态站，不需要写任何PHP代码，但依赖组件已经装上了就让它们待着，别去手动卸载，否则Web Station本身也可能出问题。

安装过程通常几十秒到几分钟，取决于NAS的型号和网络状况。装完以后，套件中心里Web Station显示“已安装”，打开它就能看到主界面。主界面上有“概览”“脚本语言”“网页服务门户”“虚拟主机”等几个分区，我们主要用的是“网页服务门户”。

3.2 目录规划：别把文件塞进系统根目录

在File Station里先规划一个清晰的目录结构。我的习惯是创建一个共享文件夹web，专门存放所有网站类项目，然后在web下面再建站点目录。比如导航站就放在web/navsite，以后如果还想做第二个站点，比如工具箱、状态页，可以在web下面再建tools、status，互不干扰。

之所以不把文件直接扔到群晖的系统默认目录里，是因为站点目录必须能独立授权、独立备份、独立管理。共享文件夹web本身有权限控制，后续给Web Station的http用户开权限时只针对这一个共享文件夹操作，不会误伤系统其他目录。而且共享文件夹更适合通过同步工具备份，万一硬盘出问题，整个web目录都能恢复。

创建完共享文件夹后，记得在web下面新建navsite子目录。这个目录就是之后Web Station站点的文档根目录，导航页的所有文件都会放在这里。

3.3 把项目文件传进群晖的三种方式

文件准备好了，怎么传到群晖？最直接的方法是打开File Station，进入web/navsite目录，把文件拖拽上传，适合一次性传完整个项目。

我日常维护更推荐用SMB协议映射网络驱动器。在Windows资源管理器地址栏输入\\NAS的IP\web，输入群晖账号密码后，这个目录会像一个本地硬盘一样显示在电脑上。然后用任何你喜欢的编辑器直接打开data.js修改，保存后它就是完成了上传，省去了每次打开网页后台拖文件的步骤。

如果你日常编辑频率更高，还可以装群晖Synology Drive套件，把web文件夹指定为同步文件夹。这样本地改完文件后，后台自动同步到NAS，体验接近网盘客户端。不过对导航站这种轻量项目来说，SMB已经足够，Drive属于可选项。

4. 手写导航页三件套：数据、渲染、样式各司其职

4.1 为什么推荐数据与页面分离

写导航页最容易犯的错，是把链接数据直接硬编码在HTML里。今天加一个链接要改HTML，明天调个描述还要改HTML，改的时候一不留神就会破坏标签结构，页面直接乱掉。

我采用的思路是把数据抽出来单独放一个文件：data.js负责存所有导航链接，index.html只负责页面骨架，app.js负责把数据渲染到页面上，style.css负责外观。这样日常维护只需要打开data.js，在数组里加一行对象，保存、刷新，完成。页面逻辑基本不需要碰。

这其实就是最简单的数据与视图分离。对一个人维护的导航站来说，这套结构已经足够清晰，不需要引入任何框架。

4.2 数据文件data.js怎么写

data.js的内容是一个数组，每个数组元素代表一个分类，分类里包含若干链接。每个链接有四个字段：name显示名称，desc描述文字，url跳转地址，color是图标背景色。

const SITE_DATA = [ { category: "搜索与工具", links: [ { name: "百度", desc: "综合搜索", url: "https://www.baidu.com", color: "#4e6ef2" }, { name: "必应", desc: "搜索与资讯", url: "https://www.bing.com", color: "#008373" }, { name: "DeepL翻译", desc: "文本与文档翻译", url: "https://www.deepl.com/translator", color: "#0f2b46" } ] }, { category: "NAS内服务", links: [ { name: "群晖DSM", desc: "NAS管理后台", url: "http://192.168.1.100:5000", color: "#2d7d9a" }, { name: "路由器后台", desc: "网关设置与设备管理", url: "http://192.168.1.1", color: "#e37400" } ] } ];

注意把示例IP换成自己群晖和路由器的实际地址。分类可以根据自己的习惯随便加，比如“影音娱乐”“文档办公”“常用工具”，每个分类下放对应的链接就行。我的习惯是保持每个分类的链接数量控制在十条以内，太多了翻起来也累。

4.3 页面骨架index.html与样式style.css

index.html只负责基础结构：顶部一个标题，一个搜索框，下面一个容器留给JavaScript渲染链接列表。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的导航站</title> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <header class="hero"> <h1>我的导航站</h1> <input type="search" id="searchInput" placeholder="搜索网站名称、描述或分类..."> </header> <div id="links"></div> </main> <script src="data.js"></script> <script src="app.js"></script> </body> </html>

style.css负责外观，我没有用任何在线图标库和在线依赖，所有图标都是文字首字母加背景色生成的圆角方块。这样即使NAS完全处于内网断网状态，导航页也能正常显示，不会出现图标加载不出来的情况。

:root { --bg: #f5f6f8; --card-bg: #ffffff; --text: #333333; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; } .container { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; } .hero { text-align: center; margin-bottom: 28px; } .hero h1 { font-size: 28px; margin-bottom: 16px; } #searchInput { width: 100%; max-width: 520px; padding: 12px 16px; font-size: 16px; border: 1px solid #dcdcdc; border-radius: 8px; outline: none; } #searchInput:focus { border-color: #5c6bc0; box-shadow: 0 0 0 3px rgba(92,107,192,0.12); } .group { margin-bottom: 28px; } .group h2 { font-size: 20px; border-left: 4px solid #5c6bc0; padding-left: 10px; margin-bottom: 14px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .card { display: flex; align-items: center; gap: 12px; background: var(--card-bg); padding: 14px; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid #e8e8e8; transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #ffffff; font-weight: 600; flex-shrink: 0; } .info { display: flex; flex-direction: column; overflow: hidden; } .name { font-weight: 600; } .desc { font-size: 13px; color: #888888; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .empty { text-align: center; color: #999999; padding: 40px 0; }

4.4 渲染与搜索逻辑app.js

app.js是核心逻辑，做两件事：把SITE_DATA里的数据渲染成链接卡片，并监听搜索框输入，实时过滤显示匹配的链接。

(function () { const container = document.getElementById("links"); const searchInput = document.getElementById("searchInput"); function filterData(keyword) { if (!keyword) return SITE_DATA; const kw = keyword.trim().toLowerCase(); return SITE_DATA.map(group => { const matchedLinks = group.links.filter(link => { return [link.name, link.desc, link.url, group.category] .join(" ") .toLowerCase() .indexOf(kw) > -1; }); return { category: group.category, links: matchedLinks }; }).filter(group => group.links.length > 0); } function render(keyword) { const groups = filterData(keyword); if (groups.length === 0) { container.innerHTML = '<div class="empty">没有匹配的链接</div>'; return; } container.innerHTML = groups.map(group => { const linkCards = group.links.map(link => { return `<a class="card" href="${link.url}" target="_blank" rel="noopener noreferrer"> <span class="icon" style="background: ${link.color || "#5c6bc0"}">${link.name.charAt(0)}</span> <span class="info"> <span class="name">${link.name}</span> <span class="desc">${link.desc || ""}</span> </span> </a>`; }).join(""); return `<section class="group"> <h2>${group.category}</h2> <div class="cards">${linkCards}</div> </section>`; }).join(""); } searchInput.addEventListener("input", function () { render(this.value); }); render(""); })();

搜索功能实现得比较直接：把搜索关键词和每个链接的名称、描述、URL、分类拼接成一段文本，再判断是否包含关键词。因为导航站数据是自己维护的，数量通常不大，这种全量过滤的性能完全够用，没必要引入索引之类的高级方案。

渲染函数里用rel="noopener noreferrer"是安全习惯，避免新打开的页面通过window.opener反向操控导航页。

4.5 本地预览与关键细节

这四个文件放在同一个目录里，双击index.html就能在浏览器本地预览。因为用的是JS数组渲染而不是fetch外部JSON文件，不存在本地文件协议下的跨域限制，所以你在NAS上传之前就能先确认效果。

这里有个设计上的取舍：为什么数据不用JSON文件，而用JS文件？如果用data.json，那么app.js需要通过fetch("data.json")读取，本地双击HTML时file://协议下fetch会被浏览器拦截，必须起一个HTTP服务才能预览。而把数据写成const SITE_DATA = [...]，浏览器加载普通script标签就能拿到数据，既能本地预览，又能在群晖上访问，还允许在数据文件里写注释，比JSON更灵活。

5. 发布到Web Station：从一堆文件变成能访问的网站

5.1 在Web Station里新建站点

文件已经传到了web/navsite，接下来就是把Web Station指向这个目录，让它变成一个可访问的站点。

打开Web Station，进入“网页服务门户”分区，点击“新增”。不同DSM版本的界面可能有细微差异，有的叫“新建站点”，有的叫“创建门户”，但核心流程是一致的：选择服务门户类型，填写名称，指定文档根目录，设置端口。

我的配置如下：

保存之后，Web Station会自动生成站点配置。如果一切正常，站点列表里就会出现一个名为navsite的条目，状态显示在线。

5.2 端口怎么选：别撞车

端口选择是新手最容易踩坑的地方。群晖默认占用了不少端口：DSM管理页面是5000和5001，Web Station预置站点通常会占用80和443，还有各种套件各自占用不同端口。如果你选的端口已经被某个套件占用，保存时会提示端口冲突，站点无法创建。

我的建议是避开系统常用端口，在8000到9000之间选一个不常见的端口，比如8082、8088、8090都可以。这样做还有个附带好处：端口不容易被大范围的扫描脚本撞上，降低被随意访问的概率。虽然内网环境风险较低，但习惯还是好一点更踏实。

5.3 首次访问体验

站点创建成功后，在浏览器地址栏输入http://NAS的IP:8082，比如http://192.168.1.100:8082，就能看到导航页。同一局域网里的手机、平板、其他电脑，只要连的是同一个网络，用同样的IP和端口就能直接打开，不需要安装任何客户端。

我第一次部署完访问时确实有点兴奋，一个普通文件夹里的几个文件，通过Web Station一配置，就变成了所有局域网设备都能访问的网页。这个体验很直观地解释了“Web服务器到底在做什么”。

如果你不想记IP加端口，也可以改成“基于名称”的门户类型，但需要你有一个域名并把域名解析指向群晖。内网使用场景下，基于端口的方式最简单可靠。

5.4 外网访问的两种常见打开方式

如果只在家里局域网用，上述步骤已经足够。如果你希望出门在外也能打开导航站，群晖提供了官方方案：QuickConnect。在Web Station创建门户时或DSM的QuickConnect设置里，可以把这个站点绑定到一个外网可访问的地址，官方会帮你处理中间环节，跟着向导填就行。

如果你有自己的域名，也可以走DDNS方案：在群晖里配置动态域名解析，让域名始终指向你家的公网IP，再在路由器上把对应端口转发给NAS。这部分官方文档已经写得很详细，每家路由器界面又不一样，我就不在这里重复造轮子了。我的建议是：没有强需求就先做好内网使用，外网访问等有明确需要了再研究。

6. 部署路上的真实踩坑：403、端口占用、改了不刷新

6.1 403 Forbidden：最有可能是权限问题

部署过程中最常遇到的错误是403 Forbidden，页面完全无法打开，感觉像文件不存在一样。我第一次遇到时排查了很久，最后发现根本不是代码问题，而是群晖文件权限没给够。

Web Station里运行的网站，默认使用的系统用户是http，和你的管理员账号不是同一个身份。如果你把文件上传到web目录后，没有给http用户开放读取权限，Web服务器就没有资格去读取这些文件，自然返回403。

解决方法：在File Station里右键web共享文件夹，选择“属性”->“权限”，点“新增”，添加http用户，并把权限设为“读取”。如果子目录和文件权限有问题，就勾选“应用到所有子文件夹和文件”。改完以后刷新页面，问题基本都能解决。

6.2 找不到首页文件：必须是index.html

另一个常见问题是页面能打开，但返回404，或者直接显示文件目录列表。大部分Web服务器的默认首页文件名是index.html，注意是小写。如果你把文件命名成Index.html、index.htm或者home.html，Web服务器不一定能识别。

建站时一定要确认navsite目录下存在index.html这个文件，其他几个文件名称大小写也尽量保持一致。HTML里引用的style.css、app.js、data.js，实际文件名也必须完全一致，Linux文件系统大小写敏感，Style.css和style.css是两个文件。

6.3 端口冲突导致站点启动失败

新建站点时如果保存失败，提示端口被占用，说明你选的端口已经在被其他套件或站点使用。这种情况改掉端口重新保存就行，不需要做其他排查。

如果是已经运行过的站点突然打不开，可以看看是否安装了新的套件把端口抢走了。少量套件在安装或更新时确实可能占用到范围内的随机端口。解决办法还是换端口，优先选择8000段里不常见的数字。

6.4 改了data.js页面却不更新：浏览器缓存惹的祸

明明在本地把data.js里的新链接加好了，传到NAS以后打开导航页却还是老样子。这种情况大概率是浏览器缓存。

静态站没有动态生成内容，浏览器为了提高性能会把js、css这类资源缓存下来。简单粗暴的方式是按Ctrl+F5强制刷新，或者打开开发者工具勾选“Disable cache”再刷新。

更规范的做法是给脚本标签加版本号，每次更新后改一下版本号，浏览器就会当它是一个新文件。你可以把app.js?v=20250101写成这样来强制浏览器重新加载。这是静态站日常维护中很实用的小技巧。

6.5 一个让我白屏二十次的低级错误：多余逗号

JavaScript对语法错误的容忍度其实很低，数据文件里一个多余逗号就可能导致整个SITE_DATA没有被定义，导航页白屏。最典型的场景是：

const SITE_DATA = [ { category: "工具", links: [ { name: "百度", url: "https://www.baidu.com" }, { name: "必应", url: "https://www.bing.com" }, // 这行末尾多了逗号也没事 ] // 这里数组末尾多了逗号，在某些浏览器里就会报错 } ];

不同浏览器对“尾随逗号”的容忍度不一样，看起来在本地测试没问题，换到另一台设备就白屏。最稳妥的做法是编辑器里装一个语法检查插件，保存之前先看有没有红色波浪线。VS Code默认就会对JS文件做语法高亮，错误一目了然。

顺便说一下，这也是我坚持用JS数组而不是JSON文件的原因之一。JSON对格式要求更严格，注释都不允许写，改起来压力大很多。

7. 把导航站变成日常工具：维护习惯与扩展方向

7.1 新增一条链接的标准流程

导航站用得越久，链接越丰富，维护效率就越重要。我现在新增一条链接的流程是：在电脑上打开映射好的web网络驱动器，用VS Code打开data.js，找到对应的分类，在links数组里加一行，保存，然后刷新浏览器。

举个例子，想加一个“团队知识库”的入口：

{ name: "团队知识库", desc: "内部文档与协作", url: "http://192.168.1.50:8888", color: "#3f51b5" }

整个操作用时不到十秒。如果是晚上躺在沙发上用手机想记录一个链接，我一般会在群晖的File Station里用内置文本编辑器打开data.js，同样能完成修改。File Station的编辑器虽然功能没有本地编辑器强，但应急改数据完全够用。

7.2 不加HTTPS会被拦吗？内网环境怎么处理

纯内网访问用HTTP协议没有问题，大多数设备不会拦截。但如果你通过域名在外网访问导航站，现代浏览器会对没有HTTPS的页面给出“不安全”的警告，地址栏总是有一个黄色感叹号，观感不好。

群晖对HTTPS的支持其实很完善。你只需要在“控制面板”->“证书”里新增一张Let's Encrypt证书，前提是你有一个域名，并完成了DDNS配置。证书申请成功后，在Web Station对应的站点上绑定这张证书，群晖会自动处理续期，不需要你每三个月手动操作一次。如果只在局域网里用，跳过这段完全没问题。

7.3 从导航站延伸：顺手做一个内网服务总入口

导航站做好以后，我的第一个扩展思路是把所有内网服务都收进去。除了群晖DSM和路由器后台，还有打印机管理页、智能家居网关、软路由控制台、NAS上各种套件的管理入口，全都可以在导航站里放一个卡片。这样我就不用记那么多IP和端口，只要打开导航站，点一下就进去了。

更进一步，你可以写一个探活脚本，定时用HTTP请求检测这些内网服务的端口是否连通，把结果渲染到导航页上。某个服务挂了，卡片上就会显示离线状态。这个功能其实很有用，因为内网服务太多以后，经常会出现某个套件悄悄停止却没人发现的情况。不过这一部分属于进阶玩法，等基础导航站稳定跑上一阵子再折腾也不迟。

7.4 我的使用习惯与最后建议

我现在把导航站同时设为电脑浏览器的主页和手机浏览器的书签，每天早上打开浏览器第一眼看到的就是整整齐齐的分类链接，几秒就能跳到想去的站点。相比以前在书签栏里找半天，效率提升非常明显。

有个很实在的建议：导航站里不要放任何私密链接，比如NAS的敏感目录、带密码的后台地址。静态站的所有文件对所有访问者都是公开的，只要对方知道地址就能看到页面里的全部内容。虽然局域网相对可信，但这个习惯最好一开始就养成，避免哪天不小心把内网端口暴露了却不自知。

再补充一个小习惯：我会定期把web/navsite整个目录打个包备份到另一个存储空间。文件不大，但里面存的是我筛选过一轮的常用链接，丢了重新整理很费时间。备份一次，后面就再也不用操心了。

这个导航站在我的群晖上已经安安稳稳跑了一两年，期间几乎没有需要我操心的时候。它不需要更新、不需要维护数据库、不需要担心后台被入侵，偶尔加两条链接就够了。对我这种“只想用一个顺手的工具，不想伺候一个复杂系统”的人来说，它就是最合适的方案。如果你也被浏览器书签折磨过，照着这篇文章搭一个，应该能满足你对自建导航站的大部分期待。