从 0 到 1 搭建 Alpha-X Lab：用 Next.js、Supabase 和 Vercel 做一个可持续更新的个人网站

这篇文章记录 Alpha-X Lab 个人网站从 0 到 1 的搭建过程。它不是一个静态名片页，而是一个围绕“商业地产 × AI × 量化投资”持续沉淀项目、文章、数据看板和后台内容管理的个人智能实验室。

为什么要做这个网站

我做 Alpha-X Lab 的初衷，不是简单放一份个人简介，而是把几个长期积累的方向放进同一个系统里：

商业地产项目增长、营销策划、活动运营和经营复盘；
AI 工作流、知识库、自动化工具和内容系统；
量化研究、信号记录、策略标签和风险分层。

传统简历很难表达这种复合结构。个人网站更像一个公开的能力地图：访客可以看到我关注什么、做过什么、正在搭建什么，也能看到这些项目背后的方法论。

技术选型

这个网站使用的核心技术栈是：

Next.js 16 App Router：负责页面路由、服务端渲染和整体应用结构；
React 19 + TypeScript：保证组件开发体验和类型约束；
Tailwind CSS 4：快速构建统一的视觉系统；
Supabase：提供 Postgres 数据库、Auth 登录能力，并预留 Storage；
Vercel：负责生产环境部署、域名和持续发布。

选择这套组合的原因很直接：个人网站一开始要轻，但不能只能停留在静态展示。后续文章、项目、量化信号、媒体素材和后台管理都会继续生长，所以需要一个低运维、可扩展、上线快的架构。

站点结构

Alpha-X Lab 目前不是单页站，而是按内容长期维护的方式来组织：

/：首页，包含 Hero、个人定位、核心能力、精选项目、最新文章和联系方式；
/about：关于我，解释商业地产、AI/量化和效率工具这几条主线；
/projects：项目作品列表；
/projects/[slug]：项目详情页；
/blog：文章列表；
/blog/[slug]：文章详情页；
/dashboard：AI 量化信号看板，目前是数据结构和展示框架；
/admin：后台管理，用于维护文章和项目内容。

内容主线也比较清晰：商业地产案例库、AI 量化信号工作台、个人 AI 效率工具箱。这些不是为了凑栏目，而是对应真实工作流：业务经验沉淀、研究信号记录、个人效率系统化。

Supabase 数据与后台

Supabase 在这个项目里承担两层角色：公开内容数据源和后台管理基础设施。

数据库目前设计了几张核心表：

profiles：个人资料；
posts：文章；
projects：项目；
tags：标签；
post_tags：文章和标签的关联；
stock_signals：量化观察信号。

这里比较关键的设计是“公开读、后台写”。公开页面读取已发布文章、项目和信号数据；后台写入则通过 /api/admin/content 处理。后台登录使用 Supabase Auth，服务端再校验 ADMIN_EMAILS 白名单，真正写数据库时使用 server-side service role key。

环境变量集中放在 .env / .env.local：

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
ADMIN_EMAILS=

SUPABASE_SERVICE_ROLE_KEY 只应该出现在服务端环境，不能暴露给浏览器。这一点对后台安全很重要。

另一个实用设计是：即使还没有配置 Supabase，网站也可以使用本地静态兜底数据运行。这样开发初期可以先把页面、视觉和内容结构跑通，再接数据库，不会被后端配置卡住。

Vercel 部署流程

部署链路相对简单：

将代码推送到 GitHub；
在 Vercel 导入仓库；
Framework Preset 选择 Next.js；
在 Vercel 环境变量中配置 Supabase 相关变量；
在 Supabase 执行 migration 和 seed；
执行生产部署。

正式发布前，我会固定跑这几条命令：

pnpm lint
pnpm typecheck
pnpm build

确认没有 lint、类型和构建问题之后，再推送并部署到 Vercel。上线后再检查首页和后台入口是否正常返回。

最终，Alpha-X Lab 可以通过独立域名访问，Vercel 负责构建和托管，Supabase 负责数据与后台账号体系。

踩坑与经验

这次搭建过程中，有几个经验比较值得记录。

第一，Next.js 16 和旧版本不完全一样。动态路由、generateMetadata、App Router 的一些类型写法都需要按当前版本处理，不能完全照搬旧项目经验。

第二，不要一开始就把所有内容都做成后台配置。个人网站的第一目标是跑通完整链路。先用静态兜底内容把站点结构、视觉和内容方向确定下来，再把文章、项目、信号逐步迁移到 Supabase，会更稳。

第三，Supabase 的 RLS 要从第一天就打开。哪怕是个人项目，也要区分公开读取和后台写入。公开页面需要的是可读数据，后台需要的是认证、白名单和服务端写入能力。

第四，Vercel 环境变量要按生产环境认真配置。尤其是 service role key，只能放在服务端环境里。Preview 环境是否配置可以按需求决定，不必一开始把所有环境都复杂化。

第五，个人网站不要只做成“展示页”。如果网站后续要长期维护，就应该从一开始考虑内容模型、后台入口、数据表和发布流程。否则首页做得再漂亮，也很快会变成一个难以更新的静态页面。

小结

Alpha-X Lab 的 0 到 1，不是单纯搭一个个人主页，而是搭了一个可以持续扩展的个人系统：前台展示个人能力和项目，后台维护文章与项目，Supabase 承接数据和登录，Vercel 负责稳定上线。

对我来说，个人网站最重要的价值不是“上线那一刻”，而是它能不能持续记录真实工作、真实项目和真实思考。Alpha-X Lab 接下来会继续围绕商业地产、AI 工作流和量化研究迭代，逐步从个人展示页，变成一个可复用、可检索、可复盘的长期实验室。

process

从 0 到 1 搭建做一个可持续更新的个人网站（一）