本站背后的技术：从 Markdown 到可以互动的博客

hello啊各位，本篇为该博客的的第一篇文章，本篇主要介绍了该博客的基本技术架构。

简单来说，Astro 负责把内容做成网站，Cloudflare Pages 负责把网站送到读者面前，Supabase 负责账号、评论和数据。

一张图看懂本站的技术架构

这里有两条不同的流程。文章在发布前就会被转换成静态页面；读者打开页面后，浏览器再按需连接 Supabase，完成登录、评论和数据读取。静态页面和动态功能可以并存，不需要为了评论就让整台服务器一直运行。

文章与页面：Astro、Markdown 和 CSS

本站使用 Astro 生成页面。文章以 Markdown 文件保存在 src/content/blog/，标题、日期、分类、标签等信息写在文件开头；正文则用标题、段落、列表、引用、代码和图片来排版。

例如，一篇文章可以先写清它的基本信息：

title: "一篇文章的标题"
pubDate: 2026-10-02
category: "网站与技术"
tags: ["Astro", "写作"]

Astro 会读取这些内容，生成文章页、首页文章卡片、分类页和 RSS。页面的外观由单独的 CSS 文件维护，导航栏、文章统计、评论区等部分则拆成可复用组件。以后调整某个组件，相关页面可以一起保持一致。

登录、评论与浏览量：Supabase

文章本身是静态文件，但账号和评论需要保存、查询与更新。本站通过浏览器中的 JavaScript 客户端连接 Supabase，由它提供邮箱注册登录、用户资料、评论、浏览量数据，以及访客头像的存储空间。

功能	使用的服务	在本站的作用
页面与文章	Astro、Markdown	生成首页、文章页、分类页和 RSS
源码与内容管理	GitHub	保存网站代码和文章文件
网站托管	Cloudflare Pages	发布静态页面、绑定域名并提供 HTTPS
账号与数据	Supabase Auth、Postgres	登录、访客资料、评论和浏览量
头像文件	Supabase Storage	保存访客上传的头像
站内搜索	浏览器端 JavaScript	在已经生成的文章索引中搜索

数据库权限也需要设计

Supabase 的公开访问密钥会由网页读取，因此它不应被当作密码。真正限制读写范围的是数据库中的 Row Level Security（RLS，行级安全） 规则：读者只能管理自己的资料和评论；发表评论需要先登录并验证邮箱。

这样，网页可以直接请求必要的数据，而不需要把管理员密钥放进浏览器。管理员密钥必须留在可信的服务端环境里，不能写进公开页面或文章代码。

从写文章到上线

日常发布大致是这四步：

1. 在 src/content/blog/ 新建 Markdown 文件，写好标题、日期、分类和正文。
2. 如果文章需要配图，把图片放到 public/images/，正文通过 /images/文件名 引用。
3. 在本地预览确认后，把改动推送到 GitHub 的 main 分支。
4. Cloudflare Pages 自动执行 pnpm build，将生成的 dist/ 发布到 hhworld666.com。

因此，更新一篇文章不需要手动登录服务器，也不用重新配置域名。代码仓库是内容来源，Cloudflare Pages 根据仓库中的最新版本自动部署。

选择这套方案的原因

• 轻量：文章页在构建时生成，读者打开时不需要先等服务器拼装页面。
• 花费低：静态页面由托管平台分发，Supabase 只处理确实需要保存的数据。
• 文章好迁移：正文是普通 Markdown 文件，可以用文本编辑器修改，也容易备份和迁移。
• 功能够用：账号、评论、访客资料和浏览量已经有独立的数据服务支持。

它也有一个明确的取舍：**目前没有网页后台编辑和发表文章。**要写新文章，需要在项目里创建 Markdown 文件，再推送到 GitHub。对个人博客来说，这能保持流程简单；如果以后想在浏览器里直接发布，再考虑接入内容管理后台。

现在这套网站由谁负责什么

项目部分	负责内容
Astro	页面结构、文章渲染和静态构建
Markdown	文章正文与基本信息
CSS / JavaScript	视觉样式、主题切换、搜索和交互
GitHub	保存代码、文章与图片
Cloudflare Pages	自动构建、托管和域名访问
Supabase	用户身份、评论、统计数据和头像

这套组合让博客的主体保持简单，同时把真正需要实时保存的内容交给专门的数据服务。以后添加新文章、调整样式，或扩展评论功能，都可以在现有分工上继续迭代。

hh现在缺米付不起云服务器(T_T)……

大家支持一下