借助Gmini，成功部署了Sveltia CMS（hexo）后台

今天借助Gemini，成功部署了Sveltia CMS（hexo）后台，以后可以随时发博客了。

以下是Gemini给我的的部署教程。

要在 Netlify 上部署的 Hexo 博客中集成 Sveltia CMS（Netlify CMS 的轻量级现代替代品），你需要执行以下几个关键步骤。

Sveltia CMS 完全兼容 Netlify CMS 的配置文件，但它更轻快且不依赖 React。

以下是为你定制的完整部署指南：

第一步：准备 CMS 文件

在你的 Hexo 博客根目录下（即 source 文件夹内），新建一个 admin 文件夹，并在其中创建两个文件：index.html 和 config.yml。

1. 创建 `source/admin/index.html`

这个文件是 CMS 的入口。Sveltia CMS 只需要引入一个脚本即可运行。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    
    <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script>
    
    <meta name="robots" content="noindex" />
  </head>
  <body>
  </body>
</html>

2. 创建 `source/admin/config.yml`

这是 CMS 的核心配置。我已经根据你提供的 _config.redefine.yml 和 Hexo 的常用结构为你写好了配置。
请注意： 你需要将下方的 repo: your-github-name/your-repo-name 替换为你实际的 GitHub 用户名和仓库名。

backend:
  name: github
  repo: your-github-name/your-repo-name # 🔴 请替换为你的 GitHub 用户名/仓库名
  branch: master # 或者 main，请确认你的默认分支名称

# 媒体文件夹配置
# Hexo 默认图片放在 source/images，发布后位于 /images
media_folder: "source/images"
public_folder: "/images"

# 站点访问地址（方便 CMS 里的“查看实时预览”按钮跳转）
site_url: "https://hexo.alaw.fun"

# 开启编辑发布流程（可选，如果不想要审核流，设为 simple）
publish_mode: editorial_workflow

# 内容集合
collections:
  # 博客文章集合
    - name: "posts"
    label: "文章"
    folder: "source/_posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
            - { label: "标题", name: "title", widget: "string" }
            - { label: "发布时间", name: "date", widget: "datetime" }
            - { label: "封面图", name: "cover", widget: "image", required: false }
            - { label: "分类", name: "categories", widget: "list", required: false }
            - { label: "标签", name: "tags", widget: "list", required: false }
            - { label: "内容", name: "body", widget: "markdown" }

  # 草稿集合 (Hexo 的 _drafts)
    - name: "drafts"
    label: "草稿"
    folder: "source/_drafts"
    create: true
    slug: "{{slug}}"
    fields:
            - { label: "标题", name: "title", widget: "string" }
            - { label: "创建时间", name: "date", widget: "datetime" }
            - { label: "内容", name: "body", widget: "markdown" }

第二步：配置 Hexo 忽略 Admin 目录

Hexo 默认会解析 source 下的所有文件。如果不配置忽略，Hexo 会把 admin/index.html 强制套上主题的布局（Header/Footer），导致 CMS 界面错乱；同时也会把 config.yml 转换成 JSON。

打开你的根目录下的 Hexo 配置文件 _config.yml（注意不是主题的配置文件），找到 skip_render 字段并修改：

# 在 _config.yml 中
skip_render:
    - "admin/*"
    - "admin/**"

如果原本有其他配置，请合并保留。

第三步：在 Netlify 和 GitHub 设置 OAuth 认证

Sveltia CMS 需要通过 GitHub API 读写你的仓库。为了安全，我们需要配置 OAuth。由于你使用 Netlify，我们可以利用 Netlify 自带的认证桥接功能。

1. 在 GitHub 创建 OAuth App

填写信息：

 - **Application Name**: `Sveltia CMS for My Blog` (名字随意)
 - **Homepage URL**: `https://hexo.alaw.fun` (你的博客网址)
 - **Authorization callback URL**: `https://api.netlify.com/auth/done` (**重要：必须填这个**)

点击注册，记下 Client ID 和 Client Secret。

2. 在 Netlify 配置密钥

登录 Netlify，进入你的站点 Dashboard。
点击 Site configuration (或 Settings)。
在左侧菜单找到 Access & security -> OAuth (不同版本界面可能略有不同，找 “Authentication providers”)。
点击 Install Provider，选择 GitHub。
输入刚才获取的 Client ID 和 Client Secret 并保存。

第四步：部署与使用

提交代码：将新创建的 source/admin 文件夹及修改后的 _config.yml 提交到 Git 并推送到 GitHub。

1
2
3

git add .
git commit -m "Add Sveltia CMS configuration"
git push

等待构建：Netlify 会自动触发构建。

访问 CMS：

 - 构建完成后，访问 `https://hexo.alaw.fun/admin/`。
 - 你应该会看到 Sveltia CMS 的界面，并提示 "Login with GitHub"。
 - 点击登录，授权后即可进入后台管理文章。

常见问题与提示

图片上传：在 CMS 中上传图片时，图片会被保存到 source/images。确保你的 Hexo 主题能够正确读取该路径下的图片。你目前的主题配置主要使用了远程图片链接，如果使用本地上传图片，可能需要确路径引用格式（Hexo 通常使用相对路径或 /images/xxx.jpg）。
本地调试：如果你在本地运行 hexo server，访问 localhost:4000/admin 可能会因为 OAuth 回调地址不匹配而无法登录。这是正常的，CMS 主要用于线上环境。如果需本地调试，需将 GitHub OAuth 的回调改为本地，但这会影响线上。建议直接在线上使用。

最后，注意在netlify项目设置里修改构建命令和输出目录。

2026/01/08 00:30更新

根据Gemini的教程将博客迁移到了cloudflare。原因是Netlify有积分额度限制，我才修改了几次博客，他就发邮件说我积分使用已过半。

法法姜豆