Fruition - 为 Notion 页面自定义域名搭建网站
Skyler Shu
Fruition 是一个免费开源的项目,通过 Cloudflare Workers 为 Notion 页面自定义域名。
特点
⦁ 自定义域名
⦁ 自定义 URL
⦁ 深色模式
⦁ 自定义字体
⦁ 自定义 Javascript
今天看到 theBlock 分享的
准备工作
准备一个 Notion 账号、一个 Cloudflare 账号、一个域名。
第一步:设置 Cloudflare 账号
3⃣️ 参考 管理 Cloudflare 中的 DNS 记录 为域名添加 A 记录。至少有一个 A 记录保证 Workers 正常工作。
第二步
在 Notion 中打开你想公开的页面,使用 Share 按钮复制链接,将链接粘贴到文本编辑器。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/53f5bdd0-2940-4522-8a9d-ab033b5454fd/%E6%9C%AA%E5%91%BD%E5%90%8D.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T201650Z&X-Amz-Expires=3600&X-Amz-Signature=22fc96ca5185e91023b1bbd0b547dc88ba6c187e0e21fdb1b13c16d2bee0f760&X-Amz-SignedHeaders=host&x-id=GetObject)
html
1
https://{workspace_name}.notion.site/
html
1
https://www.notion.so/{workspace_name}/
其中 {workspace_name} 可前往 Settings & Members → Settings → Domain 设置。这里直接点击 Copy 即可。
第三步
前往 fruitionsite.com,找到 Get Started 下的 Step 2: Customize and generate the script (2 mins) 。按照提示填入域名、第二步中的 Notion URL。然后复制粘贴到文本编辑器。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/d9279bc3-d8de-4602-9a4d-2c1bfec6b01e/1111.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T201650Z&X-Amz-Expires=3600&X-Amz-Signature=415a5ba74fa49926551617dd1a0f453c97121d12b142994c842992e654e17a83&X-Amz-SignedHeaders=host&x-id=GetObject)
第四步
1⃣️ 前往 Cloudflare 仪表板,依次点击 Workers → 管理 Workers → Create a Service,使用默认选项点击 Create Service 创建一个 Workers。然后点击 快速编辑。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/4d8d6ec2-7f72-4d01-9875-85907be2c261/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T201650Z&X-Amz-Expires=3600&X-Amz-Signature=4879b8737a4781ca898b359c22b1f2bf0fb5b0ce5566e3247d70d1761a5ee88b&X-Amz-SignedHeaders=host&x-id=GetObject)
删除左边所有代码,粘贴第三步复制的代码,点击 保存并部署。
2⃣️ 返回 Cloudflare 仪表板,依次点击 Workers → 添加路由,添加如下内容并保存。
⦁ Route:yourdomain.com/*
⦁ Service:选择刚刚新建的 Workers
⦁ Environment:选择默认 Production
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/f2c3b849-35bb-4699-a699-a906829dddf8/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T201650Z&X-Amz-Expires=3600&X-Amz-Signature=86e80e541ca8ec472b3506ec028eb049d63d6ca9a335174e64e4e7c5ec34a0d1&X-Amz-SignedHeaders=host&x-id=GetObject)
参考:
第五步
没有第五步!按照以上步骤操作后,我们就可以通过我们自己的域名愉快地访问 Notion 页面了。试试我刚刚创建的 wallpaper.apppie.me。
一些问题
如果没有更新 worker.js ,会导致 Mismatch 无法访问。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/ba202b56-3aa9-4ee0-af3f-92c2911be0e2/Xnip2021-11-26_13-30-12.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T201650Z&X-Amz-Expires=3600&X-Amz-Signature=0bdbf46342337960ce96438566728f2ec6a191c0b1f033fe2ad3bdb657f63e02&X-Amz-SignedHeaders=host&x-id=GetObject)
有同学在 Notion 中文社区反馈 fruitionsite.com 的 worker.js 失效了。今天我尝试用 fruitionsite.com 的 worker.js 部署 wallpaper.apppie.me 成功了。实际上,fruitionsite.com 嵌套的 worker.js 是 https://fruition-stephenou.vercel.app。
如果部署失败的话,可直接前往 GitHub 复制 worker.js 并粘贴到 Cloudflare Workers,修改相应内容。
修改示例
javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
/* CONFIGURATION STARTS HERE */ /* 第 1 步: 填入域名 */ const MY_DOMAIN = 'yourdomain.com'; /* * 第 2 步:填入 Notion 页面 URL * 左边的是超链接,不需要斜线 / * 右边边的是 Notion Page ID * 如果只需单页面保留第一行即可 */ const SLUG_TO_PAGE = { '': 'Notion_Page_ID', 'post': 'Notion_Page_ID', 'about': 'Notion_Page_ID', }; /* 第 3 步:输入标题和描述 */ const PAGE_TITLE = '标题'; const PAGE_DESCRIPTION = '描述'; /* 第 4 步:输入谷歌字体名称,你可以从 https://fonts.google.com 选择 */ const GOOGLE_FONT = ''; /* 第 5 步:输入你想要的任何自定义 script */ const CUSTOM_SCRIPT = ``; /* CONFIGURATION ENDS HERE */
有任何问题的话,欢迎在 AppPie 频道、theBlock 频道 评论反馈。
📮 订阅 Telegram 频道 @AppPie 👥 加入 Telegram 群组 @AppPieGroup