Technical Dossier
个人网站搭建
从 Astro 静态站点、Git-based CMS 到 Cloudflare Pages 部署的完整个人网站建设记录。
项目简介
从 Astro 静态站点、Git-based CMS 到 Cloudflare Pages 部署的完整个人网站建设记录。
使用技术
AstroTypeScriptMarkdownDecap CMSGitHub OAuthCloudflare PagesCSSCSS Scroll SnapScoped CSSResponsive Design
项目概况
- 最近更新时间
- 2026-07-05
- 帖子数量
- 10
- 项目状态
- 进行中
Project Updates
技术记录
这个项目中的技术问题、实现过程和阶段性记录都会整理在这里。
视觉系统分层：减少玻璃卡片的同质化
学习如何在同一套视觉系统里，让列表页、详情页、About 和 Changelog 拥有不同页面性格。
项目技术档案：让项目分区像项目主页
学习如何把项目分区从文章集合升级为包含状态、技术栈和统计信息的项目主页。
首页门户：封面页与最近更新聚合
学习如何把静态首页升级为封面式入口，并自动聚合博客、学习笔记和项目更新。
详情页图片灯箱：点击图片查看原图
学习如何在静态内容详情页中实现图片点击放大预览。
贡献日历组件：统计网站更新频率
学习如何用内容日期生成类似 GitHub Contributions 的更新频率热力图。
About 页面信息面板：自动读取内容与响应式布局
学习如何让 About 页面从内容系统自动读取最近更新，并设计稳定的响应式卡片布局。
Cloudflare Pages 部署：从静态构建到 Pages Functions
学习如何把 Astro 静态网站部署到 Cloudflare Pages，并理解 Pages 与 Workers 的区别。
Decap CMS 与 GitHub OAuth：让静态网站拥有后台
学习 Git-based CMS 的基本原理，以及如何通过 GitHub OAuth 在 Cloudflare Pages 上登录后台。
分区系统设计：让 Notes 和 Projects 支持项目内更新
学习如何把单层内容列表升级为分区与分区内帖子两层结构。
Astro Content Collections：给静态网站建立内容模型
学习如何用 Astro Content Collections 管理博客、笔记、项目和分区内容。