fyiii.com 全站优化实录

2026-05-29 深夜，一次完整的个人站点优化过程。从安全加固到视觉改造，从 AI 评论到自动化续签。

一、优化前现状

框架： Astro v5 + Tailwind CSS v4
服务器： Nginx 1.24.0 (Ubuntu 24.04)
安全： 仅有 HSTS，缺少 CSP / X-Frame-Options / X-Content-Type
色调： 暖米色背景 + 陶土橘强调色
布局： 纯文本日志列表
证书： 两张独立证书（裸域 + www），无自动续签

二、P0 — 安全加固

2.1 Nginx 安全响应头

add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://giscus.app; style-src 'self' 'unsafe-inline' https://giscus.app; img-src 'self' data: https:; font-src 'self'; connect-src 'self' https://giscus.app; frame-src https://giscus.app; frame-ancestors 'self';" always;

2.2 Gzip 压缩

13 种 MIME 类型，HTML 压缩率 81%（29KB → 5.6KB）。

2.3 SSL 强化

仅允许 TLSv1.2 + TLSv1.3，精细 cipher suite 配置。

2.4 域名统一

裸域 fyiii.com → www.fyiii.com 301 永久重定向。

三、P1 — 视觉改造

3.1 色调切换

从暖米色 + 陶土橘 → Indigo 靛蓝科技风：

变量	旧值	新值
`--background`	`#f6f3ee`	`#fafafa`
`--accent`	`#b2643c`	`#6366f1`
`--accent-foreground`	`#fff`	`#fff`

3.2 日志列表 → 卡片网格

从纯文本列表改为双列卡片网格，每张卡片包含标题、日期、摘要、标签和跳转箭头。

四、P2 — 交互增强

4.1 Hero 渐变光晕

在 Hero 区域添加靛蓝脉冲光晕动画 + “V” 字母头像。

4.2 导航栏 Sticky + 毛玻璃

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-glass {
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}

4.3 Cmd+K 全局搜索

任意页面按 ⌘K / Ctrl+K 唤起搜索弹窗，支持键盘导航和 Pagefind 全文搜索。

五、P3 — 功能扩展

5.1 Giscus 评论系统

方案选择： 由于主仓库是私有的，创建公开仓库 fyiii-comments 专门存放评论数据。

配置要点：

Repo: wuyonghui0810/fyiii-comments（公开）
Category: General
Mapping: pathname
CSP 需放行 giscus.app（script-src、frame-src、connect-src）

5.2 TOC 侧边栏

文章详情页右侧浮动目录，IntersectionObserver 自动高亮当前章节。

5.3 Projects 展示页

/projects 页面展示 6 个 AI 工具链项目，带状态标签和链接。

六、运维升级

6.1 ACME 自动续签

统一 SAN 证书：fyiii.com + www.fyiii.com
Cron：每天 UTC 02:00 执行 acme.sh --cron
续签后自动 nginx -s reload
HTTP 80 端口放行 /.well-known/acme-challenge/

6.2 Nginx 升级

1.24.0 → 1.30.2，修复多个 CVE 漏洞。配置兼容：listen 443 ssl http2 → listen 443 ssl; http2 on;

七、性能数据

指标	数值
HTML 压缩率	81%
QPS (50 并发)	533
页面加载	<100ms
失败请求	0

八、经验总结

CSP 要提前规划 — 加了 Giscus 才发现 CSP 太严格，需要显式放行第三方域名
ACME 验证不要被 301 拦截 — 裸域重定向需要在 HTTP server 块中单独放行 .well-known
统一证书优于多证书 — 一张 SAN 证书覆盖所有域名，续签只需一次
nginx 升级要注意语法变更 — 1.30 废弃了 listen http2，改用独立 http2 on; 指令

fyiii.com 全站优化实录 — 从安全加固到 AI 评论系统