我的个人博客搭建全记录：从 0 到 1，非技术视角 + AI 辅助
网页设计：从“抽卡”到新粗野主义
这个博客并不是我手写 HTML 一步步磨出来的。过程其实非常简单：我使用了通义千问 Qwen-3.8max preview 模型，直接给它一个简单的提示词，让它帮我设计一个静态个人博客的网页。
AI 第一版给出的风格我不大喜欢，于是又让它生成了一版，也就是现在看到的 “新粗野主义”（Neo-Brutalism） 风格。其实我以前见过这种风格，起初并不打算用，觉得“AI 味”太重，而且用的人也不少。但考虑到我不是专业搞设计的，对美学确实不太精通，与其继续“抽卡”碰运气，不如现阶段先用这一版，等后期有更好的主题再更换。
拿到基础 HTML 后，我针对细节进行了多次微调。对于设计得不理想的地方，就让 AI 重新写，最后终于磨出了现在这个样子的主页。
技术选型：为什么选择 Astro？
有了 HTML，接下来就要考虑博客框架。我了解过 Next.js、Vue 等前端框架，也想过直接用 Next.js 部署在 Vercel 上，那样工作量小也简单。但反复对比后，我最终选择了 Astro。
选择 Astro 的核心原因在于：
- 轻量且快速：它能最大限度减少生成的 JavaScript 代码，输出的基本都是 HTML。对于静态博客来说，加载速度更快。
- 部署方便：配合 Cloudflare Pages 等工具，可以非常方便地让全球用户访问。
组件化开发与页面扩展
在开发过程中，我先将单页 HTML 进行组件化处理。我把首页的各个板块、风格样式和排版逻辑拆分成独立的组件，方便后续复用。
首页搞定后，剩下的文章、项目、关于、友链等页面就简单了。我直接让大模型按照已有的 UI 风格去设计其他页面，如果缺少特定组件，就让它新建几个。整体来说，前端设计的门槛被 AI 降得很低。
功能实现与避坑指南
虽然是静态博客，但还是需要一定的交互功能。
评论系统（Giscus）
我本想自建评论区，但如果使用 VPS 或服务器，博客就没那么“静态”了。后来我发现了一个开源项目 Giscus，它本质上是利用 GitHub Discussions 作为后端。对于前端来说，只需嵌入一段 JavaScript 脚本即可实现评论功能。虽然自定义程度不算极高，但节省了大量的维护成本。
GitHub API 限速问题
在集成评论区时，我遇到了评论数无法显示的问题。查阅资料后发现，GitHub API 对单 IP 每小时有 60 次的请求限制。如果用户共用机场节点，额度很快就会被刷满，导致评论数显示为 0。
为了解决这个问题，我利用 Cloudflare Edge Functions 做了代理，通过服务端中转请求，成功避开了用户侧的 IP 限速。
搜索功能
搜索功能对博客很重要。但如果把全量文章内容都放在客户端搜索，文章多后会严重影响效率。所以我将搜索范围缩小为 “标题 + 摘要（Excerpt）”。因为我的博客没有服务端，脚本都在客户端运行，只搜摘要能大幅减轻客户端压力。虽然无法搜到正文细节，但目前文章数量较少，配合 Tag 标记，基本能满足需求。
存储与自动化部署
我的文章并没有直接放在 GitHub 仓库里，而是存储在 Backblaze B2 上（它提供 10GB 的免费 S3 存储）。
但在使用 Backblaze 时要注意流量限制：它默认每月的免费流量只有存储容量的 3 倍。如果你只存了 10MB 的东西，每月流量才 30MB，部署几次就超限了。后来我发现 Backblaze 和 Cloudflare 是合作伙伴，走 Cloudflare CDN 是免流量费的。
为了安全起见，我没有绑定信用卡开启 Public 桶，而是用了 Private 桶。我用了一个 Cloudflare Workers 脚本进行“解密”代理：部署时，Cloudflare Pages 会在构建阶段先通过 Worker 从 Backblaze 下载资源到本地，然后再完成最终的静态部署。
为什么不用 Cloudflare R2？
其实 R2 也提供 10GB 免费存储，甚至不限制流量（虽然会限制操作次数）。我之所以不用它，主要是因为 R2 需要绑定信用卡才能使用。而我希望这套博客系统能做到“零绑卡”，让没有信用卡的人也能用。
另外，我也确实想多折腾一点——前端用 Pages，后端用 Backblaze，架构上有点“分离”的乐趣。如果全用 Cloudflare 自家产品，反而太轻松了。折腾的过程本身也是写作的素材，何乐而不为呢？
部署触发与 Obsidian 插件
因为文章不在 GitHub 仓库里，代码不变就不会触发自动部署。这时候有两种手动触发方式：
- 打开 Cloudflare 后台，手动点击 Rebuild。
- 使用 Cloudflare 的 Deploy Webhooks 功能，请求一个专属 URL 即可触发。
第二种方式更优雅。于是我专门为 Obsidian 写了一个插件（目前尚未开源，因为写得比较潦草，勉强能用），主要提供三个功能：
- 一键初始化 Obsidian 仓库的文件夹结构。
- 在面板上创建文章和项目，自动生成 Frontmatter 元数据。
- 一键将文章和图片同步到 Backblaze，并自动请求 Webhook 触发部署。
这个插件全程由 AI 辅助编写，调试过程也花了不少功夫，目前仍有小缺陷，但暂时够用。等以后优化好了再考虑开源。
整个博客项目的部署其实非常简单：你只需克隆仓库到自己的 GitHub，绑定 Cloudflare Pages，填写环境变量，并在 Backblaze 桶里准备好基本的元数据 JSON 和文件夹结构。配合 Obsidian 插件，几乎可以一键完成。
未来设想
博客刚开始设计时，我并没有希望它被太多人看见，更多只是个人的记录和碎碎念。但真正花几天时间把它搭好之后，还是会渴望有人来看。所以接下来我可能需要做一些 SEO 优化（虽然我一窍不通）。
我还想加入一些新功能，让这个博客不只是一个展示碎碎念的地方，更能成为督促我成长和行动的网络空间：
- 工具页面：放一些简单实用的在线工具，方便自己，也方便他人。
- 丰富基础功能：增加归档、To-Do List 等可自定义的功能。
- 自定义样式：现在的“新粗野风”随时可以换，每个组件都能重新设计，可定制程度很高。
- 接入 GitHub 活跃状态面板：显示近期的提交动态，看看自己有没有认真写代码或做 Vibe Coding。
- 手机使用时长统计：想接入手机的使用数据，但厂商没有开放 API。折中方案是用 OCR 识别每日截图，手动上传后自动填入网站。
- 接入 Umami 统计：免费版每月 100K 请求额度，如果哪天不够用了，说明我的访问量已经很高了（笑）。
- 赞助页面：虽然不知道会不会有人赞助，但只要长期分享有价值的内容，总能找到共鸣。
以下功能暂时搁置或还在设想阶段：
- 邮件订阅：AI 最初设计的 HTML 里就有订阅组件，但需要后端支持，比较麻烦。目前用 RSS 就足够了。
- 基于 Giscus 的静态论坛：利用 Giscus 的原理开发论坛，想法很有意思，但目前还没有清晰的实现路径。
说实话，要做这些事压力不小，因为我对整体架构并非完全熟悉，只能一边学一边做。
我最近列了一个学习项目——UC Berkeley 的 CS61A。听说这门课非常好，主要训练你用不同的方式去表达和组织程序。我觉得在 AI 编程能力极强的时代，你不需要手写很多代码，但一定要懂得如何用自然语言精准地表述需求。如果完全不懂术语，你的描述会特别长，AI 也不一定能理解准确。
所以，接下来的重点会放在学习底层知识上，而实际的开发工作交给 AI。这样就能“学习和创作两不误”：一方面坚持枯燥的底层学习，提升基本素养；另一方面也能用快捷的方式快速看到成品，这本身就是一件非常有趣的事情。
写到这里已经足够长了，而且我也词穷了，哈哈。今天就先到这里吧。
