用 Fruition + Notion 搭建个人网站

类别

长文

最后更新

Nov 28, 2021

🔗

Demo | GitHub | 作者主页

🏋️‍♂️ 项目特性 🛠 新版 worker 代码及修改步骤 👉 还不会用 Cloudflare 或 Workers？

🏋️‍♂️ 项目特性

Fruition 是开发者 Stephen Ou 制作的一段开源的代码，将该代码部署在 Cloudflare Workers 上，就可以将 Notion 的公开页面发布为普通网页。

免费开源

自定义域名及子页面别名

支持浅色和深色模式

支持 Google Fonts

支持 SEO

🛠 新版 worker 代码及修改步骤

几个月前 Notion 将公开页面的分享域名从 .so 更改为 .site，导致使用旧版 Fruition 代码时会出现 Mismatch between origin and base URL (dev) 的错误。目前，demo 网站上的代码生成器可能不是最新版本，因而仍有部分朋友遇到报错的问题。推荐直接使用 GitHub 里的 worker.js 中的新版代码来部署，以下为地址和修改步骤说明。

fruitionsite/worker.js at master · stephenou/fruitionsite

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/stephenou/fruitionsite/blob/master/worker.js

（重要）输入域名

（重要）第一行必填 Notion 主页面 ID，后几行选填自定义别名和对应 Notion 页面 ID

（推荐）为 SEO 添加站点名称和描述

（选填）添加 Google Font 字体名

（选填）添加其他脚本

👉 还不会用 Cloudflare 或 Workers？

如果你还不清楚如何使用 Cloudflare 或 Workers，请参考:

（简明教程）Newlearnerの自留地电报消息

Newlearnerの自留地

Cloudflare #Notes #Blog ☁️ 为 Notion 主页自定义域名并绑定 Cloudflare CDN 在大半年前就从一个日常关注的博主那里了解了这套方案是如何运作的，一两星期之前还和《一飞周报》的主编谈到了。没想到因为最近国产 Notion 的热度直接或间接导致 Notion 全面被墙（猜测，一点关系没有我是不信的），和大家简单分享一下 👉 原理：利用 Cloudflare 的 Workers 做代理，将 JS 中的 notion.so 全部替换成自己的域名，并利用 Cloudflare CDN 实现国内访问。这并不是什么新鲜东西，之前给大家介绍了 JSProxy 和 WorkersProxy 👉 具体步骤： 1️⃣ 申请 Cloudflare 账户并托管域名，将自己的 Notion 主页 Share 得到 Link 2️⃣ 添加 A 记录或者 CNAME 记录，前者 IP 随意填写并点亮 CDN，后者可指向 notion.so 3️⃣ 添加 Workers，复制文章中的代码并粘贴，第一行填写 2️⃣ 得到的域名，第二行填 Notion Share Link 并保存 4️⃣ 回到 Workers 添加路径，路由填写 2️⃣ 得到的域名此时打开这个域名，就会成功访问自己的 Notion 主页了。但这套方案有弊端，即不能登录互动，只作为展示用途。昨晚得知 Notion 被墙，为这个好工具感到可惜 📘 关联阅读： 1⃣️ Notion 背后的先锋 2⃣️ 使用 Fruition 搭建 Notion 个人网站频道：@NewlearnerChannel

https://t.me/NewlearnerChannel/4639

（详细教程）Bie13 博客

利用notion免费搭建自定义域名主页

https://bieb13.com/notioncustomizepases

⚠️

注意：

GitHub repo 里的其他文件只是为了实现 demo 网站里的代码自动生成器，真正需要使用的代码及配置步骤全部在 worker.js 里

使用 Fruition 需要自己维护，且 Notion 仍在持续开发中，无法保证代码一直有效。如果你需要更稳定的实现方案，可以考虑其他付费服务，如 super.so

其他 Notion 用户无法评论, 原因是 notion.so 域名下的登录信息是无法用在你的域名上的。

通过你的主页访问其他 notion.so 页面时，显示的链接也是你的域名。这是由于 Workers 会接管所有 notion.so 的访问，然后转到你域名上。如果希望避免这样，在粘贴其他 Notion 页面地址时，选择 .site 域名并以 URL 链接形式粘贴（即不选 Mention page 或 Link page，也不用文本进行超链接）。如果觉得不够美观，可以在粘贴 URL 之后编辑链接的文本。

→ 3、4 点来自 AFuture，前往他的文章查看他推荐的解决办法。