个人主页（HomePage）选型与设计方案

个人主页（HomePage）选型与设计方案复盘

1. 项目背景与需求

**“主站+博客”**的经典架构已经成为个人品牌建设的标配。个人主页（HomePage）作为数字化身份的核心展示窗口，承担着引导访问者深入了解个人价值主张和专业能力的重任。

旨在为个人主域名 zhangsongchao.cn 搭建一个轻量化的门户页（Navigation Page），作为个人品牌的数字化入口。该页面需与已有的 Hexo 博客（blog.zhangsongchao.cn）形成联动，用于展示 Slogan、核心文章索引及联系方式。

核心技术约束：

• 极致速度：拒绝任何重型框架（React/Vue 等），要求纯静态、秒开。
• 极简维护：采用 HTML+CSS 架构，确保“一次部署，长期免维”。
• 精准主义：视觉逻辑需清晰，符合数字化资产管理的有序感。

2. 子目录 vs 二级域名：zhangsongchao.cn/blog vs blog.zhangsongchao.cn

方案	优势	劣势
子目录 (zhangsongchao.cn/blog)	1. SEO权重集中，主域名更具影响力 2. 访问路径更短，用户体验更好	1. 技术实现复杂，需要服务器支持 2. 与 GitHub Pages 等静态托管服务兼容性差
二级域名 (blog.zhangsongchao.cn)	1 . 技术实现简单，适合静态托管 2. 与 GitHub Pages 等服务无缝对接	1. SEO权重分散，主域名影响力较弱 2. 访问路径较长，用户体验略逊

3. 静态模板平台横向对比

针对市面上主流的静态 HTML 模板库，从风格、费用及授权等维度进行了综合评估：

平台	风格特征	费用/授权	选型评价
HTML5 UP	经典极客、响应式极佳	免费 (CCA 3.0) / 付费 (Pixelarity)	首选。代码纯净度极高。其付费版 Pixelarity 提供更丰富的主题及商业授权，但免费版已足够支撑个人门户需求。
One Page Love	现代潮流、设计感强	免费 + 付费	备选。审美领先，由全球开发者贡献。但部分模板资源较重，需二次精简以符合速度要求。
Templated	传统清爽、复古极简	免费 (CCA)	参考。结构极其简单，适合极简主义，但视觉表现力稍显不足。
Nicepage	商业化、模板海量	增值订阅制	排除。虽有免费额度，但代码冗余度高，不符合“极致速度”与“极致开发”原则。

4. 具体主题方案博弈

在 HTML5 UP 家族内部，针对“导航门户”这一特定场景，对几款代表性主题进行了视觉逻辑与功能性的深度对比：

主题名称	视觉逻辑	优势	局限性
Identity	居中名片式	极简到了极致，视觉重心非常集中。	扩展空间有限，难以承载多篇优秀文章索引。
Aerial	全屏动态背景	极客感强，视觉冲击力巨大。	动效可能分散访问者对核心内容的关注。
Strata	侧边栏 + 内容流	结构清晰，具有作品集属性。	右侧布局相对松散，信息密度不够聚焦。
Read Only	固定侧边栏 + 锚点区块	稳定性最强，适合系统化展示个人说明书。	最终选择。 实现了名片感与内容量的平衡。

5. 最终选型理由：Read Only

最终决定采用 Read Only 主题，其决策逻辑如下：

1. 身份锚定：右侧固定区域始终展示个人核心信息（头像、Slogan），用户在滚动时不会迷失身份上下文。
2. 内容索引化：右侧区块非常适合通过列表形式对 Hexo 博客中的“优秀文章”进行精准引流。
3. 视觉兼容性：整体设计风格与 Hexo 博客保持高度一致，形成统一的个人品牌视觉体系。
4. 成本效益：基于 CCA 3.0 协议，在保留作者署名的前提下可免费使用并二次开发，符合开源分享精神。

6. 实施步骤

1. 新建github仓库：新建一个的仓库，用于部署个人主页，仓库类型为public。名字任意起，如 home-page
2. 应用主题：从html5up.net下载Read Only主题，然后将相关文件拷贝到项目中，并且上传代码到github

   github pages默认会寻找index.html作为主页文件，具体原理可以去自行查阅下

3. 配置github pages
   1. 设置分支为main，路径为根目录/(root)
   2. 配置域名为zhangsongchao.cn，需要在DNS中添加一条TXT记录来验证域名所有权，TXT记录的内容为github提供的验证字符串
4. 确认成功：
   1. 在github仓库中，进入Actions页面，确认部署流程成功完成
   2. 部署成功后，访问zhangsongchao.cn，确认个人主页能够正常访问，并且内容显示正确
5. 魔改：根据个人需求对Read Only主题进行定制化修改，如
   1. 替换头像和个人信息
   2. 添加备案信息
   3. 在右侧区块添加Hexo博客中精选文章的链接列表，形成内容引流闭环
   4. 调整配色方案……

---