使用 Vercel 托管建立自己的简悦外部链接资料库 · 建站方案

[Kenshin]

来自 简悦社区 用户 OverflowCat Vercel 版本。

描述

因为简悦基于 Local First 构建的存储体系，其导出文件全部都会存储在本地同步目录的 output 目录下。如果我们开启了导出 HTML 功能，则阅读模式下的文章就会离线备份到本地。

由于这样的机制，我们可以尝试把 output 路径下 HTML 文件托管到网络上，使用成熟的静态文件托管服务把 Local 的文档备份变成在线的资料库，而令人可喜的是，这样的静态托管服务很多，而且大多数都有免费的套餐，个人使用基本不会产生费用。

结合简悦的 自动化 和 外部链接 功能，我们也很容易在阅读文章的过程中，随时把标注的内容输出与输出的外部链接绑定其实，实现从阅读笔记到外部资料库的深度跳转。

源代码

https://github.com/OverflowCat/simpublish

教程

#3960 (comment)

演示

• https://simpublish-demo.vercel.app 密码：123456

视频

2022-05-22_19-38-11.mp4

功能一览

• 密码验证
• 阅读列表
• 正文（可直接读取 idx 或 title）
• 自定义样式
• 暗色模式
• 更多自定义

区别

官方资料库（阅读列表） · 静态部署 · 建站方案 的区别 👇

	阅读列表	文章页	密码	API	隐私	环境准备	难易程度	备注
官方方案	✔	✔	✔	✔	数据在用户的坚果云中，简悦只负责读取	不需要	需要授权以及开通权限 教程	不需要任何额外环境
静态部署方案	✔	✖	✖	✖	数据在用户的 Github	Git、Github、Vercel 等	简单	需要掌握 git 等操作环境
建站方案	✔	✔	✔	✖	数据在用户的 Github	Git、Github、Vercel 等	中等	需要掌握 git 等操作环境

进阶教程

#3960 (comment)

附录

1. 静态部署方案

2. 官方资料库方案

关联

• 使用静态网页托管建立自己的简悦外部链接资料库

[Kenshin]

教程

按照下面的教程，即便是没有任何编程基础的用户也能使用。

准备

1. Github 账户

2. Git 环境

3. Vercel 账户

设置

设置有两种方式：

1. Fork 方案 首选方案

   • 优点：当主程序更新后，可手动自动更新。
   • 缺点：相对复杂

2. Deploy 方案

   • 优点：简单
   • 缺点：当主程序更新后，无法自动化更新主程序

发布

进入 https://vercel.com/<你的 Vercel 账户>/<起的名字>/settings/git ，打开在 Github 上面的 repo

点击 Code 复制 repo 地址

在本地使用 git clone git@github.com:<username>/<title>.git Clone 到本地。

手动建立 _output （如果没有的话）

至此，全部的环境已经准备完毕，当 _output 出现 HTML 文件后，使用 git 提交后，进入 https://simpublish-demo.vercel.app 就能看到你刚才发布的内容了。

导出全文

手动方案

1. 通过简悦 手动导出 HTML 到本地 然后手动转移到 _output

   

2. 通过简悦 自动化 服务，当 加入稍后读自动导出 HTML 然后手动转移到 _output

   

自动化方案

可以利用 Hazel 或 Windows 的 DropIt 实现自动化导出到 _output。

下图是利用 Hazel 的一个方案。

cd /Users/xxx/simpublish-demo
git add .
git commit -m "auto save:Update some html pages."
git push origin main

导出标注

在任意阅读页面进行标注操作，然后自动导入到 Obsidian 并将外部链接指向刚刚设置的资料库。

#3960 (comment)

升级

1. Deploy 方案 页面最底部

2. Fork 方案 页面最底部

[Kenshin]

Deploy 方案

进入 https://github.com/OverflowCat/simpublish 并选择 Deploy

稍等一会会自动进入下面界面的页面

登录你的 Github 账户

稍等片刻后会让你选择 账户名称（一般默认即可），并给这个 Repo 起名，比如我的名字叫做 simpublish-demo，然后选择 Create，稍等片刻后，会进入下图的界面。

设置密码（因为自建资料库一般都是很个人的行为，所以默认是需要密码才能访问的），设置后选择 Deploy

稍等一会会进入下面的界面

然后就开始进入自动构建环节

2022-05-21_16-25-12.mp4

如果之前设置都正确的话，会看到下面的界面

点击进入 Dashboard，进入下图的界面并访问 Visit

进入 https://<你之前设置的名称>.vercel.app 比如我的就是 https://simpublish-demo.vercel.app 输入之前设定的密码

最终会看到下图的界面

升级

使用 https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/merging-an-upstream-repository-into-your-fork 手动方式（需要有一定的 git 操作能力）

cd simpread-demo
git pull https://github.com/OverflowCat/simpublish main

[Kenshin]

Fork 方案

进入 https://github.com/OverflowCat/simpublish 选择 Fork

起个名字叫 simpublish-demo-fork 后点击 Create fork

稍等片刻会自动进入 https://github.com/<你的 Gihbub 账户>/simpublish-demo-fork

进入 https://vercel.com/dashboard 选择 New Project

然后选择 simpublish-demo-fork 这个 Repo

稍等会进入下图的界面

除密码外其余都不需要设置，密码的 NAME 设置为 SIMPUBLISH_PASSWD 然后选择 Add

设置完毕后选择 Deploy，然后就开始进入自动构建环节

2022-05-21_16-25-12.mp4

如上述无误后，会提示 Congratulations 并进入下图界面

点击 Go to Dashboard 进入下图页面后选择 Visit

进入 https://<你之前设置的名称>.vercel.app 比如我的就是 https://simpublish-demo.vercel.app 输入之前设定的密码

最终会看到下图的界面

升级

当 https://github.com/OverflowCat/simpublish 更新后，可以通过 Fetch upstream 自动升级

[Kenshin]

使用

简悦中有一个功能叫做【外部链接】，为了让简悦的【外部链接】指向刚刚建立的资料库，需要做一些设置：

1. 首先需要安装/升级 Markdown 辅助增加插件 到最新版。

2. 然后配置【简悦】→【服务】→【外部链接】为 https://<site_name>.vercel.app/articles/{{id}} （ 根据上面的例子，这个链接应该是 https://simpublish-demo.vercel.app/articles/2073

3. 在【Markdown 辅助增加插件】的模板中可以使用 {{an_ext_uri}} 占位符作为外部链接。

将上面的内容复制到选项页 → 服务 → 定制导出

然后在 Markdown 辅助增强插件中就会实现下图的功能。

进阶

如果你是 Obsidian 用户，可以看此 一站式教程。

[SEAHIVE]

不好意思，请问下离线页面怎么才会存到GitHub？按照fork的步骤操作了，把文章加入到稍后读并没有出现在项目的output文件夹内呀0-0

[Kenshin]

这是知识库的功能，你可以看 一站式教程，但我不建议使用离线 HTML，push 时会比较慢。

仍有问题的话，请通过 https://github.com/Kenshin/simpread/issues/new/choose 新建 Issues 讨论。

[Kenshin]

@sche11

嗨，如果想通过简悦 → md → Github 的话，没必要这么折腾，简悦本就支持将阅读模式的内容以 md 形式导入到 Github，细节 请看这里。

[Kenshin]

进阶教程

自定义

• <repo>/src/custom.js 中设定了显示在文章列表顶部的文章名称和 slogan。

• <repo>/src/custom.css 定义了主题色，可以自行更改。并可在其后附上自定义的 CSS，将会全局生效。