💥【图文教程】无需服务器，搭建自己的导航站 - 文档共建 - LINUX DO
同步来源：树洞剪藏 源站剪藏 ID：597 原文地址：https://linux.do/t/topic/787507
💥【图文教程】无需服务器，搭建自己的导航站 - 文档共建 - LINUX DO
set 限制解除
跳到主要内容
子系统
Connect
Webmail
Lottery
元宇宙
导航站
Wiki站
分发站
其他
2048
T-Shirt
71
话题
我的帖子
我的消息
关于
近期活动
更多
类别
开发调优
资源荟萃
网盘资源
文档共建
前沿快讯
网络记忆
福利羊毛
搞七捻三
运营反馈
深海幽域
所有类别
标签
抽奖
公告
集中帖
精华神帖
快问快答
人工智能
原创
所有标签
频道
常规频道
直接消息
聊天
Default
真诚 、 友善 、 团结 、 专业 ，共建你我引以为荣之社区。 《常见问题解答》
LINUX DO 👉 新人，我有一些秘密想讲给你听 👈
'>
【图文教程】无需服务器，搭建自己的导航站
文档共建
教程
7月 15 日
1 / 164
7月 15 日
返回
23 分钟
热门回复
猫的于
mryu
指导顾问
12
21 天
示例站点: https://nav.maodeyu.fun
效果图:
局部截取_20250715_190334 1735×1036 109 KB
前置条件
Github 账号
Vercel 或 Cloudflare账号
域名(可有可无。没有只能用部署站自带的域名)
部署流程
1.fork工程
登录你的 Github 账户
访问并fork 猫猫导航工程 (如果可以，点个Star吧)
局部截取_20250715_132954 1651×1119 126 KB
2.创建github_token(可选，如需admin增删改查)
访问 Sign in to GitHub · GitHub
新建token输入参数，过期时间选不过期， 授权只选刚才fork的工程，只授权 Repository permissions 的Contents 的读写权限跟 metadata的读权限， token泄露也只会影响当前仓库。
局部截取_20250715_133237 874×1269 62 KB
局部截取_20250715_133636 1003×1108 78 KB
点击Generate Token 复制token 存起来后续需要用到。
3.部署到cf,Vercel流程也类似。
访问cf dash面板 https://dash.cloudflare.com/
选择Workers&Pages → 选择Pages标签 → Get Started
局部截取_20250715_134038 1728×1183 93.7 KB
关联你的github仓库,也是推荐只授权你需要的仓库
局部截取_20250715_134155 1094×1011 45.7 KB
选择工程点击Begin setup
框架选择Vue, Build command 输入“npm run build”; output dir 输入“dist”
局部截取_20250715_134338 1123×1128 29.3 KB
如需admin界面添加环境变量，不需要直接点击保存部署即可
环境变量示例如下图
VITE_ADMIN_PASSWORD 是你进入admin界面需要输入的密钥 VITE_GITHUB_OWNER 是你github 用户名 假如你 fork 仓库后你仓库的地址是 https: //gi thub.com/xxx/mao_nav VITE_GITHUB_OWNER 就输入 xxx VITE_GITHUB_REPO 就输入mao_nav
局部截取_20250715_134649 1098×967 30 KB
等待部署完成点击Visit即可访问
局部截取_20250715_135056 1445×701 32.5 KB
点击custom domains 输入你的二级域名，cname到提供的地址即可通过自己的域名实现访问
局部截取_20250715_135150 1401×634 28.6 KB
自定义站点分类。
1.部署了admin
访问站点/admin 输入环境变量配置的密码即可进行站点编辑
2.直接修改仓库
直接修改仓库 /src/mock/mock_data.js 文件
修改后需等cf 或 vercel 自动编译部署，成功后即可展示新的导航内容。
结尾
站点是根据个人喜好编写，喜欢的佬可以尝试部署玩一玩。
欢迎佬提意见，改进完善。
修复记录
2025-07-15 完善logo自动获取流程。
2025-07-16 修复admin 管理后台编辑相关问题，优化编辑逻辑。
2025-07-17 增加网站名称修改，站点logo修改
局部截取_20250717_105549 1203×1027 75.7 KB
2025-07-17 调整手机端排版。
warming:
手机浏览要是能够双排显示就更好了，这样子就不用一直往下划了
局部截取_20250717_124338 628×702 38.8 KB
2025-07-22 增加站点排序，优化icon获取。
2025-07-30 修复item展示问题，增加环境变量VITE_OPEN_LOCK，配置首页也需验证密码。
2025-08-11 增加夜间模式，增加默认搜索引擎设置功能。
补充说明
修改title
编辑/src/mock/mock_data.js文件的 title 值后续admin 会增加修改入口
修改logo
替换 src/asstes目录下的 logo.png文件
存储说明
修改完后需点击保存至github才会同步
如何从新fork保留自己的数据
复制一份mock_data.js 文件到本地 refork以后 从新编辑文件 将你自己的覆盖进去。
2 个回复
heart
+1
clap
150
编辑
【长期帖】来推荐你心目中的精华神帖吧
【兑换码发放】应该是本月最后一次，要加班了。
交个作业，个人导航站，站在佬友的肩膀上
【猫猫导航】chrome 收藏栏转换脚本
【猫猫公益】API使用说明。已上线GPT-5
其他 2 个
3.5k
浏览量
207
赞
17
链接
73
用户
52
8
6
5
5
阅读时间
11 分钟
热门回复
魔力鸽
Magicdove
7月 15 日
有的图标加载失败，是我梯子的问题么 （比如 Figma，币安以及阿里云的）
1 个回复
4
回复
猫的于
mryu
指导顾问
魔力鸽
7月 15 日
配置的不对，我默认都加载的 favion 有的不是这个，得自己去网站看下 改下。等后续我优化下。自动从html里提取
2 个回复
5
回复
故事结局
kakushigoto
7月 15 日
对我好像没啥用 都是收藏夹找 默认主页都设置空白页
1 个回复
4
回复
猫的于
mryu
指导顾问
故事结局
7月 15 日
我是感觉不同google账号下收藏夹不同步 号有点多
1 个回复
3
回复
naaaaaaaa
naa
文化宣导员
7月 15 日
好看的，感谢佬友分享！
2
回复
大帅哥
handsome
种子用户
7月 15 日
感谢大佬教程
2
回复
Metaterminator
活躍使用者
7月 15 日
感謝大佬，學習了
2
回复
南山
578382239
一元复始
7月 15 日
感谢大佬，有空了部署一个玩玩
2
回复
方块
Throttle
解决方案机构
7月 15 日
感谢分享
2
回复
儘未來.
xylonstar
7月 15 日
感谢分享
1
回复
carlxu
种子用户
7月 15 日
感谢大佬分享，得空部署一个玩玩
1
回复
Snoopy
edinik
7月 15 日
感谢佬分享，有空试试
1
回复
cunzhong
活跃用户
7月 15 日
screenshot_20250715_155512 1316×2832 205 KB
佬兄，这个我已经添加变量了，但是还是显示需要添加
请问是要删除整个项目后重新部署吗
1 个回复
2
回复
猫的于
mryu
指导顾问
cunzhong
7月 15 日
cf 添加完环境变量需要重新部署，在cf控制台点击部署，或者 随便改下readme 就会触发自动部署
1
回复
ayai
种子用户
7月 15 日
谢谢分享漂亮的导航站
2
回复
netcup
文化宣导员
7月 15 日
有没有导入本地的收藏家功能?
我自己写了一个重绘的程序,收集各个浏览器的数据,但是想换前端模式
但是我喜欢各个浏览器来回换,别觉得麻烦,因为要多开/小号/测试
image 572×596 95.9 KB
2 个回复
1
回复
猫的于
mryu
指导顾问
netcup
7月 15 日
这个用python脚本就行 把数据 让ai 参考 mock_data.js的内容 重写一份就行。
1
回复
xiaoshuo
文化宣导员
7月 15 日
感谢分享
4
回复
不二
boolen
Regular
7月 15 日
希望admin可以编辑头像icon
1 个回复
1
回复
论坛快捷回帖:
请选择
'>
StripeM-Inner '> ">