数字花园+github+cf-pages 建站方案

2024/05/05 自建网站 cloudflare github 共 2017 字,约 6 分钟

引言

能读到这篇文章说明你对 Obsidian 有一定了解了,双链笔记的特性已经不用赘述。该文档介绍了如何通过 GitHub 私有库和 Cloudflare 的 Pages 服务资源实现完美的一键发布的方法。

能力要求

  1. 该方案需要懂一点点 GitHub 的操作
  2. 本文假定如果用户需要自定义域名,那么用户应具有添加域名解析 CNAME 的能力,相关知识不再赘述

使用插件

数字花园 Digital Garden

第三方服务

https://github.com/ https://cloudflare.com/

实施方法

安装插件

插件市场安装

在插件市场搜索 digital garden 安装

手动安装

如果没有科学上网可以在 Github 上下载 zip 包到本地解压
把 digitalgarden 文件夹放入你的库文件夹下的 .obsidian/plugins 路径下
比如我的库名是 test ,那么插件文件夹路径就是 test/.obsidian/plugins/digitalgarden
正常情况下 digitalgarden 下有

  • main.js
  • manifest-beta.json
  • manifest.json
  • styles.css
    等你配置好了以后会有 data.json 文件夹保存你的配置 这些都不用手动干涉

克隆库

  1. 首先 fork 仓库 https://github.com/oleeskild/digitalgarden
  2. 然后设置仓库为 private

将库部署到 CloudFlare

  1. 进入控制台 选择左侧目录 Workers 和 Pages
  2. 选择 创建应用程序
  3. tab 中选择 Pages
  4. 点击连接到 git
  5. 授权 github 权限
  6. 点击 从您的帐户部署站点
  7. 选择 github 账户 并选择之前 fork 的仓库 digitalgarden
  8. 点击开始设置
  9. 预设类型留空 构建命令 npm run build 构建输出目录 dist
  10. 点击开始

域名绑定

  1. 购买一个域名,并 托管CF
  2. 返回 CF 控制台,WorkersPages 面板,点击你创建的 Pages
  3. tab 中选择 自定义域
  4. 设定你自己的域名,点击 激活域
  5. 稍微等待一下,显示 有效 即为成功

插件配置

  1. 点击 https://github.com/settings/tokens/new?scopes=repo 新建一个令牌
  2. 复制 令牌填充到 Github token 这栏
  3. Github repo name 那一栏填你 克隆的库名
  4. Github Username 填你的 Github 用户名称
  5. 下面的 Base URL 填你的域名 包含子域名 不带协议
  6. Slugify Note URL 置空 否则中文路径出错
  7. Features 这里配置页面出现的内容
  8. Appearance 这里控制站点的名称 主题样式 语言 图标等
  9. 关闭后自动保存

尝试发布

  1. 写一个新文档
  2. 添加文档属性 可以通过快捷键 ⌘(ctrl)+p 唤出快捷栏,输入 tag,选中 Digital Garden: Add publish flag,然后文章头部出现文档属性
  3. 可以通过在 ob 中设置模板 批量添加 frontmatter
  4. ⌘(ctrl)+p 然后输入 publish single Note, 回车即可看到提示栏信息发布状态
  5. 返回 CloudFlare 控制台,Workers 和 Pages面板 的 page 模块中,点击你创建的 Pages 查看构建状态等待完成 如果有错误 查看报错信息
  6. 去自己的域名看看发布效果
  7. 左侧的工具栏有个按钮,可控制批量更新发布

其他

  1. 网站样式、风格和标题等在插件的配置里有详细说明,可以参考 插件文档
  2. GitHub 账户务必做好隐私保护,将库设为 private 并限制好 CloudFlare 授权的库,最好不要选择全部授权。
  3. 图床使用 GitHub 和 Cloudflare,无需繁琐的额外配置,相当于白嫖了。
  4. 注意标记添加文档属性 dg-home 为 ==首页==,可以通过快捷键⌘(ctrl)+p 唤出快捷栏,输入 tag,选中 Digital Garden: Add publish flag,然后文章头部出现文档属性,添加 dg-home,选则属性类型为复选框,然后选中即可设置当前页为首页。注意不要重复设置首页,发布构建会报错。
  5. 为什么不选择教程中的方法呢?因为 Vercel 和 Netlify 在大陆地区的访问都有点麻烦,而且速度慢。Vercel 即使 CNAME 指向中国也是访问很慢,而 Netlify 则可能莫名其妙封禁用户。因此,我探索了 CloudFlare 方案。
  6. 每次发布构建 GitHub 都发邮件好烦怎么办?将 GitHub 的库 watch 改为 ignore 即可忽略邮件。但是这样你也会错过发布失败的提示,考虑到发布半分钟后你可能回去页面刷新预览,也不是不能接受。

总结

  1. Cloudflare 免费资源有上限,但一般情况下个人很难用完。这个资源和 workers 是共享的,注意有 workers 大量需求的用户,观察资源的余量
  2. 最后,我个人强烈建议新手看下 obsidian 社区 软通达 大佬的 建议 ,那就是不要做那些花里胡哨的东西,笔记的本质是记录和总结。
  3. 作者主页
    1. 类星体
    2. 掘金
    3. 语雀
    4. 什么值得买
    5. bilibili

文档信息

Search

    Table of Contents