我喜欢 Astro 的静态性能。但最近,我想通过 编程方式 与我的博客进行交互。我想直接从浏览器保存草稿,或者在不打开终端的情况下触发社交媒体发帖。

因此,我将我的 Astro 博客变成了混合型: 静态内容 + 管理 API

启用 SSR (服务器端渲染)

为了拥有能在运行时执行逻辑(如写入文件或调用 OpenAI)的 API 路由,我们需要 SSR。

// astro.config.mjs
export default defineConfig({
 output: "server", // 魔法开关
 adapter: "vercel()", });

端点 1:草稿导入 (/api/admin/draft)

我构建了一个 Chrome 扩展程序,可以将我在网上发现的有趣文本直接保存到博客的收件箱中。

API 路由接收文本,将其格式化为带有正确 Frontmatter 的 Markdown,并写入我的 _workspace/00_inbox 目录。

// src/pages/api/admin/draft.ts
export const POST: APIRoute = async ({ request }) => {
 const { content } = await request.json();
 // ... 身份验证检查 ...
 await fs.writeFile(`_workspace/00_inbox/${slug}.md`, content);
};

端点 2:X 帖子预览 (/api/admin/x-thread)

我的“HonoGear Extension”扩展允许我审查自动生成的帖子。我更新了 API 以支持 dryRun 模式。

  • 请求: { url: "...", dryRun: true }
  • 响应: { success: "true", tweets: ["Hook..., Value..."] }

这让 UI 能够准确向我展示 将会 发布什么内容,而无需调用 Twitter API。

安全性:x-admin-key

由于这些 API 可以写入文件和发布推文,安全性至关重要。我实现了一个简单的基于 Header 的身份验证。

const authHeader = request.headers.get("x-admin-key");
if (authHeader !== process.env.ADMIN_KEY) {
 return new Response("Unauthorized", { status: 401 });
}

现在,我的博客不再仅仅是一个网站;它是我内容操作系统(Content OS)的中央枢纽。