使用 Now.sh 部署 TiddlyWiki

林一二2020年06月25日 23:28

使用 NodeJS 版 TiddlyWiki 的好处

以前在自己本地桌面上使用 HTML 版 wiki 的时候,它老是弹出「This page is asking you to confirm that you want to leave - data you have entered may not be saved.」这个提示框,这和 Notion 等能细粒度自动保存笔记系统就差别很大。

一般笔记系统都是记完一笔就自动保存,然后可以 command+w 关闭窗口,但 tw 还得手动保存一下,让我觉得很不安心,有点渐渐不爱用它记碎片的东西,因为记个碎片还得有这么多步骤,让我觉得很麻烦。而 NodeJS 版的 TiddlyWiki 就有细粒度的自动保存,可以解决这个问题。

备份到 Github 的好处

Github 是一个有很多自动化工具(例如 GithubActions、Now.sh 自动部署)、GUI 工具(Github Desktop)支持的 BaaS (省心存储服务),所以我打算把 tiddlywiki 备份到上面。

而且使用 NodeJS 版的 TiddlyWiki 后,所有 Tiddler 都会放在单独的文件里,就可以在 git 历史记录里很清楚地看到修改了哪些内容,获得更清晰的提交记录。并支持上传大量图片,因为图片不再是内嵌在 HTML 里的了。

配置 Now.sh 上运行的自动打包脚本

然后我在 package.json 里准备好 build 脚本,这个 JS 脚本会使用 tiddlywiki 这个 npm 包来把 NodeJS 版的一堆 tiddler 打包成一个 index.html,放在 ./public 文件夹里。

我在 .gitignore 里设置了 ./public 不上传到 Github,以减小仓库体积。然后在仓库里加上一个 now.json,最后到 Zeit(Now.sh)云服务上去设置它自动在我每次进行 Git 提交后,都拉取我的所有 Tiddler,然后执行构建脚本,把结果部署为一个在线的 Wiki。

在本地使用

配置完后,我就可以在本地用桌面版 TiddlyWiki编辑 Wiki,然后脚本会自动检测文件系统有变化,提交备份到 Github并触发自动部署公开的网页版本。

自动备份

查看引文:自动备份TiddlyWiki

当有多台电脑时,只要保证自己离开上一台电脑后,不要关闭电脑,这样自动提交脚本会每 15 分钟用git-sync自动同步脚本把变更同步到 Git 去。git-sync 是一个专门为同步笔记文件的需求设计的同步脚本。

在运行 git-sync 的时候,一开始还没法执行成功,我从 stderr 中发现它说:

git-sync: Please use

git-sync:   git config --bool branch.master.sync true

git-sync: to whitelist branch master for synchronization.
git-sync: Branch master has to have a same-named remote branch
git-sync: for git-sync to work.

git-sync: (If you don't know what this means, you should change that
git-sync: before relying on this script. You have been warned.)

所以可能在配置这个仓库的自动同步之前得先执行一次 git config --bool branch.master.sync true

或是在关闭电脑前手动点一下 Github Desktop 的 Sync 按钮把变更同步到云端即可。这样从公司回到家后,就可以拉取变更,再写新的东西了。


这套方案是完全免费的,因为 Github 作为云存储是免费的,Zeit 作为静态服务器也是免费的。

这个方案的缺点是,index.html 是动态生成的,所以没法使用Github Saver来在移动端把修改结果保存回 Github 云端。

但我很少会在桌面端以外的地方编辑 Wiki,在移动端我只是查询内容,所以这个缺点暂时不会影响我。

还有我还配置好了不把图片打包到 HTML 文件里。这样自动打包的 HTML 版的 wiki 里的所有图片都直接引用 Github 上的图片,从而能够大量上传图片,但依然保持 HTML 文件的体积较小。

因为我之前是使用 Github Pages 来部署 TiddlyWiki,所以 git 的历史记录里有很多对 index.html 的改动,为了去掉它们,减小仓库体积,我删掉了之前提交的所有 index.html

Code
!! 使用 NodeJS 版 TiddlyWiki 的好处

以前在自己本地桌面上使用 HTML 版 wiki 的时候,它老是弹出「This page is asking you to confirm that you want to leave - data you have entered may not be saved.」这个提示框,这和 Notion 等能细粒度自动保存笔记系统就差别很大。

一般笔记系统都是记完一笔就自动保存,然后可以 command+w 关闭窗口,但 tw 还得手动保存一下,让我觉得很不安心,有点渐渐不爱用它记碎片的东西,因为记个碎片还得有这么多步骤,让我觉得很麻烦。而 NodeJS 版的 TiddlyWiki 就有细粒度的自动保存,可以解决这个问题。

!! 备份到 Github 的好处

Github 是一个有很多自动化工具(例如 GithubActions、Now.sh 自动部署)、GUI 工具(Github Desktop)支持的 BaaS (省心存储服务),所以我打算把 tiddlywiki 备份到上面。

而且使用 NodeJS 版的 TiddlyWiki 后,所有 Tiddler 都会放在单独的文件里,就可以在 git 历史记录里很清楚地看到修改了哪些内容,获得更清晰的提交记录。并支持上传大量图片,因为图片不再是内嵌在 HTML 里的了。

!! 配置 Now.sh 上运行的自动打包脚本

然后我在 [[package.json|https://github.com/linonetwo/wiki/blob/e2a986471d2eeece07be35c939f77b91752a2b6f/package.json]] 里准备好 `build` 脚本,这个 JS 脚本会使用 [[tiddlywiki|https://www.npmjs.com/package/tiddlywiki]] 这个 npm 包来把 NodeJS 版的一堆 tiddler 打包成一个 `index.html`,放在 `./public` 文件夹里。

我在 `.gitignore` 里设置了 `./public` 不上传到 Github,以减小仓库体积。然后在仓库里加上一个 [[now.json|https://github.com/linonetwo/wiki/blob/10a87f32ef48560da0bf36c0786e64a2d27ca952/now.json]],最后到 [[Zeit(Now.sh)云服务|https://zeit.co/import/git#import-github]]上去设置它自动在我每次进行 Git 提交后,都拉取我的所有 Tiddler,然后执行构建脚本,把结果部署为一个在线的 Wiki。

!! 在本地使用

配置完后,我就可以在本地用[[桌面版 TiddlyWiki|制作简易的桌面版 TiddlyWiki App]]编辑 Wiki,然后[[脚本会自动检测文件系统有变化,提交备份到 Github|开机启动TiddlyWiki服务器并自动同步到Github]]并触发自动部署公开的网页版本。

!! 自动备份

<<reuse-tiddler "自动备份TiddlyWiki">>

---

这套方案是完全免费的,因为 Github 作为云存储是免费的,[[Zeit|https://zeit.co/home]] 作为静态服务器也是免费的。

这个方案的缺点是,`index.html` 是动态生成的,所以没法使用[[Github Saver|https://github.com/kookma/TW5-GitHub-Saver]]来在移动端把修改结果保存回 Github 云端。

但我很少会在桌面端以外的地方编辑 Wiki,在移动端我只是查询内容,所以这个缺点暂时不会影响我。

还有我还配置好了[[不把图片打包到 HTML 文件里|外置文件]]。这样自动打包的 HTML 版的 wiki 里的所有图片都直接引用 Github 上的图片,从而能够大量上传图片,但依然保持 HTML 文件的体积较小。

因为我之前是[[使用 Github Pages 来部署 TiddlyWiki]],所以 git 的历史记录里有很多对 index.html 的改动,为了去掉它们,减小仓库体积,我[[删掉了之前提交的所有 index.html|完全清除 GitHub 仓库里的某个文件]]。