⑤博客网原理

此为个人博客网搭建与维护全指南-⑤博客网原理

此博客为基于Vitepress搭建、由Github备份、用Cloudflare部署的网站

大概内容为：

紧跟：个人博客网 来上手搭建此博客 紧跟：博客使用指南 来后续使用博客

26年1月11日有感：搭建这个博客网也有20多天了，随着博客网本身的配置和上传的文章都越来越多，这个博客网系统在慢慢变大，所以我之前写了博客使用指南来进一步方便博客网的使用。但是到现在，添加的内容越来越多、越来越“新奇”，我也认识到这个SPA网页是很厉害的，所以我要学习一下，知道为什么我的那些网页可以运行。

这份文档的受众是“作为系统架构师的你”。重点在于理解数据是如何从本地文本变成全球可访问的网页的。建议从以下四个维度进行学习和记录：

• 静态站点生成 (SSG) 原理：研究 VitePress 是如何将 Markdown 编译成 Vue 组件，并最终在构建时预渲染成静态 HTML、CSS 和 JavaScript 文件的。对比它与传统 SPA（单页应用）在首屏加载和 SEO 上的区别。
• 数据加载机制：分析你编写的各种 .data.mjs 文件（如活动热力图、照片地图数据）。理解这些脚本是如何在 Node.js 构建期间运行、提取本地文件信息，并序列化为静态 JSON 供前端消费的。
• CI/CD 自动化流水线：梳理 GitHub 代码仓库与 Cloudflare Pages 之间的 Webhook 触发机制。记录代码推送后，云端容器拉取代码、执行 npm run build、生成 dist 目录的全过程。
• 边缘网络部署 (CDN)：理解 Cloudflare 是如何将你的静态产物分发到全球边缘节点的，以及用户访问域名时的 DNS 解析和缓存命中过程。