🏠Digital garden数字花园🌻网站搭建教程

一：准备工作

Digital garden项目 https://dg-docs.ole.dev/getting-started/01-getting-started/
obsidian https://obsidian.md/
github帐户 https://github.com/
vercel帐户 https://vercel.com/
域名
cloudflare帐户 https://www.cloudflare-cn.com/
图床PicList https://github.com/Kuingsmile/PicList/releases

二：整体思路

通过github上vercel部署Digital garden数字花园项目，obsidian中安装Digital garden同步插件，将文件同步至github仓库，后自动发布在网页应用上。最后通过cloudflare用自己的域名代理vercel的网页发布地址。

三：操作步骤

注：域名、帐户注册相关教程这里不再赘述，自行解决。（github、vercel、cloudflare）

1.新建obsidian笔记仓库，用来后续笔记的存储目录。填写仓库名称，选择一个文件存放位置，然后点击创建。
image.png

2.在obsidian插件中安装Digital garden插件。
image.png

3.打开这个链接点击下方Deploy
image.png

4.在Private Repository Name随便创建一个名字，如：dg-app，然后点击创建Create。
image.png

5.去github生成一个访问令牌,点击这里填写一个备注名如：dg-api，将有效期改为永久，然后别的都不用动，拉到最底下生成令牌。
image.png

注意：这个token创建后记得保存，后续在图床配置的时候，还会用上，因为仅有一次可见的机会。

6.打开Digital garden插件设置，分别填入你的Private Repository Name，你的github帐户，和你生成的github api key，填写完成如果是正确的，会显示绿色打勾，错误的话就是红叉，查看一下自己的参数是否填写正确。
image.png

7.之后在obsidian中右键新建一个笔记。使用Cmd/Ctrl+;输入dg-publish，然后右键这个值，将其改为复选框。同理，再添加一个dg-home，也将其改为复选框，最后都打上勾。
image.png
成功的话，他们看起来应该是这个样子的：
image.png
这两个属性的意思是
dg-home 设置会告知插件，这应该是您的主页或进入您数字花园的入口。（只需将其添加到一条笔记中，无需添加到您发布的每条笔记中）。

dg-publish 设置会告知插件此笔记应发布到您的数字花园。未设置此设置的笔记将不会被发布。（换句话说：您发布的每条笔记都需要此属性。）

8.按 CTRL+P（在 Mac 上按 CMD+P）打开命令面板，找到“Digital Garden: Publish Single Note”命令。按回车键。或者在侧边栏点击小树叶，勾选后点击Publish selected，这样就发布了第一条你的页面文章。
image.png

image.png

9.我们回到刚刚创建的vercel，会提供给你一个域名，点击进去，就可以看到你刚刚发布的文章。
image.png

至此，一个简易版的Digital garden数字花园就搭建成功了！

四、进阶优化

1.标题和主题的设置

打开Digital Garden插件的设置页面，找到Appearance—>Manage appearance ，参考如下设置
image.png

2.笔记的创建和最近更新信息显示

同样在Manage appearance打开的页面，往下拉，找到Timestamps Settings并作如下配置:
image.png

3.布局设置

同样在Digital Garden插件的设置页面，找到Global Note Settings —> Manage note settings ，打开笔记设置页面,除了最后一个，建议全部打开。
image.png
每个功能是什么，自己点一下翻译，都非常好理解。我这里就不赘述了。

4.笔记置顶设置

随着我们笔记的增加，我们希望非常重要的笔记总是在文件树的第一条显示，只需要在我们要置顶的笔记的元数据中新增dg-pinned = true 即可实现该笔记的置顶。
image.png

5.非英文笔记要注意的配置

对于非英文笔记要注意关掉以下配置，不然会出现同一个目录下的多篇笔记，你只能发布一篇到你的数字花园，因为非英文字符无法处理导致路径的冲突。
image.png
更多操作请阅读官方文档。

五.域名解析

打开https://vercel.com/，登录进去，选择你的项目，点击上方设置
image.png

选择侧边栏Domains,点击Add Domain
image.png

输入你的域名的二级域名。xxx.你的域名.xxx,点击保存，之后会警告报错，这是正常的。
image.png

复制Value值，到cloudflare，选择你的域名，DNS记录。
image.png

在cloudflare添加一个CNAME类型，名称为你的二级域名头，将Value值填入目标，打开代理状态。然后保存。
image.png

这样就完成了你的域名代理。直接访问你的域名就可以访问你的dg数字花园网站了！

知识来源：
1.Digital garden项目 https://dg-docs.ole.dev/getting-started/01-getting-started/
2.博客 https://blog.rahc.top/article/tech-share-mydigitalgarden
3.图床教程 https://www.haoyep.com/posts/github-graph-beds/
4.图床cdn加速教程 https://www.haoyep.com/posts/github-graph-beds-cdn/