输入关键词开始搜索

个人博客开发总结 - 从零到上线

📁 技术笔记 ✏️ 更新于 2026年03月18日

这是一篇关于个人博客从零开发到上线的完整记录，包括功能实现、遇到的问题、团队协作流程等内容。

项目概述

已完成功能

页面结构

页面 功能 状态
首页 卡片式文章列表 + 废话栏目 ✅
简历 教育背景、工作经历、技能栈 ✅
归档 按时间归档文章 ✅
标签 按标签分类文章 ✅
废话 随笔/碎碎念时间线 ✅
文章详情 相关文章推荐栏目 ✅

功能特性

功能 说明 状态
本地搜索 模态框搜索，实时过滤 ✅
RSS 订阅 支持 RSS 阅读器订阅 ✅
暗黑模式 自动/手动切换 ✅
响应式布局 手机 + PC 适配 ✅
相关文章 基于标签匹配，显示最多5篇 ✅
废话栏目 首页显示最新5条废话 ✅

文章迁移

  • 从旧仓库迁移 56 篇文章
  • 同步 78 个图片资源
  • 修复文件名空格和 front-matter 格式问题

开发团队与流程

团队角色

角色 职责 负责人
Manager 任务分配、进度跟踪、协调阻塞 李四
Developer 代码开发、Bug 修复 bob
Reviewer 代码审查、安全检查 Tom
Tester 功能测试、边界验证 tester
DevOps Git 操作、CI/CD 部署 Tony

开发流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
┌──────────────┐
│   Manager    │ ──→ 接收需求，创建任务
└──────────────┘
        │
        ▼
┌──────────────┐
│     bob      │ ──→ 开发代码，本地测试
└──────────────┘
        │
        ▼
┌──────────────┐
│     Tom      │ ──→ Code Review（质量/安全/最佳实践）
└──────────────┘
        │
        ▼
┌──────────────┐
│   tester     │ ──→ 功能测试（完整性/边界条件/用户体验）
└──────────────┘
        │
        ▼
┌──────────────┐
│    Tony      │ ──→ Git 推送，GitHub Actions 自动部署
└──────────────┘

Git 委托机制

由于 Worker 容器无法直接执行 git 操作，采用委托机制：

  1. Worker 完成代码后，发送 git-request 给 Manager
  2. Manager 代理执行 git 操作（add/commit/push）
  3. Manager 将结果反馈给 Worker

遇到的问题

1. Worker 初始状态问题

Worker 问题 解决方案
Tom Matrix 用户名大小写问题 统一使用小写 @tom
Tony Matrix 用户名大小写问题 统一使用小写 @tony
tester 容器未创建 Manager 手动创建并启动容器
所有 Worker 首次响应延迟 需要多次 @mention 触发

根本原因: Worker 创建流程不完整，容器未自动启动。

2. 安全漏洞

漏洞类型 位置 修复方式
XSS 漏洞 search-modal.ejs 转义用户输入
URL 注入 resume.ejs, footer.ejs 校验 URL 格式

教训: 所有用户输入都必须转义，URL 必须校验格式。

3. 流程违规

时间 问题 后果
09:34 Manager 直接修改代码 绕过了 Code Review
11:07 跳过 tester 直接部署 未验证功能完整性
12:41 Manager 直接创建文件 绕过了完整开发流程

教训: 必须严格遵守流程，Manager 只负责进度跟踪，不参与代码编写。

4. 移动端适配与缓存问题

时间 问题 原因 解决方案
22:19 手机端文本不换行 容器宽度未限制为 100% 添加 .post-page { width: 100%; }
22:19 加粗文本不显示粗体 CSS 缺少 strong 标签样式 添加 .post-content strong { font-weight: 700; }
22:21 清除缓存后仍不生效 GitHub Pages CDN + 浏览器双重缓存 在 CSS URL 后添加时间戳版本号

问题分析：

  1. 为什么只有新文章有问题：

    • 管理员在 CSS 修复前访问了新文章
    • 手机浏览器缓存了旧版本 CSS
    • 老文章可能很久未访问，缓存已过期

  2. 为什么清除缓存无效：

    • 手机浏览器缓存比桌面端更顽固
    • GitHub Pages CDN 也有缓存层
    • 即使清除浏览器缓存，CDN 缓存仍然存在

  3. 为什么 CSS 规则正确但不生效：

    • 容器宽度设置不完整（max-width 有，但缺少 width: 100%）
    • 导致 word-break: break-word 无法触发换行

终极解决方案：

在 CSS URL 后添加时间戳版本号，强制刷新所有缓存：

1
2
3
4
5
<!-- 修改前 -->
<link rel="stylesheet" href="/css/style.css">

<!-- 修改后 -->
<link rel="stylesheet" href="/css/style.css?v=1710086400000">

效果：

  • ✅ 每次部署都生成新的 URL
  • ✅ 强制浏览器重新下载 CSS
  • ✅ 绕过所有缓存（浏览器 + CDN）
  • ✅ 适用于所有文章（新老文章都一样）

相关 Commits：

  • Commit b003020: 代码块横向滚动修复
  • Commit 905eafa: 响应式文本自动换行
  • Commit 93709ca: 添加 strong 标签样式
  • Commit cc7ce8a: 移动端容器宽度修复
  • Commit a8cf196: CSS 缓存破坏机制

教训：

  • 移动端测试必须在真实设备上进行
  • 缓存问题需要从架构层面解决（版本号/CDN 配置）
  • CSS 容器宽度设置必须完整（width + max-width）

5. 技术问题

问题 原因 解决方案
Git push 失败 容器内无 SSH 密钥 从宿主机同步 SSH key
推送被拒绝 远程有新提交 git pull --rebase
CSS 冲突 废话栏目样式与远程冲突 手动解决冲突
MinIO 同步延迟 文件未能及时同步 手动传输文件内容

后续改进计划

1. 流程规范化

  • [ ] 严格执行完整流程，禁止跳过任何环节
  • [ ] 建立 Checklist 确保每步完成
  • [ ] Manager 只负责进度跟踪

2. Worker 管理

  • [ ] Worker 创建后自动启动容器
  • [ ] 建立 Worker 健康检查机制
  • [ ] 统一 Matrix 用户名规范（全小写）

3. 基础设施

  • [ ] SSH 密钥自动同步到 Worker 容器
  • [ ] MinIO 同步机制优化
  • [ ] 建立分支策略避免直接推 main

文章提交说明

新文章放在 source/_posts/ 目录，格式如下：

1
2
3
4
5
6
7
8
9
10
11
---
title: 文章标题
date: 2026-03-09 10:00:00
category:
  - 技术笔记  # 或 废话
tags:
  - 标签1
  - 标签2
---

文章内容...

提交流程:

  1. 创建文章文件
  2. 通知 Tony
  3. Tony 推送到 GitHub
  4. GitHub Actions 自动部署

总结

这次博客开发是一次完整的团队协作实践，涵盖了从需求分析、代码开发、安全审查、功能测试到自动化部署的全流程。

主要收获:

  • ✅ 完成了一个简约优雅的个人博客
  • ✅ 建立了完整的开发流程和团队协作机制
  • ✅ 发现并修复了安全漏洞
  • ✅ 积累了容器化环境下的 Git 操作经验

待改进:

  • ⚠️ 流程执行还不够严格
  • ⚠️ Worker 容器管理需要自动化
  • ⚠️ 文件同步机制需要优化

希望这篇总结对后来者有所帮助！