从 0 到 1：基于 Astro 5 重构个人网站与轻量化部署实战心得

网站域名：imhsh.com
核心原则：保持好奇，持续折腾。极简设计、零多余运行时、极速加载。

一、设计哲学与参考源起

1. 为什么参考 Brian Lovin（brianlovin.com）？

在重构 imhsh.com 时，我们摒弃了传统个人网站复杂绚丽的动画库和臃肿的卡片网格，转向了类似知名产品设计师/工程师 Brian Lovin 的经典极简排版风格：

单列聚焦视口（Max-W-2xl / ~672px）：文章与列表在大屏上保持克制宽度，读者视线不用大幅横向扫视，天然具备优秀的阅读呼吸感与移动端自适应能力。
内容先于装饰（Content-First）：页面只保留核心信息——我是谁（Hero）、我写过什么（思考）、我做过什么（精选项目）与如何找到我（关于）。
克制的交互反馈：鼠标悬停（Hover）时仅以平滑下划线或外链微箭头（↗）位移提供触觉般的操控反馈，不干扰主体内容。

2. 视觉符号与品牌识别（Favicon）

高辨识度黄黑配色：采用高饱和度活力黄（#FFCC00）圆角方块（Squircle）底座，搭配极粗字重（Font-Weight: 900）的 「SH」 标识。
全场景穿透力：无论浏览器处于亮色标签页还是暗黑主题模式，高对比度明黄底色都能在繁杂的标签栏中一眼被锁定。

二、技术选型与架构设计

1. 为什么选择 Astro 5？

对于个人主页和博客而言，以 Next.js、Nuxt 为代表的传统全栈 SSR/SPA 框架往往存在“水合（Hydration）过剩”的问题——访客只是为了读几行文字，却不得不下载数百 KB 的 JavaScript 框架运行时代码。

Astro 的核心优势完美契合了我们的诉求：

默认零 JS（Zero JS by Default）：在构建时将代码全量预渲染为干净的静态 HTML + CSS，首屏没有任何无用的 JS 脚本，Lighthouse 性能跑分近乎满分。
孤岛架构（Islands Architecture）：如果局部组件（如暗黑模式切换）需要交互，仅按需引入微量纯原生 JS，其余内容永远保持纯静态。
原生 Markdown / Content Collections：博客文章直接以 Markdown 存储在本地代码库，内置 TypeScript 严格类型推导，天然防错。

2. 零运行时的中英文即时切换方案（i18n）

为了实现英文与中文的双语无缝切换，我们没有引入复杂的第三方国际化重度库，而是设计了一套纯 CSS 属性驱动 + 本地存储记忆的极轻量方案：

静态双语预渲染：中英文文案在构建期同时编译到同一份 HTML 节点中（包裹 .lang-zh 与 .lang-en）。

CSS 属性选择器控制显隐：

/* 英文模式下隐藏中文，默认状态下隐藏英文 */
html:not([data-lang="en"]) .lang-en { display: none !important; }
html[data-lang="en"] .lang-zh { display: none !important; }

零闪烁（Zero FOUC）：在 <head> 中嵌入数行微型内联脚本，在 DOM 渲染前读取浏览器的 navigator.language 或 localStorage，直接给根节点打上 data-lang，实现切换零页面刷新、零延迟、刷新不闪烁。

3. 主题切换与排版细节

黑白 OLED 纯粹配色：浅色模式采用纯净白底黑字（#ffffff / #111111），深色模式采用深邃纯黑（#000000 / #f4f4f5）。
自然文本换行支持：在「关于」模块中配置 white-space: pre-line;，让维护者在数据配置文件中书写的自然换行和段落直接忠实还原，告别繁琐的 <br> 标签。

三、持续集成与部署方案（CI/CD）

为了兼顾“本地一键快速推流”与“云端自动化流水线”，全站设计了双轨部署通道：

通道 A：GitHub Actions 自动化流水线（推荐主干通道）

项目配置了 .github/workflows/deploy.yml，实现代码提交即上线：

自动化触发：当代码推送到 main 或 master 分支（或在 GitHub 页面手动点击 workflow_dispatch）时触发。
环境构建：GitHub 云端虚拟机检出代码，安装 Node 22 环境并执行 npm run build 生成 dist/。
加密同步：借助 easingthemes/ssh-deploy 动作，通过仓库注入的 SSH_PRIVATE_KEY 密钥，利用 rsync 增量同步 dist/ 内容至服务器目标目录 /var/www/html/。
权限修正：自动执行 chmod -R 755 /var/www/html 保证 Web 服务器可读权限。

通道 B：本地 PowerShell 一键发布脚本（应急/快速通道）

针对本地离线开发或调试场景，根目录提供了 deploy.ps1：

npm run deploy
# 1. 本地执行 npm run build 校验
# 2. scp 打包文件上传到服务器临时目录
# 3. 远程原子级替换 /var/www/html 并赋予 755 权限

单次部署耗时通常在 3~5 秒内完成，敏捷高效。

四、项目数据与架构目录概览

imhsh.com/
├── public/                  # 静态资源根目录（免构建直连）
│   ├── assets/
│   │   ├── avatar.png       # 个人高清圆形头像
│   │   └── hero_sketch.jpg  # 手绘工程草图
│   └── favicon.svg          # 自研黄黑 SH 矢量网站图标
├── src/
│   ├── content/
│   │   └── blog/            # Markdown 个人思考与随笔集合
│   ├── data/
│   │   └── site.ts          # 全站元数据总线（中英文案、5大硬核项目、社交渠道）
│   ├── layouts/
│   │   └── BaseLayout.astro # 毛玻璃顶栏、中英文/主题切换控制器、Base 容器
│   ├── pages/
│   │   ├── index.astro      # 首页（Hero / 思考 / 项目 / 关于）
│   │   └── blog/            # 文章列表与正文沉浸式阅读页
│   └── styles/
│       └── global.css       # 现代化设计系统（变量、排版、动效）
├── deploy.ps1               # Windows 本地自动化部署脚本
└── .github/workflows/       # GitHub Actions 远程 CI/CD 配置文件

五、总结与后记

这次个人主页重构不仅是一次视觉风格的换新，更是一次开发理念上的减法实践：

不跟风大框架：对内容展示型网站来说，Astro 的静态打包与极简主义带来了极致的加载性能和零维护心智负担。
极客与工程感共存：从全磁悬浮人工心脏、纳米流式细胞仪等硬核项目的陈列，到充满辨识度的黄底 SH 图标，让网站成为个人工程能力与数字审美的最佳映射载体。
保持好奇，持续折腾：好的个人站点不是一次性完工的标本，而是一个可以随着思考和作品持续迭代生长的“数字花园”。

一、 设计哲学与参考源起