Duckfolio 是一个简洁、现代、有趣的个人主页模板。
本项目旨在为开发者、设计师或创作者提供一个清爽、易于维护的在线名片,快速展示你的个人信息、社交链接与博客等内容。
同时也展示了如何使用现代 Web 技术(Next.js、TailwindCSS、Shadcn UI 等)构建轻量级的静态网站。
- 🚀 使用 Next.js 15 + Turbopack,极速开发体验
- 🎨 采用 Tailwind CSS 4 实现原子化、响应式布局
- 🌗 支持 深色/浅色主题自动切换
- 💫 利用 Framer Motion 增添自然平滑的过渡动画
- 🧩 使用 Shadcn UI 构建现代交互组件
- 🧠 通过 Zustand 管理全局状态(如主题)
- 📱 完全响应式,适配移动端和大屏设备
- 🧼 结构清晰,易于维护和定制
| 技术 | 用途 |
|---|---|
| Next.js | 框架 |
| Turbopack | 构建工具 |
| Tailwind CSS | 样式框架 |
| Shadcn UI | 无障碍组件库 |
| Framer Motion | 动画库 |
| Zustand | 状态管理 |
| next-themes | 主题切换 |
| Lucide Icons | 图标 |
git clone https://github.com/Yorlg/Duckfolio.git
cd duckfolio
# 安装依赖
pnpm install
# 项目打包
pnpm build
# 启动服务器
pnpm dev本地访问:
- 站点首页:
http://localhost:3000 - 管理后台:
http://localhost:3000/admin
真实密钥不要提交到仓库,也不要放到 NEXT_PUBLIC_* 变量里。生产环境请在部署平台的 Environment Variables / Secrets 中配置:
GITHUB_TOKEN=your_github_token
GITHUB_REPO=owner/repo
GITHUB_BRANCH=deploy
ADMIN_PASSWORD=your_admin_password可选 AI 配置:
AI_GATEWAY_API_KEY=your_ai_api_key
AI_BASE_URL=https://api.openai.com/v1
AI_MODEL=gpt-4o-mini说明:
GITHUB_BRANCH未配置时默认使用deploy。GITHUB_TOKEN建议使用 Fine-grained token,只给目标仓库Contents: Read and write权限。- 没有 GitHub 写入配置时,后台不会在本地
main工作区创建或删除posts目录。 - 本地开发可以复制
.env.example为.env.local,.env*文件已被忽略,只有.env.example会提交。
点击 /admin 的发布或更新后,服务端接口会把文章写入:
posts/{slug}.md
文章文件会提交到 GITHUB_REPO 的 GITHUB_BRANCH。建议你自己使用 deploy 分支存放文章,这样别人 fork 或使用 main 分支时不会同步你的个人文章。
当前支持 Vercel 和 Cloudflare Workers。详细说明见:
关键要求:
- 部署平台必须支持 Next.js 服务端 API。
- 生产分支应与
GITHUB_BRANCH保持一致,例如都使用deploy。 Cloudflare 不能使用纯静态导出,需要使用 Workers / OpenNext 方式部署。
pnpm dev
pnpm build
pnpm start
