ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

搭建私人导航页:把常用内网入口放在一个页面

2026/9/25 21:00:16 拓冰建站 浏览量
搭建私人导航页:把常用内网入口放在一个页面 内网服务多了最容易忘的往往不是密码而是“这次应该打开哪个 IP、哪个端口”。把地址记在聊天记录里用时还要翻找。不如做一个简单的导航页常用入口排成几张卡片连接内网穿透工具后打开页面就能点进去。这次用 Ubuntu 保存一份 HTML借助 Python 自带的 HTTP 服务提供访问再从 Mac 打开。整个项目只有一个文件没有数据库也不用安装前端框架。下面记录的是 2026 年 9 月 22 日的实际操作。一、准备工作登录管理平台准备设备成员打开组网工具的管理平台进入后台管理。没有账号先注册已有账号直接登录。本次浏览器已有有效登录状态实际复用现有账号下图使用空白登录表单说明入口没有填写账号或密码。进入“设备管理 → 成员列表”为设备准备成员账号。主账号管理后台成员账号用于客户端入网Mac 和 Ubuntu 这类长期在线的不同设备应分别使用独立成员具体操作可参考工具自带的成员管理说明。本次已有可用成员直接复用不重复添加。二、确认两台设备已经组网首次使用时分别按 macOS 和 Linux 的说明安装客户端登录各自成员。两台设备在线后记下 Ubuntu 的组网 IP后面创建链接和启动网页都要用到它。本次环境如下照做时应替换成自己的实际地址设备用途组网 IPUbuntu 22.04保存并运行导航页192.168.188.5Mac浏览导航页、点击入口192.168.188.1在 Ubuntu 终端检查 Python、组网网卡和准备使用的端口python3--versionip-4-briefaddress show StarVPN ss-ltnsport :18090本次 Python 为 3.10.1218090 没有监听服务可以使用。若端口已占用换一个空闲端口并同步修改后文浏览器地址不要停止不明用途的进程。网卡显示UNKNOWN不应单独作为断网结论还要结合客户端状态和后面的实际访问判断。三、创建项目写入完整页面下面命令在 Ubuntu 的管理员终端执行本次使用 root普通用户可先执行sudo -i。新建独立目录只放本次网页避免把其他文件一起提供下载。将下面整段复制到终端。HTML是文件内容的结束标记最后一行也要一起复制。目录已经存在时先核对内容不要直接覆盖旧项目。mkdir/opt/starvpn-nav-demo-20260922cd/opt/starvpn-nav-demo-20260922catindex.htmlHTML !doctype html html langzh-CN meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title我的内网导航/title style body { max-width:820px; margin:8vh auto; padding:24px; font:18px/1.7 system-ui,sans-serif; color:#203047; background:#f2f5f8; } small { color:#446d94; } h1 { font-size:38px; margin:12px 0; } p, footer { color:#617186; } nav { display:grid; gap:16px; margin:32px 0; } a { display:block; padding:20px 24px; color:#203047; background:white; border:1px solid #dbe3ed; border-radius:12px; text-decoration:none; } a:hover, a:focus-visible { border-color:#3275b7; outline:2px solid #a5c9ed; } span { display:block; color:#617186; font-size:14px; } footer { font-size:14px; } /style main small常用入口 · 随手打开/small h1我的内网导航/h1 p把常用地址集中在一页连接组网后就能找到。/p nav aria-label常用服务 a hrefhttp://192.168.188.5:7725/Ubuntu 组网控制台 span内网入口 · 192.168.188.5:7725/span/a a hrefhttp://192.168.188.5:8080/文件服务 span内网入口 · 192.168.188.5:8080/span/a a hrefhttp://192.168.188.5:9000/监控面板 span内网入口 · 192.168.188.5:9000/span/a /nav footer内网入口需要组网在线官网入口需要互联网连接。/footer /main /html HTML这里有三张卡片第一张指向本次 Ubuntu 的组网控制台后两张是示例内网服务入口。要加入自己的内网服务复制一组a…/a修改href中的实际地址、名称和说明即可。导航页只是整理链接目标服务仍需单独运行。四、用一条命令启动网页仍在刚才的项目目录中执行python3-mhttp.server18090--bind192.168.188.518090是导航页端口--bind指定只监听本机的组网 IP。终端出现服务启动信息后保持窗口开启这是前台运行按CtrlC就会停止。图中主页请求返回 200favicon.ico的 404 只是没有配置网站图标不影响页面打开。Python 的这个模块适合本次临时演示工具文档不建议将它直接用于生产环境。本例没有附加网站鉴权绑定组网 IP 也不能代替目标应用自己的权限管理。五、在 Mac 打开再点一次内网入口保持 Mac 客户端在线在浏览器输入http://192.168.188.5:18090/。这里填写的是 Ubuntu 地址不是 Mac 的地址也不是localhost。需要快速检查时也可以在 Mac 终端执行curl--noproxy*--max-time10-sS-o/dev/null\-wHTTP %{http_code}\nhttp://192.168.188.5:18090/本次返回 HTTP 200Mac 收到的 HTML 与 Ubuntu 文件的 SHA-256 一致。请求源地址为 Mac 的组网 IP192.168.188.1路由接口为utun9确认了本次访问所用的组网路径。接着点击“Ubuntu 组网控制台”。浏览器实际跳转到http://192.168.188.5:7725/#/控制台显示“已连接”虚拟 IP 为192.168.188.5。这一步同时验证了导航链接和目标入口。如果主页能打开、某张卡片却打不开先核对那张卡片的地址和目标服务状态。导航页不会自动启动服务也不会绕过目标页面原有的登录要求。若整个导航页打不开先确认 Ubuntu 的前台进程还在运行再检查两端客户端和命令中的组网 IP。启动时报Cannot assign requested address先核对本机是否拥有该地址报Address already in use则检查端口占用。若涉及防火墙核对组网来源与目标端口的现有规则即可不要为了测试直接关闭整个防火墙。六、演示结束停止并清理回到运行服务的 Ubuntu 终端按CtrlC再检查端口ss-ltnsport :18090确认没有监听记录后本次删除了演示文件和空目录。以下命令仅针对这次新建的项目需要保留网页时不执行删除步骤。rm-- /opt/starvpn-nav-demo-20260922/index.htmlcd/rootrmdir/opt/starvpn-nav-demo-20260922test!-e/opt/starvpn-nav-demo-20260922echoPROJECT_REMOVED本次清理输出PROJECT_REMOVED没有留下运行中的导航项目。页面代码已完整保留在上文下次需要时重新创建文件、启动服务再把常用内网地址逐项加进去即可。