1. 新建 Markdown 文件#

打开 Typora，点击「文件」→「新建文本」（或按 Ctrl+N），文件名建议使用英文。

2. 添加 Frontmatter#

在文章开头添加 Frontmatter 模板：

1
---
2
title: 文章标题
3
published: 2026-02-04
4
tags: [标签1, 标签2]
5
category: 软件安利
6
draft: false
7
---

提示： 可以设置微信输入法的常用语，快速插入这个模板，省时省力。

填写注意事项：

根据需要修改以下字段：

• title：文章标题
• published：发布日期（格式：YYYY-MM-DD）
• tags：文章标签
• category：文章分类
• draft：是否为草稿（true/false）
• pinned：是否置顶（true/false，置顶文章会显示在分类页面最上方）

3. 本地预览#

模板插入后，如果需要预览文章效果，有两种方式：

方式一：使用脚本预览（推荐）

在命令行中执行：

1
cd D:\project2026\fuwari
2
npm run dev

然后访问 http://localhost:4321 查看效果。

方式二：使用 BAT 脚本

双击「启动博客并添加模板.bat」，输入 2 选择启动构建预览，脚本会自动打开浏览器。

4. 提交并推送#

预览确认无误后，有两种方式提交并推送：

方式一：使用 GitHub Desktop（推荐）

1. 打开 GitHub Desktop
2. 你会看到修改的文件或新增的文章
3. 填写提交说明（如：新增文章：文章标题）
4. 点击「Commit to main」提交到本地仓库
5. 点击「Push origin」推送到 GitHub

方式二：使用命令行

在命令行中依次执行：

1
cd D:\project2026\fuwari
2
git add .
3
git commit -m "新增文章：文章标题"
4
git push

EdgeOne 会自动检测到推送，触发构建。大约 1-2 分钟后，文章就会自动发布到博客了！

完整使用流程#

步骤 1：Typora 新建文章

打开 Typora，点击「文件」→「新建文本」（或按 Ctrl+N），开始写文章。

步骤 2：移动文章到对应分类文件夹

写完文章后，将文件保存到对应的分类目录：

• src/content/posts/Software/ - 软件安利
• src/content/posts/Technical/ - 技术教程
• src/content/posts/AIHacks/ - AI 新鲜玩法

步骤 3：运行脚本生成模板

双击「启动博客并添加模板.bat」，会看到菜单：

1
========================================
2
       博客工作菜单
3
========================================
4

5
[1] 生成 YAML 模板
6
[2] 启动构建预览
7
[3] 退出
8

9
========================================
10
请选择操作 (1-3):

输入 1 并回车，脚本会自动：

• ✅ 扫描所有文章文件
• ✅ 给没有 frontmatter 的文章自动生成模板
• ✅ 自动填充以下字段：
  • published: 当天日期
  • tags: 空数组 []
  • category: 根据文件夹自动识别（Software/Technical/AIHacks）
  • draft: false
  • pinned: false

你只需要填写：

• title: 文章标题

可选修改：

• 如果需要置顶文章：将 pinned: false 改为 pinned: true
• 添加标签：tags: [标签1, 标签2]
• 手动设置封面：image: 图片URL（留空则自动提取第一张图）

步骤 4：本地预览

填写完标题后，在脚本中输入 2 并回车，脚本会：

• ✅ 自动启动开发服务器（如果未运行）
• ✅ 自动打开浏览器到 http://localhost:4321/

在浏览器中查看文章效果，确认无误后关闭预览（按 Ctrl+C）。

步骤 5：提交并推送

打开 GitHub Desktop，你会看到：

• 修改的文章文件
• 如果是新文章，会显示为新增文件

点击「Commit to main」提交，然后点击「Push origin」推送。

EdgeOne 会自动检测到推送，触发构建。大约 1-2 分钟后，文章就会自动发布到博客了！

1. 移动文章后忘记更新 category 字段#

问题：将文章从 Technical/ 移动到 AIHacks/ 后，网站上的分类显示还是原来的分类。

原因：只移动了文件位置，忘记更新 frontmatter 中的 category 字段。

解决方案：

1. 移动文件后，记得同时修改文章开头的 category 字段
2. 例如：category: Technical → category: AIHacks
3. 然后再提交推送

2. YAML 格式错误#

问题：文章发布后只显示标题，没有封面、摘要、正文。

原因：YAML frontmatter 格式极其严格，常见错误：

• 冒号后没有空格：title:文章标题 ❌
• 使用了错误的日期格式：published: 2026/02/04 ❌
• 标签格式错误：tags: 标签1, 标签2 ❌

正确写法：

1
---
2
title: 文章标题           # 冒号后有空格
3
published: 2026-02-04     # 使用连字符
4
tags: [标签1, 标签2]      # 使用数组格式
5
category: Technical
6
---

3. 图片链接失效#

问题：文章中的图片无法显示。

原因：

• 使用了本地路径（如 C:\Images\...）
• 图床图片被删除
• URL 中有特殊字符未编码

解决方案：

• 使用 PicList 等工具自动上传到图床
• 检查图片 URL 是否有效
• 使用 HTTPS 协议

4. GitHub Desktop 推送失败#

问题：推送时提示冲突或错误。

原因：

• 本地和远程有不同步的更改
• 网络问题
• 文件名包含特殊字符

解决方案：

• 先拉取远程更改（Pull）
• 解决冲突后再推送
• 避免使用中文或特殊字符命名文件

5. 分类显示不正确#

问题：文章在某个分类下显示 0 篇。

原因：

• category 字段与实际分类目录不匹配
• 分类名称使用了中文但目录是英文

注意事项：

• category 字段值要与目录名一致
• 当前使用英文分类：Software、Technical、AIHacks

6. 本地预览正常，推送后显示异常#

问题：本地预览没问题，推送到 GitHub 后网站显示异常。

原因：

• 大小写敏感（Linux 系统区分大小写）
• 缓存问题
• 构建环境差异

解决方案：

• 文件名和路径保持统一的大小写
• 清除浏览器缓存或使用无痕模式查看
• 检查 EdgeOne 构建日志

7. 忘记提交图片资源#

问题：文章中的本地图片在网站上不显示。

原因：图片放在了本地目录，没有推送到 GitHub。

解决方案：

• 图片放在 public/ 目录下
• 或使用图床上传，获得外链 URL
• 确保 .gitignore 没有忽略图片文件

以上就是我的博客发布工作流了。虽然博客没有服务器，但通过 GitHub + EdgeOne 的组合，配合一些小脚本，依然可以实现高效的自动化发布。

欢迎大家交流讨论，有问题评论区留言！