建站指南

我使用「Obsidian + Digital Garden + Github + Cloudflare」方案建设本站。

一、基础搭建

创建 Github 仓库和令牌

  1. 创建仓库：打开这个 仓库，点击 Use this template，新建一个 Github 仓库
  2. 创建令牌：打开这个 页面，选择有效期和刚刚创建的仓库，权限列表中选择 Contents 和 Pull requests（注意保存令牌，只显示一次）

使用 Digital Garden 插件

  1. 安装插件：在 Obsidian 中安装 Digital Garden 插件并启用
  2. 配置插件：
    • GitHub repo name：填入刚创建的 Github 仓库名称
    • GitHub Username：填入你的 Github 用户名
    • GitHub token：填入刚创建的 Github 令牌
    • 等待出现“✅”标志
    • 其余配置都是可选项，可后续参考 官方文档 配置

部署 Cloudflare Pages 站点

  1. 打开 Cloudflare，在“计算 → Workers 和 Pages → Pages”下，选择“导入现有 Git 存储库”
  2. 选择刚刚创建的 Github 仓库后开始配置：
    • 构建命令：npm run build
    • 构建输出目录：dist
    • 其余未提到的默认即可
  3. 点击保存并部署，稍等一会，就可以在这个 Pages 项目下获取到链接并访问。
注意

Cloudflare 免费计划每月最多构建部署 500 次，而 Digital Garden 是利用的 Github API，所有文件修改都是一个个提交的，当你有几十篇笔记时，可能在调试阶段很快就会达到上限。此问题可通过定时构建部署解决，参见：配置 Cloudflare Works 定时器（可选）

配置 Cloudflare Works 定时器（可选）

  1. 取消自动部署：打开刚刚在 Cloudflare 中创建的 Pages 项目，在设置中找到“分支控制”：

    • 取消“启用自动生产分支部署”勾选
    • 预览分支选项改为“无”
    • 保存提交

  2. 创建部署挂钩：同样在 Pages 项目的设置中找到“部署挂钩”，创建一个挂钩后，会获取到一个 Webhook

  3. 创建 Works 项目：打开 Cloudflare，在“计算 → Workers 和 Pages → Worker”下，选择“从 Hello World! 开始”，创建一个 Works 项目

  4. 完善 Works 项目：创建 Works 项目成功后，点击“编辑代码”，在打开的编辑器中粘贴以下代码（记得替换 KEY 和 Webhook）:

    /**
 * Cloudflare Worker：定时 + 手动双触发部署钩子
 * 功能：
 *  1. 通过 Cron Trigger 定时调用 Cloudflare Pages 的 Deploy Hook
 *  2. 通过浏览器或 curl 手动触发（需携带密钥参数 ?key=xxx）
 */

// 1) 手动触发所需的密钥，自行更换成只有自己知道的字符串
const SECRET_KEY = "...";

// 2) 公共逻辑：真正去调用部署钩子
async function triggerDeploy() {
  // ⚠️ 注意：把下面 URL 换成你自己的 Webhook
  const url =
    "https://api.cloudflare.com/...";

  try {
    const res = await fetch(url, { method: "POST" });
    console.log("✅ Deploy Hook 已触发，状态码:", res.status);
    return res.status;
  } catch (err) {
    console.error("❌ Deploy Hook 触发失败:", err);
    throw err;
  }
}

export default {
  // ------------------------------------------------------------
  // 定时触发：由 Cron Trigger 调用
  // ------------------------------------------------------------
  async scheduled(event, env, ctx) {
    // 让 Worker 在后台异步执行，防止超时
    ctx.waitUntil(triggerDeploy());
  },

  // ------------------------------------------------------------
  // 手动触发：通过 HTTP 访问 Worker 地址
  // 例如：GET https://<worker-domain>/?key=SECRET_KEY
  // ------------------------------------------------------------
  async fetch(request, env, ctx) {
    const { searchParams } = new URL(request.url);

    // 1. 校验密钥
    if (searchParams.get("key") !== SECRET_KEY) {
      return new Response("❌ 未授权：密钥不正确或缺失\n", { status: 403 });
    }

    // 2. 触发部署钩子
    try {
      const status = await triggerDeploy();
      return new Response(
        `🚀 手动触发成功！Deploy Hook 返回状态：${status}\n`,
        { status: 200 }
      );
    } catch (err) {
      return new Response(
        `⚠️ 手动触发失败：${err.message || err}\n`,
        { status: 500 }
      );
    }
  },
};

  5. 部署上述代码后，在 Works 项目的设置页面找到“触发事件”，添加一个“Cron 触发器”

  6. 添加一个 Cron 表达式：0 22 * * *，即为北京时间每天早上 6 点自动部署

  7. Cron 表达式规则参见 Cloudflare 文档，注意 UTC 时间和北京时间的转换

  8. 你也可以通过 Works 项目的链接 + 自定义的 KEY 来实现手动触发（一般调试的时候用的上）

在 Obsidian 中发布和更新内容

  1. 在想要发布的笔记 YAML 区域中添加 dg-publish: true
  2. 在想要作为首页的笔记 YAML 区域中添加 dg-home: true（只能有一篇）
  3. 打开 Digital Garden 插件的发布中心：使用 Ctrl+P 打开 Digital Garden：Open Publication Center，勾选笔记并发布
  4. 等待 Github 和 Cloudflare 完成自动部署（根据笔记数量而定，一般 1~2 分钟内）
  5. 即可在刚获取链接地址访问到最新的内容

参考文档

二、高级进阶

绑定域名方法

  1. 打开 Cloudflare，在前面创建的 Pages 项目里找到“自定义域”，输入域名后按照流程指引操作即可
  2. 打开自己域名解析商网站（我使用 腾讯云）：
    • 若前面设置的是顶级域名，需要迁移 DNS 到 Cloudflare
    • 若前面设置的是二级域名，只需要设置 CNAME 即可

自定义组件方法

自定义样式方法

添加统计代码

TODO

添加评论代码

TODO

三、自定义代码

这个章节里列出的，是我自己使用的 自定义组件 和 自定义样式。可自行选择是否使用。

TODO