技术日志 2026.04.18

让 AI 帮你发布博客文章：自动生成 frontmatter 与一键部署指南

#Astro #SEO #个人博客 #建站

手动填元数据和部署太心累？重复劳动消磨创作热情？用 AI 自动化流程，让你只需专注内容，发布流程仅需一秒。

通过将原始内容交给 AI 助手，可自动生成符合 SEO 规范的标题、日期、摘要和标签，并结合 Astro 与 Cloudflare 实现一键部署，彻底简化博客发布流程。

整体流程

  1. 你准备好原始内容（笔记、草稿、任意格式）
  2. 告诉 AI："帮我发这篇文章"
  3. AI 读取内容，自动生成 title / 日期 / description / tags
  4. 你确认或修改
  5. AI 写入 src/content/blog/文件名.md
  6. 运行 npm run deploy，上线

正文开头规则 (SEO 核心)

除了 Frontmatter，正文的前两段对于用户留存和 Google 抓取至关重要，必须按以下逻辑生成：

Leading Paragraph (PAS 策略)

  • 策略：Problem (指出痛点) -> Agitation (放大痛苦) -> Solution (提供本篇方案)。
  • 字数：控制在 30 个字以内。
  • 目标：瞬间抓住读者注意力。
  • 策略：直接回答标题提出的问题，句子精炼，直接给出答案。
  • 样式：整段加粗。
  • 字数：控制在 50 个字以内。
  • 目标：让 Google 抓取并展示为 Featured Snippet。

最终文件模板

---
title: "文章标题"
pubDate: 2026-04-18 15:30:00
description: "80-150字的文章摘要"
tags: ['Tag1', 'Tag2']
---

【Leading Paragraph：PAS 策略，30字内】


【Snippet Paragraph：直接回答问题并加粗，50字内】


第一个二级标题


【正文…】

title：标题怎么写

  • 用中文，简洁直接，说明"做什么"或"解决什么问题"
  • 长度建议 15-35 个字
  • 好的格式："如何在 OxygenBuilder 中实现 Wistia 视频懒加载？"
  • 避免废话：不要加"【教程】""详解""完整版"这些词

pubDate：日期

强烈建议使用带有具体时分秒的精确时间，格式为 YYYY-MM-DD HH:mm:ss，例如 2026-04-18 15:30:00。Astro 原生支持按具体秒数进行严格降序排列。如果只写日期不写时间，同一天发布的多篇文章会因底层毫秒数完全一致而导致首页排序随机打架。

description：摘要怎么写

这个字段直接影响搜索结果展示，是 SEO 最重要的字段之一。

要求：

  • 中文，完整句子，不要截断
  • 长度 80–150 字（约 2-4 句话）
  • 提到核心技术/工具名称（利于搜索引擎抓取关键词）
  • 不要用"本文介绍..."开头，直接说结果

示例对比：

❌ 差：本文介绍了如何在 OxygenBuilder 中使用 Wistia 视频。

✅ 好：介绍在 OxygenBuilder 中通过原生 JavaScript 实现 Wistia 视频懒加载的完整方案，
包含 HTML 结构、CSS 样式、JS 点击加载逻辑，以及 Wistia 自动播放设置，显著提升页面加载速度。

tags：标签

标签用于文章分类和 /tags/ 页面聚合，建议复用已有标签，大小写需严格一致：

Wordpress / OxygenBuilder / hugo / cloudflare / Mac / Wistia / Lazyload / Easypost / Repeater / contact-from-7 / 表单 / 自定义 / 个人博客 / Astro / SEO / 建站

如果文章涉及全新主题可以新增标签，但建议控制在 4 个以内。

⚠️ 重要提醒：全站内置了中英 URL 转换机制。如果为了分类加了全新的纯中文标签，请顺手在 src/utils.ts 的字典里加一条英文映射，这样标签归档页才会生成干净的英文 URL（例如：/tags/new-tag/）。

文件命名规范

  • 全部英文小写
  • 单词之间用连字符（-）
  • 不超过 60 个字符
  • 体现文章核心关键词（这会成为文章的 URL）
文章主题                       文件名
如何自定义 WordPress 登录页    how-to-customize-wordpress-login-page.md
Mac 安装 Hugo                  how-to-install-hugo-via-mac.md
Astro 博客完整指南             astro-blog-complete-guide.md

正文格式

  • 支持 Markdown 和 HTML 混写
  • 一级标题（# ）已由 title 字段承担，正文从 ## 二级标题开始
  • 为了让文章侧边目录 TOC 正常生成，正文标题必须优先使用 Markdown 的 ## / ### ，不要写原始 HTML 的 <h2> / <h3>
  • 如果文章较长，建议至少拆出 3 个以上二级标题；需要子层级时再使用 ###
  • 代码块加语言标识，如 ```javascript、```php、```bash
  • 图片放到 public/pic/ 目录，引用写 /pic/文件名.jpg
  • 点击图片会自动触发 Lightbox 浮层预览，不会跳转离开页面

给 AI 的明确要求可以直接这样写：“请把正文按 Markdown 标题结构输出，正文从 ## 开始，长文至少拆出几个 ## 小节，需要子目录时再用 ###，不要使用原始 HTML 标题标签。”

发布前质量检查

写入文件后逐项确认：

  • title 是中文，自然流畅，不超过 35 字
  • pubDate 使用包含精确时分秒的格式 YYYY-MM-DD HH:mm:ss
  • description 完整，没有截断，包含核心关键词
  • tags 使用已有标签或合理新增
  • 文件名全英文小写 + 连字符，保存在 src/content/blog/
  • 长文已经使用 Markdown ## / ### 分节，确保 TOC 能自动生成
  • 代码块有语言标识
  • 图片已放至 public/pic/ 并使用正确引用路径

部署命令

# 本地预览（可选）
npm run dev

一键构建 + 部署到 Cloudflare


npm run deploy

npm run deploy 内部等同于 astro build && wrangler deploy，会同时更新 sitemap，部署后全球生效。

小结

整个流程的核心是把"重复、有规律"的工作交给 AI，把"创作判断"留给自己。你只需要写好内容，AI 负责格式、元数据和部署。写完就发，门槛几乎为零。