TimeAmber
【图文教程】无需服务器，搭建自己的导航站![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect fill-opacity="0"/></svg>){kind=small}
![earth_asia](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72"><rect fill-opacity="0"/></svg>){kind=small}
示例站点:https://nav.maodeyu.fun
效果图:
前置条件
- Github 账号
- Vercel 或 Cloudflare账号
- 域名(可有可无。没有只能用部署站自带的域名)
部署流程
1.fork工程
2.创建github_token(可选，如需admin增删改查)
- 访问Sign in to GitHub · GitHub
- 新建token输入参数，过期时间选不过期，授权只选刚才fork的工程，只授权 Repository permissions 的Contents 的读写权限跟 metadata的读权限， token泄露也只会影响当前仓库。
- 点击Generate Token 复制token 存起来后续需要用到。
3.部署到cf,Vercel流程也类似。
-
访问cf dash面板 https://dash.cloudflare.com/
-
选择Workers&Pages → 选择Pages标签 → Get Started
-
关联你的github仓库,也是推荐只授权你需要的仓库
-
选择工程点击Begin setup
-
框架选择Vue, Build command 输入“npm run build”; output dir 输入“dist”
- 如需admin界面添加环境变量，不需要直接点击保存部署即可
- 环境变量示例如下图
VITE_ADMIN_PASSWORD 是你进入admin界面需要输入的密钥
VITE_GITHUB_OWNER 是你github 用户名
假如你fork仓库后你仓库的地址是 https://github.com/xxx/mao_nav
VITE_GITHUB_OWNER 就输入 xxx VITE_GITHUB_REPO 就输入mao_nav
- 等待部署完成点击Visit即可访问
- 点击custom domains 输入你的二级域名，cname到提供的地址即可通过自己的域名实现访问
自定义站点分类。
1.部署了admin
访问站点/admin 输入环境变量配置的密码即可进行站点编辑
2.直接修改仓库
直接修改仓库 /src/mock/mock_data.js 文件
修改后需等cf 或 vercel 自动编译部署，成功后即可展示新的导航内容。
结尾
站点是根据个人喜好编写，喜欢的佬可以尝试部署玩一玩。
欢迎佬提意见，改进完善。
修复记录
- 2025-07-15 完善logo自动获取流程。
- 2025-07-16 修复admin 管理后台编辑相关问题，优化编辑逻辑。
- 2025-07-17 增加网站名称修改，站点logo修改
- 2025-07-17 调整手机端排版。
- 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以后 从新编辑文件 将你自己的覆盖进去。
（比如 Figma，币安以及阿里云的）
