折腾了挺久，设计和功能也改了好几版，这套个人主站终于做到了我自己满意的状态，也已经稳定在线上使用了一段时间。现在把它作为一个相对完整的全栈项目开源出来，有需要可以直接自取。
可以做个人主站、博客、开源和个人展示。
官网文档：wwenj.github.io/zuSpaceX/
GitHub：github.com/wwenj/zuSpa...
线上预览：www.wwenj.com/
设计
- 整体视觉采用 「赛博科技像素 2D 风」（我自己起的名），以暗黑、霓虹、像素和科技感为核心
- 全站以暗色主题为主，搭配高亮元素色和彩色光效，既保留氛围感，也让页面层级和交互反馈更清晰。
- 内置了一个直接在页面上玩的坦克大战小游戏和积分榜，让网站除了展示内容，也多了一点可玩性和记忆点。
代码
- 博客这类网站功能多，业务简单，所以 ZuSpaceX 采用了更轻量、清晰的架构，代码易读易改，适合直接二开，也方便结合 AI 做二次调整的技术架构。
- 接入简单，部署成本低，前后端结构清晰，维护和扩展都比较直接。
- 创新内置 AI 分身能力，比传统博客更适合做个人表达、内容展示和品牌延展。
- 基于 React + NestJS 的现代全栈方案，工程化完整，适合长期维护。
原创
- 设计和代码均为原创，未借鉴任何现成主题模板。
- 页面中的图片、元素、Logo、Icon 等视觉素材均由 AI 生成。
- 这个项目一直是自用站点，后续也会持续迭代优化。
对比
和 WordPress 这类建站方案相比，ZuSpaceX 的优势是：
- 更有设计感：赛博像素风格更有辨识度，不是常规博客模板的通用样式。
- 更适合二开：前后端结构清晰，技术栈技术架构先进，没有复杂历史包袱。
- 更轻量纯净：不过度依赖插件生态，代码更容易读懂，也更容易改。
如果你想要一个有设计感、可完全掌控、又方便持续迭代的个人品牌站点，ZuSpaceX 可以直接作为起点。
欢迎 Star，项目会持续更新。
ZuSpaceX
赛博像素风个人主站 · 全栈开源
功能模块
| 模块 | 说明 |
|---|---|
| 公开站点 | 首页、个人简历、博客、评论、开源项目展示、留言板、个人中心 |
| 互动 | 留言、文章评论、坦克大战积分榜，Chat 聊天 |
| 权限 | Cookie + Session 登录态、普通用户 / 管理员角色 |
| 管理后台 | 文章、项目、留言、用户四类后台管理 |
| AI Agent | 内置对话页，基于大模型、作者设定、文章与项目内容流式问答 |
技术栈
| 模块 | 技术 |
|---|---|
| 前端 | React 19 · TypeScript · Vite · Tailwind CSS |
| 后端 | NestJS · TypeORM · MySQL · Swagger |
| AI | LangChain · LangGraph · OpenAI 兼容接口 |
| 部署 | Docker 容器化部署 |
项目结构
bash
zuSpaceX/
├── client/ # React + Vite 前端
│ └── src/
│ ├── pages/ # 公开站点页面
│ ├── admin/ # 管理后台页面
│ ├── components/ # 通用组件
│ ├── api/ # 接口封装
│ └── router/ # 路由配置
├── server/ # NestJS 服务端
│ └── src/
│ ├── modules/ # 业务模块（article / project / agent ...）
│ ├── entities/ # TypeORM 实体
│ └── common/ # 中间件、过滤器、日志
├── docs/ # VitePress 文档站
├── build.sh # 前后端联合构建
└── Dockerfile # Docker 容器化部署
.......本地启动
环境要求： Node.js ≥ 18 · pnpm ≥ 8 · MySQL 8.x
bash
# 服务端
cd server && pnpm install && npm run start:dev
# 前端（新终端）
cd client && pnpm install && pnpm run dev| 服务 | 地址 |
|---|---|
| 前端 | http://localhost:3000 |
| API | http://localhost:3001 |
| Swagger | http://localhost:3001/api-docs |
构建与部署
手动部署
bash
bash build.sh脚本依次构建前端、将产物并入服务端，最终产物在 server/dist。将 server/dist、server/views、server/public、server/package.json 上传至服务器后执行：
bash
npm run start:prodDocker 部署（推荐）
Dockerfile 内已包含前后端完整构建逻辑，推送代码到容器部署平台后会自动完成构建和部署，无需本地预先构建。
bash
docker build -t zuspace . && docker run -p 8080:8080 zuspace配置说明
数据库
运行前需手动建库建表，使用 /sql 下的建表语句，完成后在 server/src/config/mysql.config.ts 中配置数据库账号，详见文档。
AI Agent
作者分身功能底层依赖大模型，需在 server/src/modules/agent/llm.config.ts 中配置个人的 api-key，详见文档。
演示预览
首页
博客列表
博客详情
项目展示
留言板
个人中心
AI 分身聊天
后台管理
原创声明
原创文章，转载请注明作者和文章原链接，插图来源 AI 生成，关注公众号看更多文章哦！
内容创作 AI 自律声明
