本博客使用的技术
⌨️ 本博客使用的主要技术
- obsidian
- digital garden
- github
- vercel
- 阿里云
🛠️ 搭建步骤
🆕 新建vault
- 打开obsidian

- 新建vault

浏览选择一个本地位置(路径中,尽量不要有中文),然后点击创建。
🔨 安装 Digital Garden 插件
- 在打开vault的走下角,点击⚙️进入设置界面,选择第三方插件,关闭安全模式

- 浏览社区插件市场,搜索 Digital Garden

- 安装 Digital Garden ,并启用

- Digital garden的选项如下,开始时马赛克部分为空,需要下一步生成的内容进行填写

⛓️ Github 中创建私有仓库
准备 github 和 vercel 账户
在开始这个步骤之前,需要有两个账号,一个是github账户,一个是vercel账户。注册步骤很简单,没有特别的卡点,就略过了。
-
github注册地址:https://github.com/signup?user_email=&source=form-home-signup.
-
vercel注册地址:https://vercel.com/signup.
这两个网站的作用:
- github上创建的仓库用来存储后续发布的笔记;
- vercel用来部署github仓库成为一个网站,最终实现数字花园。
创建github token
登录github后,点击个人头像点击Settings,依次选择Developer Settings --> Personal access tokens --> Tokens(classic) --> Generate new token(classic). 按照如图所示创建自己的token(这个token将被用来从Obsidian访问github的私有仓库)。
关于过期时间的选择,为了避免频繁更换,建议选择长期,但如果处于安全考虑,也可以选择其他选项。
注意:这个token创建后记得保存,因为仅有一次可见的机会。




最后在页面最下方,点击生成token

新生成的token,记得复制

创建 github 私有仓库,并部署到vercel
点击下面链接
oleeskild/digitalgarden
然后点击 Deploy

将会跳转到vercel界面,点击Create ,创建github仓库,并进行vercel部署配置。

自动部署,等待完成将会看到如下界面:

到这里我们生成了一个github 私有仓库;

还有vercel 网站,可以通过生成的网址 dg-automation-notes.vercel.app,访问这个网站
⚙️ 配置 Obsidian
配置Digital Garden 插件

Github Authertication 变为这个标识 ✅,说明配置成功了。
此时,Obsidian可以通过Digital Garden插件访问Github 私有仓库了。
📒 发布笔记
第一篇笔记

---
这里的部分为frontmatter,即当前笔记的属性。
---
dg-publish: "true"
表示这篇笔记,是发布的;
dg-home: "true"
表示这篇笔记,是本网站的主页。
其他的属性不是必须的。
发布
按照下图,发布第一篇笔记。

然后通过之前生成的网站dg-automation-notes.vercel.app访问,这里要替换成自己的网址。
🚀 优化
Digital Garden 标题和主题设置
打开Digital Garden插件的设置,Appearance-->Manage Appearance
按照如下图设置,Sitename改为自己的网站标题即可。

笔记的创建和更新时间戳
打开Digital Garden插件的设置,Appearance-->Manage Appearance

数字花园布局设置
打开Digital Garden插件的设置,Features-->Manage note settings,我这里是都打开了

笔记置顶设置
随着笔记的增多,我们总是希望有些笔记能够在名录中进行置顶,只要在frontmatter中添加如下属性即可dg-pinned: "true"

非英文笔记URL
把下面的开关关掉即可

源码优化(可选)
这一步不是必要的,只是随着我们使用的深入,总有一些不如我们心愿的地方,可以通过这种方式修改。
下面以使用visual Studio community 2022进行部分汉化为例,进行说明
-
使用visual Studio community 2022克隆私有代码仓库
-
因为使用visual Studio community 2022,会自动生成.vs文件夹,为了避免后续反复提交,修改.gitignore文件,在最后一行,添加.vs

-
Connected Pages, On this page Pages, mentioning this page,我这里只改了这三处
| 英文 | 中文 |
|---|---|
| Connected Pages | 相关页面 |
| On this page Pages | 当前文章 |
| mentioning this page | 提及此页面的页面 |
| 修改的方法是,找到需要汉化的文本,然后用中文替代, |
- git 提交代码
在git更改页面,填入提交信息,全部提交,最后push到仓库

- 刷新网站,已经更新
绑定自定义域名
到目前为止,我们的网站访问需要点魔法,如果想要开放给别人访问,还需要绑定一个国内的域名进行解析。
-
购买域名, 我用的阿里云平台
阿里云域名购买与域名解析使用教程(图文教程)-阿里云开发者社区 -
在vercel中添加购买的域名

可以按照如下配置,红框中的为默认的域名,不需要动,其他两个配置可以参照

-
在阿里云控制台中解析

记录值为上一步vercel添加domain中给定的值
当配置成功后,第 2 步 domain 会显示 Valid Configuration
此时就可以通过新的域名,并且不需要梯子即可访问了。
💬 添加 giscus 评论系统
基本就是参考上述链接中的办法。
下面是几点优化
-
开启仓库的 Discussions

-
删掉注释
<main>
// 底部添加如下代码 <--这行删掉,不然会渲染到页面上
{% for imp in dynamics.notes.footer %}
{% include imp %}
{% endfor %}
</main>