klausjin.com

个人博客项目 | 学习技术、记录成长
💡 如果你喜欢这个项目，欢迎点个 Star 🌟
随时可能会有破坏性更新，不建议用于生产环境❗️
欢迎交流与学习，期待你的反馈与建议 🙌

---

🚀 技术栈

• 项目基于 Next.js 15 + React 19 + TypeScript + Tailwind CSS v4 + HeroUI 构建。
• 项目使用的是 Tailwind CSS v4，不兼容低版本浏览器，后续有空再换到 v3 版本

---

✨ 项目特性

• 🚀 服务端渲染（SSR）：基于 Next.js 15，支持现代前后端一体开发
• 📦 类型安全开发：使用 TypeScript 编写，提升开发效率与安全性
• 🧩 组件化设计：结合 HeroUI 与 Tailwind CSS v4 编写可复用组件
• 📁 数据库支持：集成 Prisma，简化数据库 CRUD 操作
• 🎨 Markdown 编辑器：使用 Bytemd 并自定义插件优化预览体验
• 🌗 主题切换：使用 next-theme 支持明暗模式
• 🔐 权限登录：集成 NextAuth v5，支持 GitHub 登录管理后台
• 📷 图像处理：
  • 上传后自动压缩为 webp（使用 sharp）
  • 上传至阿里云 OSS，提升加载速度
• 📱 响应式设计：适配多种设备与屏幕尺寸
• 🛠️ 后台管理功能：支持标签、笔记管理等核心功能
• 🔎 全局搜索功能：
  • 支持 Command/Ctrl + K 和 Esc 快捷键快速唤起和关闭搜索框
  • 基于 Algolia 提供即时搜索结果，提升内容检索体验
  • 支持搜索关键字 高亮显示，提升用户的使用体验

---

📦 快速部署

（由于本人的服务器性能拉，选择直接在本地打包构建好后再上传到服务器运行）

1. 克隆项目

git clone https://github.com/KlausJins/klausjin.git
cd klausjin

2. 安装依赖

# 进入网站目录
cd web/klausjin-site
# 安装依赖
pnpm install

3. 配置环境变量

复制 .env.example 文件并重命名为 .env.local，根据实际需求填写：

cp .env.example .env.local

此外，你还需要配置：

• 数据库连接（例如 PostgreSQL）
• GitHub OAuth（用于登录）
• 阿里云 OSS 相关参数
• NextAuth secret 和 URL
• 修改 nginx.conf 和 nginx.conf.bak 中的域名为你的域名

4. 修改 docker 文件

复制 docker-compose.yml.example 文件并重命名为 docker-compose.yml：

cp docker-compose.yml.example docker-compose.yml

修改 docker-compose.yml 文件中 postgres 容器的数据库信息

5. 构建容器

# /klausjin/web/klausjin-site
# 构建镜像
docker build -t your_image_name .
# 把镜像保存到本地目录
docker save your_image_name > your_image_name.tar

5. 上传到服务器后运行容器

# /klausjin/web/klausjin-site
docker load < your_image_name.tar

# /klausjin
docker compose up -d
# 重启 certbot 容器服务
docker compose restart certbot
# 启动容器后修改 nginx 文件
cd nginx
mv site.conf site.conf.default
mv site.conf.bak site.conf
# 重启 nginx 容器服务
docker compose restart nginx

---

📬 反馈与建议

如有问题或建议，欢迎通过以下方式联系我：

• 提交 Issue

---

🙏 致谢

本项目在开发过程中参考了以下优秀项目的设计与实现（排名不分先后）：

• HeroUI

• 付小晨

• 薇尔薇

• 小植同学

• 彬红茶日记

• LobeHub

---

📄 License

本项目使用 MIT License 开源。欢迎自由使用与贡献。