自制A-Nav导航站，GitHub Pages免费部署上线
分享我独立开发的个人导航项目 A-Nav，全程纯 HTML 手写，无任何前端框架，依托 GitHub Pages 免费托管，现在已经可以在线访问使用。
项目开源地址：https://github.com/GuyZeus/A-Nav，仓库仅使用 HTML 编写，轻量化无依赖，打开即用，适合当作浏览器专属首页。
为什么要自己写导航站？
日常上网一直使用商用导航主页，但 hao123、360导航这类平台广告弹窗繁多、页面臃肿，充斥大量无关推荐链接，每次打开都要被冗余内容干扰。
市面上开源导航模板大多基于 Vue、React 等框架，配置繁琐，对于只想简单收藏网址的需求来说过于沉重。于是决定从零手写一套极简导航页面，只保留自己常用的网站链接，干净无广告，完全自定义。
整个 A-Nav 仅使用原生 HTML 开发，没有引入 CSS、JS 外部依赖，仓库结构极简，仅包含首页 index.html 与图标资源文件夹，代码量少、加载速度极快，手机电脑都能自适应展示。
A-Nav 项目设计思路与功能
1. 极简干净的页面结构
摒弃繁杂分区、资讯模块，页面只保留分类网址卡片布局，按照开发工具、学习网站、社区、工具站点做分组，鼠标点击即可跳转对应链接，视觉清爽无多余元素。
2. 轻量化零依赖
不引入任何第三方库、CSS框架、JS脚本，单页面完成全部功能，仓库体积极小，GitHub Pages 部署秒加载，低带宽环境也能流畅打开。
3. 完全私有自定义
所有网址、分类名称、图标都可以直接修改 index.html 内代码，按需增删链接，只留存自己高频访问的站点，打造专属个人上网主页。
4. 开源可复用
项目完全开源，无版权限制，任何人 Fork 仓库后修改链接就能搭建属于自己的导航页，适合前端新手学习静态页面基础布局写法。
GitHub Pages 部署流程（项目仓库型站点）
和个人主页仓库 用户名.github.io 部署逻辑略有区别，项目类仓库部署步骤如下：
- 创建普通公开仓库：仓库名自定义为 A-Nav，无需遵循特殊命名规则，上传导航站全部源码文件，确保根目录存在 index.html。
- 进入仓库配置 Pages：打开仓库 Settings → Pages，部署分支选择 main，部署目录选择根目录 root。
- 等待自动构建发布：保存配置后 GitHub 自动构建，1分钟左右部署完成。
- 访问项目在线地址：访问地址格式为
用户名.github.io/仓库名，我的导航站地址为guyzeus.github.io/A-Nav。
开发与部署踩坑记录
- 项目站点路径问题：项目仓库部署后页面资源会带上二级路径，图标、图片本地正常线上失效，统一使用相对路径 ./ 引用静态资源即可修复。
- 仓库权限限制：私有仓库无法开启免费 Pages 服务，必须将仓库设置为 Public 公开才能正常部署。
- 缓存更新延迟：修改代码推送后页面不更新，强制 Ctrl+F5 清除浏览器缓存，或等待5分钟左右 GitHub 缓存刷新。
- 移动端布局错乱：初期未添加 viewport 适配，手机端页面缩放异常，头部补充移动端视口 meta 标签后完美适配。
后续优化计划
目前基础导航功能已经稳定可用，后续会持续迭代升级：
- 增加明暗主题切换功能，适配白天/夜间浏览；
- 加入简易搜索框，快速检索站内收藏网址；
- 优化响应式布局，完善平板、手机端卡片排版；
- 新增本地存储功能，支持自定义网址本地保存，不用 修改源码；
写在最后
这次手写 A-Nav 导航站，不仅解决了日常上网的实用需求，也巩固了原生 HTML 页面布局基础。依托 GitHub Pages 免费静态托管，不用服务器、不用域名成本，几分钟就能上线可用网站。
如果你厌烦了广告满天飞的商用导航，或是想练习基础前端页面开发，都可以 Fork 我的 A-Nav 仓库，修改成属于自己的极简导航主页，低成本打造专属上网工具✨。