从零到上线！我做了一个赛博朋克风的个人网址导航站（开源 + Netlify 部署指南）-北京尧图网络

摘要本文分享了一个使用 React Tailwind 构建赛博未来主义风格个人网址导航站的全过程。从开发者日常「收藏夹太乱」的痛点出发详细介绍了 62 个精选网站的 8 大分类、3 套赛博主题皮肤、玻璃拟态卡片设计、全响应式布局等核心亮点并深入解析了技术选型React 18 TypeScript 5 Vite 6 Zustand与 3 个容易踩的部署坑。文章还提供了 Netlify 拖拽部署和 GitHub 自动部署两种零命令行上线方案以及如何自定义站点、主题配色和 Logo 的实操指南。最终生产构建仅 231 KB全球首屏加载小于 500 ms。前言作为一名开发者每天要开几十个网站GitHub、Stack Overflow、ChatGPT、Figma、B 站、掘金…… 浏览器收藏夹早就爆炸了每次找网站都要翻半天。痛点收藏夹分类乱、不好看、无法快速搜索想给朋友分享我常逛的优质站点一个个发链接太麻烦网上的导航站要么广告漫天飞要么审美不忍直视解决方案我花了几个周末用 React Tailwind 做了一个赛博未来主义风格的个人网址导航站 —— NavigatorHub · 你的星际导航中心。✨ 在线体验地址我自己部署的https://glittering-1-1adf01.netlify.app/先看成品图片建议大家先打开上面的地址自己玩一下有真实动效和三套主题切换核心亮点1️⃣ 手工收录 62 个精选优质网站8 大分类拒绝凑数每一个我自己都经常用分类站点数代表网站搜索4Google / Bing / 百度 / DuckDuckGo 开发10GitHub / Stack Overflow / MDN / npm / CodePen / Vercel / DevDocs … AI 生产力10ChatGPT / Claude / Gemini / Midjourney / Perplexity / Copilot / 通义千问 / 文心一言 … 设计素材8Figma / Dribbble / Unsplash / IconFont / Tailwind UI / Framer … 社交资讯8X / LinkedIn / 微博 / 知乎 / 豆瓣 / Reddit / B 站 … 视频音乐7YouTube / Netflix / Disney / 爱奇艺 / 腾讯视频 / 优酷 / Spotify 学习提升8B 站学习区 / Coursera / 慕课网 / 极客时间 / 掘金 / CSDN / LeetCode / 可汗学院效率办公8Notion / 飞书 / 钉钉 / 石墨文档 / 腾讯文档 / 语雀 / Todoist / Trello2️⃣ 全网搜索区4 引擎一键切换内置 4 个搜索引擎Google / Bing / 百度 / DuckDuckGo5 个热门搜索快捷入口React 18 新特性 / TypeScript 高级类型 / Tailwind 动画 / AI 工作流 / Vite 构建优化快捷键按 / 键或 ⌘K / CtrlK 立即聚焦搜索框3️⃣ 3 套赛博主题皮肤localStorage 持久化点击右上角三个小圆点即切换赛博紫默认—— 经典赛博朋克配色极光绿 —— 清新黑客风格深海蓝 —— 沉稳护眼设置会保存在 localStorage下次打开自动恢复你喜欢的主题 ✨4️⃣ 玻璃拟态卡片赛博视觉细节毛玻璃质感卡片backdrop-filter: blur() 多层背景光每张卡片带左侧色条装饰网站分类一目了然悬停时有霓虹发光扫描光掠过的动效多层径向渐变光晕背景噪点纹理叠加纯正赛博味智能问候墙根据你打开的时间显示「早上好 / 下午好 / 晚上好 / 夜深了」附带实时秒级时钟5️⃣ 全响应式手机/平板/电脑自适应手机 2 列 → 平板 3 列 → 笔记本 4-5 列 → ️ 桌面 6 列怎么拉窗口都不会乱移动端体验和桌面端一致交互细节左键卡片新标签打开右键卡片复制链接发给朋友超方便️ 技术栈与实现思路技术选型模块选择理由前端框架React 18 TypeScript 5类型安全强大生态构建工具Vite 6秒级启动构建速度比 Webpack 快 100 倍样式方案Tailwind CSS 3 CSS Variables3 主题不用写 CSS 文件开发速度飞快主题切换只换属性不重渲染状态管理Zustand1KB 超轻量替代 Redux主题/引擎/分类 localStorage 持久化一行搞定图标库Lucide React1000 像素级精致图标Tree-shaking 只打包你用的路由React Router v6SPA 独立 NotFound 页面找不到路由时显示「星际坐标丢失返回母港」部署平台Netlify纯静态站点免费托管全球 CDN 加速Drag Drop 即拖即上线架构图关键实现细节3 个容易踩的坑坑 1Netlify 部署后刷新路由 404问题React SPA 路由比如 /category/ai 在 Netlify 直接访问会 404。解法创建 public/_redirects 文件写入一行/* /index.html 200然后在 netlify.toml 中再冗余一层[[redirects]] from /* to /index.html status 200坑 2HMR 内网穿透路游侠/ngrok外网白屏问题Vite 开发模式的热更新 WebSocket 默认连回 localhost内网穿透到外网后远程浏览器尝试连 ws://localhost:5173 直接挂。解法在 vite.config.ts 里显式指定公网域名export default defineConfig({ server: { host: true, // 监听所有地址 hmr: { host: your-public-domain.ngrok.io, // 或内网穿透域名 port: 443, }, }, })坑 3卡片分类计数永远和数据一致反模式在 Tab 上硬编码搜索 (4)、开发 (10)以后加网站忘了改 Tab 数对不上。解法数据驱动从 sites 数组实时 reduce 算出分类数量徽章const categoryCounts sites.reduce((acc, site) { acc[site.category] (acc[site.category] || 0) 1; return acc; }, {});以后往 sites 数组加/删网站分类徽标自动更新永远不会错。部署教程30 秒上线你的专属导航有两种方式选一个就行都零命令行。方式一Netlify 拖拽部署最快 · 推荐适合没有 GitHub 也能用Step 1 → 本地准备部署包npm run build执行完会在项目根下生成 dist/ 文件夹打包好的静态文件。Step 2 → 拖一下完事打开 Netlify Drop 上传区 https://app.netlify.com/drop用鼠标按住整个 dist 文件夹拖到网页虚线框里 → 松手等 20 秒自动给你分配域名https://xxx-xxx-123456.netlify.app可选后台 Site Configuration → Change site name 改成你喜欢的名字比如 navigator-hub.netlify.app完成把这个域名发给朋友就能直接访问你的电脑关了别人也能用 ✅方式二GitHub 仓库自动部署更推荐以后改代码自动上线把整个项目推到你的 GitHub打开 https://app.netlify.com/ → Add new site → Import an existing project → 选刚才的仓库Framework Preset 选 Vite会自动识别 Build 命令和 Publish 目录点 Deploy1 分钟内上线以后更新改代码 → git push → Netlify 自动 npm run build → 全球同步更新零操作。性能数据生产构建报告指标数值说明生产构建总模块1,654 个全部打包合并输出文件数3 个核心文件index.html CSS 1 个 JS 1 个HTML0.59 KB (gzip)首屏 1ms 返回CSS5.91 KB (gzip)Tailwind 按需打包只含用到的类JS Bundle224.46 KB (gzip)原始 1,068 KBgzip 后缩小 80%真实传输总计≈ 231 KB比一张普通照片还小全球首屏CDN 500 msNetlify 全球边缘节点就近返回Console生产0 error / 0 warning已通过 3 轮自动化验收️ 如何自定义成你自己的导航99% 的修改你都只需要打开 2 个文件添加你自己的网站打开 src/config/sites.ts在对应分类里加一条就行{ name: CSDN, url: https://www.csdn.net/, category: 学习提升, icon: BookOpen, description: 中文开发者社区, }保存 → npm run dev 浏览器刷新立刻看到新卡片改主题配色打开 src/config/themes.ts每个主题是一组 CSS 变量export const cyberPurple { --primary: #8a2be2, --secondary: #00ffff, // ... }; 改自己的 Logo / 站点名打开 index.html 改 titleLogo 文件替换 public/favicon.svg。总结从最初「收藏夹太乱」的个人痛点出发到数据驱动架构三套主题全响应式全球 CDN 部署上线我把这个项目的每一个设计决策和容易踩的坑都写在了这篇文章里。希望能帮你省下重复造轮子的时间直接拥有一个又好看又好用的个人网址导航站。立刻体验我部署的版本https://glittering-1-1adf01.netlify.app/如果你觉得文章有用别忘了点赞收藏关注有任何问题评论区见

从零到上线！我做了一个赛博朋克风的个人网址导航站（开源 + Netlify 部署指南）

相关推荐

MOS管体二极管详解：5种应用场景与3个选型避坑要点

9大网盘直链下载终极解决方案：告别客户端束缚，重获下载自由

Go 开发 Rockchip NPU：go-rknnlite（RKNN Toolkit2，支持 RK3588、RK3576

更多资讯

ZLM WebRTC播放配置避坑与QoS调优实战

DeepSeekMoE：混合专家模型的专业化突破与实践

BIP39 助记词生成原理：从熵、校验和到 2048 词表索引映射

AI智能体开发：系统化学习路线与核心技术栈解析

SketchUp参数化坯子插件库：建筑构件的工程化建模中枢

从词法分析到三地址码：小型编译器的链路与避坑

今日更新

学生选课系统DFD图绘制指南：边界划分与分层校验实战

JIRA敏捷落地：Scrum角色权限、Sprint与燃尽图避坑指南

SEMI S8人机工程验收实战：从条款拆解到现场实测的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？