个人主页项目开发经验总结：从架构设计到容器化部署

引言

个人主页项目是一个基于静态站点生成（SSG）技术的个人展示网站，采用内容-模板-生成分离的架构设计，Docker容器化部署。

核心技术架构

个人主页项目架构示意图

从零到一：我的个人主页开发全记录

缘起：为什么要自己造轮子？

qq里的群友们总问我："为什么不用现成的 Hexo 或 Hugo？它们更成熟，社区更大。"说实话，我也犹豫过。但作为一名初学开发者，我相信——最好的学习方式是动手实践。

这个项目的初衷很简单：我想拥有一个完全由自己掌控的个人主页，从底层架构到每一行代码，都能体现我的技术理解和设计思考。我不想只是配置主题、修改配置文件，而是想亲手搭建起整个技术栈。

架构设计的思考：内容与表现分离

数据的自由：JSON + Markdown

在设计之初，我就在思考：怎样才能让内容更新变得简单？答案就是——解耦。

{
  "skills": {
    "backend": ["Python", "Go", "Node.js"],
    "frontend": ["Vue", "React", "Tailwind CSS"]
  }
}

有趣的是，这个设计源于一次痛苦的经历。以前我用 WordPress，每次更新简历都要登录后台、修改HTML，过程繁琐且容易出错。现在，我只需要编辑一个 JSON 文件，一切都自动同步。

模板的艺术：Jinja2 的魅力

选择 Jinja2 而不是更现代的模板引擎，是因为它的简洁和强大。我用宏（Macro）机制实现了组件的复用：

{# 这是我的项目卡片组件 #}
{% macro project_card(project) %}
<div class="project-card">
  <h3>{{ project.title }}</h3>
  <p>{{ project.description }}</p>
</div>
{% endmacro %}

这样设计的好处是，当我需要调整卡片样式时，只需修改一个地方。

技术探索：踩过的坑和收获

Docker 多阶段构建：一次令人兴奋的优化

记得第一次构建镜像时，我发现大小超过 1GB

问题分析： - 构建依赖（Python环境）和运行依赖（Nginx）混在一起 - 每次修改内容都要重新安装所有依赖

解决方案：多阶段构建

# 构建阶段
FROM python:3.9 as builder
RUN pip install jinja2 markdown
COPY . .
RUN python gen.py

# 运行阶段  
FROM nginx:alpine
COPY --from=builder /app/output /usr/share/nginx/html

这个简单的改变让镜像大小减少了 80%，构建时间也从几分钟缩短到几十秒。更重要的是，它让我深刻理解了关注点分离的重要性。

Nginx 配置的学问

最初我直接用默认配置部署，直到有一天查看访问日志，发现加载速度不尽人意。

经过一番研究，我添加了这些优化： - Gzip 压缩：减少传输体积 - 缓存策略：对静态资源设置长期缓存 - HTTP/2：提升并发性能

# 我的 Nginx 配置片段
gzip on;
gzip_types text/html text/css application/javascript;

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

这些优化让 Lighthouse 评分从 70 分提升到 95 分以上，页面加载时间减少了 60%。

开发过程中的小故事

那个深夜的 Bug

项目临近完成时，我遇到了一个奇怪的 bug：在本地一切正常，但部署到服务器后，部分图片无法加载。

凌晨两点，我还在调试台前。最后发现是相对路径和绝对路径的问题。在本地开发时，我习惯用相对路径，但 Nginx 对某些路径的解析方式不同。

解决方案很简单：

# 在模板中统一使用绝对路径
<img src="{{ url_for('static', filename='img/avatar.jpg') }}">

但找到这个问题的过程却让我明白：环境差异是部署中最容易被忽视的问题。

响应式设计的挑战

我希望我的网站在手机和电脑上都有良好的体验。但不同设备的屏幕尺寸千差万别。

经过多次调整，我总结出自己的方法： - 移动优先：先设计手机版，再扩展到桌面版 - 断点测试：在多个设备上实际测试 - 渐进增强：确保基本功能在所有设备上都可用

收获

这个项目最大的收获不是那个运行起来的网站，而是整个过程中学到的经验：

从需求到实现的完整流程
架构设计的重要性
性能优化的实际技巧
问题排查的系统方法

给想要尝试的同学的建议

如果你也想自己搭建个人主页，我的建议是：

从小开始：先实现核心功能，再逐步完善
记录过程：遇到的问题和解决方案都是宝贵的经验
保持迭代：技术永远在进步，你的项目也可以不断改进
享受过程：最重要的是在这个过程中学习和成长

结语

开发这个个人主页项目，就像是在数字世界中建造自己的家。每一行代码、每一个设计决策，都承载着我的思考和热情。

它不仅仅是展示我的技能和经历的平台，更是我技术成长的见证。从架构设计到性能优化，从本地开发到容器化部署，这个过程让我对全栈开发有了更深刻的理解。

现在，当我打开自己的网站，看到的不仅是一个网页，更是一段充满挑战和收获的旅程。

未来规划： 我正在考虑添加博客评论系统、邮件订阅功能，也许还会用 GraphQL 重构 API。技术的道路永无止境，而我会继续探索前行。