Fruition - 为 Notion 页面自定义域名搭建网站

🔗 网站｜GitHub

Fruition 是一个免费开源的项目，通过 Cloudflare Workers 为 Notion 页面自定义域名。

特点

⦁ 自定义域名

⦁ 自定义 URL

⦁ 深色模式

⦁ 自定义字体

⦁ 自定义 Javascript

今天看到 theBlock 分享的

准备工作

准备一个 Notion 账号、一个 Cloudflare 账号、一个域名。

第一步：设置 Cloudflare 账号

1⃣️ 创建 Cloudflare 帐户并添加网站

2⃣️ 将域名服务器更改为 Cloudflare

3⃣️ 参考 管理 Cloudflare 中的 DNS 记录 为域名添加 A 记录。至少有一个 A 记录保证 Workers 正常工作。

第二步

在 Notion 中打开你想公开的页面，使用 Share 按钮复制链接，将链接粘贴到文本编辑器。

其中 {workspace_name} 可前往 Settings & Members → Settings → Domain 设置。这里直接点击 Copy 即可。

第三步

前往 fruitionsite.com，找到 Get Started 下的 Step 2: Customize and generate the script (2 mins) 。按照提示填入域名、第二步中的 Notion URL。然后复制粘贴到文本编辑器。

第四步

1⃣️ 前往 Cloudflare 仪表板，依次点击 Workers → 管理 Workers → Create a Service，使用默认选项点击 Create Service 创建一个 Workers。然后点击 快速编辑。

删除左边所有代码，粘贴第三步复制的代码，点击 保存并部署。

2⃣️ 返回 Cloudflare 仪表板，依次点击 Workers → 添加路由，添加如下内容并保存。

⦁ Route：yourdomain.com/*

⦁ Service：选择刚刚新建的 Workers

⦁ Environment：选择默认 Production

参考：

⦁ 了解 Cloudflare 仪表板

第五步

没有第五步！按照以上步骤操作后，我们就可以通过我们自己的域名愉快地访问 Notion 页面了。试试我刚刚创建的 wallpaper.apppie.me。

一些问题

如果没有更新 worker.js ，会导致 Mismatch 无法访问。

有同学在 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，修改相应内容。

修改示例

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