用 Turborepo+pnpm 单仓构建含博客、项目展示与工作信息的个人网站

方案简介

这套方案是 enji.dev 个人网站的完整技术配方：以 Turborepo + pnpm 搭建的 monorepo 为工程骨架，在其中用 Next.js + TypeScript 构建站点主体，配合 Framer Motion 实现动画、Tailwind CSS 处理样式、MDX 撰写博客内容，并使用 MongoDB 存储数据。

它解决的正是「个人网站 + 博客 + 项目展示」一体化自托管的需求：仓库描述写道 "a monorepo for my personal website and projects, built with Turborepo + pnpm 📚"。适合希望拥有可定制个人主页、博客与作品集（portfolio）的开发者， Topics 中也包含 personal-blog、personal-website、portfolio、monorepo 等标签，印证了其定位。

亮点与能力

• 基于 Next.js + TypeScript 的个人网站
• 内置博客功能，使用 MDX 编写内容
• 项目展示（project showcase）板块
• 工作信息（work information）展示
• Framer Motion 动画效果
• Tailwind CSS 样式方案
• Turborepo + pnpm 管理的 monorepo 架构
• MongoDB 数据库连接（含 IP 地址哈希加盐）

实施步骤

1. Fork 并克隆仓库

git clone

2. 进入项目根目录

cd ./enji.dev

3. 复制环境变量模板

cp ./apps/enji.dev/env.example ./apps/enji.dev/env.local

4. 配置 env.local

模板内容为：

DATABASE_URL = your-database-connection-string
SALT_IP_ADDRESS = super-secret

DATABASE_URL 填数据库连接串；SALT_IP_ADDRESS 填任意密语，作为哈希用户 IP 的盐值。

5. 安装依赖并启动

pnpm install

pnpm dev

完成后项目即可顺利运行。

使用与配置要点

配置完成后在项目根目录执行 pnpm dev 即可启动开发环境。验证成功标志：README 原文称 "Now, your project should be up and running smoothly!"。

日常使用要点：

• 博客内容用 MDX 编写
• 数据库连接通过 env.local 中的 DATABASE_URL 指向 MongoDB
• SALT_IP_ADDRESS 用于对访客 IP 做加盐哈希，务必填写私密内容

注意事项与常见问题

• 环境变量模板位于 ./apps/enji.dev/env.example，需要复制为 env.local 后手动填写，缺少配置项目无法正常工作。
• 数据库推荐使用 MongoDB 免费版，需要在 MongoDB 控制台创建数据库并获取连接串填入。
• 项目为 monorepo 结构，网站应用位于 apps/enji.dev 目录下。

优缺点

• ✓ monorepo 便于网站与项目共用代码
• ✓ MDX 适合博客内容创作
• ✕ 需要自行配置 MongoDB 数据库
• ✕ 配置项较少文档较薄

出处

本方案挖掘自开源项目 enjidev/enji.dev，方案内容与实施命令均来自其 README 原文。