a bd.me

我的个人网站

我的个人作品集网站设计得简单、干净，同时包括带有浏览次数的 MDX 博客文章、深色模式切换、装备列表、关于页面等功能。

技术堆栈

后端：

• Next.js / TypeScript
• MDX / Contentlayer（博客文章）
• PlanetScale（数据库）
• 棱镜 (ORM)

前端：

• Tailwind CSS（样式）
• Radix Primitives（无头 UI 组件）
• Radix UI 颜色（颜色系统）
• 成帧器运动（动画）

入门

确保您的计算机上安装了 Node.js v18.17.0+。

1. 安装依赖项： npm install
2. 环境变量：将.env.example复制到新的.env.local
3. 数据库设置：参见数据库设置
4. Prisma 设置： npm install @prisma/client （如果还没有），然后运行npx prisma generate 。
5. 开始开发： npm run dev ，这将自动创建 .contentlayer 文件并启动 Next.js 开发服务器。

数据库设置

• 注册 PlanetScale 帐户
• 在 PlanetScale 中创建新数据库
• 使用 PlanetScale 提供的连接字符串更新项目的.env.local文件中的 DATABASE_URL 环境变量

部署

该项目可以快速部署到Vercel。只需将您的 Vercel 帐户连接到 GitHub 存储库，Vercel 将在每次新推送到主分支时自动构建和部署您的应用程序。

将项目 .env 变量添加到 Vercel 项目设置中。