这是一个基于现代化前后端分离架构构建的个人博客系统。本项目旨在提供一个极简、高性能且易于维护的写作与展示平台。整个项目完全容器化，集成了自建图床服务，并使用了自动化 HTTPS反向代理解决方案。
- ⚡ 前端工程化体系: 基于 React 19 + Vite 搭建，结合 TypeScript 实现组件级类型约束与高复用设计；统一 ESLint 与 Prettier 规范，大幅提升代码一致性与维护效率。
- 🚀 性能全链路优化:
- 首屏提速: 基于路由懒加载与组件拆分降低初始包体积，并按页面维度进行核心指标 (如 LCP) 优化，使主页面加载迅捷。
- 打包优化: 基于 Vite (Rollup) 配置
manualChunks拆分第三方依赖与业务模块，优化缓存粒度并提升长期缓存命中率，显著降低重复加载成本。
- 🔄 数据缓冲与状态管理: 基于 React Suspense 与自定义缓存策略 (Hooks) 封装数据请求层，减少网络冗余请求。在多篇文章跳转的场景下，降低了冗余网络开销，切换极致流畅。
- 📝 高阶 Markdown 架构: 深度整合 Unified.js 生态构建 Markdown 渲染流水线。支持解析 GFM、自动生成标题锚点、Shiki 代码高亮与定制化语法扩展；配合 Framer Motion 的出场与滚动动效，提供沉浸式阅读体验。
- 🐳 基础设施基建: 全面采用 Docker / Docker Compose 容器化部署；配合
nginx-proxy与acme-companion实现自动 HTTPS 证书签发与流量分发；单独搭建 Chevereto 作为图床基建。
- 框架体系: React 19, TypeScript, React Router 7
- 工程化工具: Vite (集成 manualChunks), ESLint, Prettier
- 视觉体系: Tailwind CSS 4, Motion (Framer Motion)
- 数据缓冲机制: React Suspense + Context/Custom Hooks
- Markdown 渲染: Unified.js 生态 (remark-parse, rehype-react, Shiki 等)
- 框架: Python 3.12, Django 5, Django REST Framework
- 数据库: PostgreSQL 18
- WSGI Server: Gunicorn
- 反向代理: Nginx, jwilder/nginx-proxy
- SSL证书: nginxproxy/acme-companion
- 容器化: Docker, Docker Compose
- 独立图床: Chevereto + Redis + MariaDB
本项目采用了典型的微服务/多容器协同架构，由 Nginx-Proxy 作为统一的流量入口。
+-------------------+ HTTP/HTTPS +-------------------------------------------+
| 用户浏览器 / 客户端 |---------------------> | 云服务器 (VPS) |
+-------------------+ | +-----------------------------------------+ |
| | Docker Engine | |
| +-----------------------------------------+ |
| | |
| 监听宿主机 80 & 443 端口 |
| | |
| +--------------------V--------------------+ |
| | nginx-proxy (统一反向代理网关) | | <------->+--------------------+
| +--------------------|--------------------+ | | acme-companion |
| | | | (SSL 证书自动管理) |
| 读取 Host 请求头，进行虚拟主机路由分发 | +--------------------+
| | |
+-------------------------------------------/ \-----------------------------------+
| Host: liuhongwei.org (博客主站域名) | Host: img.liuhongwei.org (图床主域名)|
| | |
V V V
+-------------------------------------------------+ +-----------------------------------+
| 博客前端容器 (React + Vite) | | Chevereto 图床应用容器 |
| +---------------------------------------------+ | | +-------------------------------+ |
| | Nginx (托管静态文件，提供 /api 反代至后端) | | | | PHP-FPM / Apache | |
| +---------------------|-----------------------+ | | +---------------|---------------+ |
| | (透传 API 请求至后段) | | | |
| V | | V V
| +---------------------V-----------------------+ | | +---------------V---------------+ +---------------+
| | 博客后端容器 (Django) | | | | MariaDB (关系型数据库) | | Redis (缓存) |
| +---------------------|-----------------------+ | | +-------------------------------+ +---------------+
| | (操作与查询) | |
| V | |
| +---------------------V-----------------------+ | |
| | PostgreSQL 容器 (博客核心数据) | | |
| +---------------------------------------------+ | |
+-------------------------------------------------+ +-----------------------------------+
项目配置了完整的本地开发镜像编排文件 (docker-compose.dev.yml)。
git clone <repository_url>
cd Blog
# 配置环境变量 (请参考 .env.example)
cp .env.example .env使用 Docker Compose 一键启动前后端以及数据库。
# 启动所有服务 (前端：Vite开发服务器 / 后端：Django runserver / DB：PostgreSQL)
docker compose -f docker-compose.dev.yml up --build此时，前端将运行在并映射出对应端口（如 http://localhost:5173），后端 API 及 Admin 面板运行在 http://localhost:8000。
注：如果需要在本地安装依赖进行 IDE 提示支持，可在宿主机分别进入 frontend 和 backend 目录运行 npm install 与 pip install -r requirements.txt。
生产环境部署侧重于安全性、隔离性与自动化：
- 网络隔离: 所有的 Docker 服务（应用后端、数据库等）都配置在内部对应的
bridge网络中，仅将必需的端口通过nginx-proxy暴露。 - 环境配置: 必须正确配置根目录以及图床项目中的
.env，包含如DJANGO_SECRET_KEY、生产数据库密码、域名绑定等敏感配置。 - 构建发布:
# 使用生产级别的 Dockerfile (Frontend 的多阶段构建 + Backend 的 Gunicorn) docker compose up -d --build
(详情请参考项目中源码内的部署注记)
作为全栈独立负责的闭环项目，它不仅体现了我的多端协作能力，更帮助我深化了前端性能优化与工程化落地的能力：
- 从“跑通”到“高性能”的跃升: 围绕 Web Vitals 指标，从路由级包拆分、依赖项
manualChunks控制，到首图渲染优先级。确保在 3G/慢网环境下，主页 LCP 依然能维持在极速范围 (稳定在 2.5s 以内)。 - 渲染与交互深度定制: 攻克了 React 环境下定制化 Markdown 抽象语法树 (AST) 的挑战，基于 Unified.js 生态链实现了代码块高亮排版、内容图片灯箱拦截分析。
- 全局状态与冗余开销削减: 依托于高可复用的 TypeScript 强类型泛型 Hooks (如
usePosts,usePost)，配合自定义内存级请求池与 React Suspense，实现了极其流畅的多级跳开机制与最小化的重复网络消耗。 - 全自动的基建赋能: 深入运用了 Docker 多阶段构建与底层跨容器网络通信 (Bridge Networks)，搭配自动化证书和独立图床处理机制，独立解决了繁琐的跨域(CORS)与 Nginx 转发透传等服务端痛点。