Web publishing with Obsidian + Github + Netlify｜Obdisian 架站成功的做法
date-created:: 2023-04-15
(Update 2023-10-23) The original web page of Feng's blogpost referred to below is gone, as he announced the loss of the content this month in a short post. Luckily, I copied and pasted the original text below. Unfortunately the images are broken and lost. The moral: Back up your good stuff. 好東西記得備份！
This is the main guide, with thanks to Feng Zhang (峰的博客), that directly helped me build the website you're seeing. Its opening paragraphs enticed me with the idea of "publishing at the push of a button" (通過命令一鍵發布). It provides high-level steps without going into detailed steps, but luckily I managed to figure them out, especially the seemingly magical yet baffling parts of Netlify's role in this undertaking.
(Update 2023-07-27) For detailed guide straight from the horse's mouth, see "Related Resources" at the bottom of this page.
#project/learn-by-doing
#paste/b
src: Feng's blog post
免費直接把筆記發布成網站: Obsidian+GitHub+Netlify
December 19, 2022
Hello，大家好，今天向大家介绍，如何免费用 Obsidian + GitHub + Netlify 发布自己的网站。简单的说，Obsidian 是一个 markdown 笔记软件，GitHub 是一个代码托管网站，Netlify 是一个静态网站部署工具。
建好之后，流程大致是，在 Obsidian 编辑文章，然后通过命令一键发布【巜 This sounds too good to be true】，然后就可以通过网址访问了，这里有其他人建好的，大致是这个样子：
0 准备：
- 下载 Obsidian 笔记软件
- 注册 GitHub 账号
1 首先，我们需要用到 Obsidian 的一个插件 Digital Garden，下载安装Digital Garden。
2 打开这个 repo，点击绿色的 deploy to netlify
I don't see any green button for that. But I managed to "create depo". #todo Document details.
这样会打开 Netlify，在你的 GitHub 创建一个这个 repo 的 copy。然后新建一个名字，然后按步骤在 Netlify 发布你的网站到 internet。
3 下一步，你需要获取你 GitHub 账户的 access token，这个 token 用于你的 Obsidian 笔记软件的设置，相当于一个 password。去这个网址，点击 generate token 按钮，复制 token，下一步需要用到。
4 打开 Obsidian - Digital Garden 的 settings。填入 GitHub 用户名，repo 的名字（在 step3 设置好的），还有上一步复制好的 token。
5 现在可以发布你的第一个笔记了。在 Obsidian 创建一个新的笔记，并且把下面字符加到笔记的开头。
---
dg-publish: true
dg-home: true
---
笔记现在它应该是这样的：
- dg-home 代表这个笔记应该作为网站首页
- dg-publish 设置代表这个笔记是否需要被发布到互联网上。
6 按 CTRL+P 打开命令面板，找到 Digital Garden: Publish Single Note 命令，按回车。
或者，点击侧边栏的小树苗 🌱 的图标，然后点击发布按钮：
7 在 Netlify 找到你网站的网址，打开，大功告成：
No step-by-step guide about how to do this finding! But again I managed to find my way and it all worked. #todo Add details.
如何添加 Connnected Pages 图表
0 例子：
1 点击 Obsidian - settings：
2 点击 settings - Appearance - Manage：
3 选择支持图表的 Theme，如 Wikipedia
Great. So, it's possible to choose a theme. The results of a nice theme like
Red Graphite, with its san serif fonts, are much more beautiful and modern-looking than the default's serif fonts.
4 点击 settings - Note Settings - Edit
5 开启：Show local graph for notes:
6 添加 Internal link
创建一个 Note，名为 hi i am Refo Zhang
创建一个 Note，名为 digital garden
在 Obsidian 中，编辑 digital garden note，按键盘上的 [ 两次，然后输入 hi，选择弹出的 hi i am Refo Zhang。最终效果是：
[[hi i am Refo Zhang]]
这样就会在第二个 note 中，创建一个第一个 note 的 internal link。
7 Publish 所有的改变，即可得到一个含有所有 Notes 关系的图表
Related resources
- Another short article in Chinese that supposedly describes the same process. #todo/verify
- This is a brief translation of the very detailed official English guide by the author of the Digital Garden plugin, hosted on a site enabled by the plugin itself. How apropos!
- The guide itself spans several steps and pages.
- How to Set Up a Digital Garden With Obsidian For Free #todo/verify y Watch to see if it's a better step-by-step guide and alternative to Feng's article (this one).
- A new but different video guide of the same setup. I haven't gone through it, but it looks straightforward.