使用 Netlify 托管建立自己的简悦外部链接资料库 · 静态部署方案

[kchen0x]

描述

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

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

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

下面我们来看看如何实现。

选择静态托管服务

前面提到，我们需要使用一个静态网页托管服务来帮助我们部署自己的外部资料库。这样的服务有很多，说几个我个人挑选托管服务的决策点：

• 尽量要支持 CLI 的方式进行部署，这样意味着我们可以通过代码的方式进行自动化的部署，而不必每次都去到服务网站操作；

• 尽量要支持 HTTPS，保证和自己资料库通讯的安全性以及主流浏览器的绿锁认证；

• 尽量能支持自定义域名，这样如果自己有域名可以分配一个专用的域名解析到资料库中，这样如果自己以后的服务需要进行迁移的话，不管换成了什么方案，只要把域名解析到新的服务上，可以做到无缝迁移。

最终选择的服务是 Netlify。（本文不会深度评测每个服务的各种优缺点、部署与构建速度、操作便捷度等）本文主要介绍思路，原理一致，大家大可选择其他自己喜欢的托管服务。

演示

下面的链接就是一个已经搭建好的外部链接资料库 Demo 页面：

sr-demo-site.netlify.app

教程

准备

• 确认自己的简悦本地同步目录中有 output 文件夹，且通过导出服务将 HTML 文件导出到该目录
• 本地电脑中有 NodeJS 环境，如果没有可以根据官方教程安装
• 注册 Netlify，可通过 Github 账号一键登录

配置部署服务

创建网站

创建完 Netlify 的账号后，网站会引导用户创建 Team 以及 Sites。 Team 的名字根据自己的情况随意，site 就是我们即将建立的资料库，默认情况下有三种创建方式：

由于我们不需要使用任何工程方式构建网站，所以选择【手动部署】即可。

创建完成之后，Netlify 会给出一个大大的上传按钮，让我们通过拖拽的方式部我们的文件：

我们现在可以尝试把 output 目录上传。上传成功之后就会自动生成一个项目的在线地址： https://<site_name>.netlify.app/，点击这个地址，你会发现“404 Page Not Found”，这是因为 output 目录下没有 index.html 文件造成的，不用担心。此时找到 output 目录下的任意一个 HTML 文件，如 03-<title>.html，把文件名拼接到网页 URL 后面就可以发现文件已经成功托管了。

注：<site_name> 可以在 【Site setting】→【Site Information】→ 【Change site name】中调整。

通过命令行部署

如果每次部署都需要通过打开网页，上传整个 output 目录来完成，必然十分的麻烦，因此下面设置通过命令行的方式来部署网站。

Netlify 官网教程给出了非常详细的 CLI 部署手册，我简要地讲解一下其中的核心步骤：

安装

注：前提，本机已经安装了 NodeJS 环境

通过 npm 全局安装 Netlify 的命令行管理工具：

npm install netlify-cli -g

登录

通过以下命令调用网页端授权，让命令行工具获得你的权限：

netlify login

绑定

Netlify 有一个很有趣的功能，是可以把本地的某个目录和 Netlify 站点进行绑定，只需要进入到 output 目录，执行：

netlify link

然后选择你的站点，就可以把output 目录和站点绑定起来了，以后在 output 目录下执行部署命令，可以直接部署到指定的站点。

部署

Netlify 的部署分为两种情况，部署出一个草稿版本和部署到生产环境，我们的项目很简单，没有其他的构建过程，因此直接部署到生产环境即可，进入到 output 目录，执行：

netlify deploy --prod -d .

根据提示确认：本次变更的文件都已同步到 Netlify，站点文件都有更新到 CDN，部署成功。

自动化部署

到目前为止，我们已经实现了通过命令行一行命令部署 output 目录到资料库网站，那么我们也可以选择通过各式各样的自动化工具来自动执行部署命令进行部署。例如 windows 计划任务，linux/mac crontab；或者通过 windows 的 dropit，macos 的 Hazel/keyboard maestro 等工具监听 output 目录，当发生变化的时候就执行一次部署等。

这里的思路不一而足，和每个的人电脑环境相关，下面我介绍一下在 Mac 上使用系统自带的定时任务工具 crontab 自动定时部署的方案供大家参考。首先进入定时任务的编辑模式

crontab -e

然后向任务表中添加任务：

* 20-1/1 * * * cd <output_path> && netlify deploy --prod -d .

这样，每天晚上8点到凌晨1点，每隔一个小时就会进行一次自动部署。

保存并退出后，可以通过下面的命令确认自动所有的定时任务清单：

crontab -l

这里可以额外给大家补充一下 crontab 的格式：

分 时 日 月 星期 要运行的命令

• 第1列分钟1～59
• 第2列小时1～23（0表示子夜）
• 第3列日1～31
• 第4列月1～12
• 第5列星期0～7（0和7表示星期天）
• 第6列要运行的命令

几个典型的任务示例：

# 每1分钟执行一次myCommand
* * * * * myCommand
 
# 每小时的第3和第15分钟执行
3,15 * * * * myCommand
 
# 在上午8点到11点的第3和第15分钟执行
3,15 8-11 * * * myCommand
 
# 每隔两天的上午8点到11点的第3和第15分钟执行
3,15 8-11 */2  *  * myCommand
 
# 每周一上午8点到11点的第3和第15分钟执行
3,15 8-11 * * 1 myCommand
 
# 晚上11点到早上7点之间，每隔一小时执行
* 23-7/1 * * * myCommand

简悦的外部链接配置

简悦中有一个功能叫做【外部链接】，使用的简悦的开发者服务器部署的一个需要鉴权的托管（即官方托管），现在我们使用 Nerlify 做了托管，为了让简悦的【外部链接】功能生效需要做一些改动：

1. 首先需要安装/升级 Markdown 辅助增加插件到最新版。
2. 然后配置【简悦】→【服务】→【外部链接】为 https://<site_name>.netlify.app/{{id}}-{{title}}.html
3. 在【Markdown 辅助增加插件】的模板中可以使用 {{an_ext_uri}} 占位符作为外部链接。

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

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

更高阶的用法

因为我们使用了静态页面托管服务，只要我们准备好对应的 index.html 和 404.html 就可以实现【资料库】的索引，找不到对应文章的提示等。

这些过程可以在本地通过对 simpread_config.json 文件的解析来构建生成，这里仅提供了一个脑洞，等待大家去填空。

---

以下是简悦官方的补充说明：

区别

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

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

附录

1. 建站方案

2. 官方资料库方案

关联

1. 各种静态服务的对比 请看这里。

2. 占位符 {{an_ext_uri}} 更多用法 请看这里。

3. 如果你是 Obsidan 用户，可直接看 此教程 来实现标注自动导入功能。（包含：Markdown 辅助增加插件 以及 自动化辅助增强插件的配置）

[Kenshin]

选择静态托管服务

前面提到，我们需要使用一个静态网页托管服务来帮助我们部署自己的外部资料库。这样的服务有很多，我挑几个比较有名的给大家介绍一下：

• GitHub Pages
  • 优点
    • 自带域名可 https 访问
    • 可配置自定义域名
  • 缺点
    • 无法给自定义域名配置 SSL
• aerobatic：Bitbucket 旗下的静态网站托管服务。
  • 优点
    • 可以使用 CLI 上传代码
    • 支持自动构建（Continuous Deployment）
    • 可以自定义域名但是是收费功能，自定义域名支持 https 且不需要提供证书，它会帮你生成一个
• surge.sh
  • 缺点
    • 只能使用 CLI 上传代码
    • 支持自定义域名，但开启 SSL 是收费功能且需要自行上传证书
  • 优点
    • 支持 200. html —— 适用于使用 History API 的 SPA
• Firebase Hosting
  • 缺点
    • 只能使用 CLI 上传代码
    • 有被墙的风险……
  • 优点
    • 支持自定义域名并支持一键开启 https
    • 支持重定向（Redirects）和重写（Rewrites）功能（当网站使用 History API 时特别有用
• Netlify（本文推荐）
  • 优点
    • 可以使用 CLI 上传代码
    • 支持自定义域名且自定义域名支持一键开启 https（证书来自 Let's Encrype）
    • 支持强制让用户通过 https 访问网站（开启后此功能后，http 的访问一律会 301 跳转到 https
    • 支持自动构建
    • 支持重定向（Redirects）和重写（Rewrites）功能
    • 数据通过 HTTP2 协议传输
    • 提供 webhooks 与 API
• Vercel：原来叫做 Now
  • 优点
    • 可以使用 CLI 上传代码，或者链接一个 Git 仓库
    • 不仅提供静态网站托管，同时也支持托管 Node.js 服务
    • 支持自定义域名且自定义域名支持一键开启 https（证书来自 Let's Encrype）
    • 数据通过 HTTP2 协议传输
    • 提供 API