Apps2021 年 11 月 26 日 17:00

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

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

本文更新于 1373 天前，其中部分内容可能已经过时。

🔗 网站｜GitHub

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

特点

自定义域名
自定义 URL
深色模式
自定义字体
自定义 Javascript

今天看到 theBlock 分享的用 Fruition + Notion 搭建个人网站，简单写个小教程吧。

❞

准备工作

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

第一步：设置 Cloudflare 账号

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

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

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

第二步

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

如果你点击 Copy，则 URL 使用如下格式：

code.html

https://{workspace_name}.notion.site/{page_id}?v={view_id}
https://{workspace_name}.notion.site/{page_id}?v={view_id}
1

如果你点击 Copy link，则 URL 使用如下格式：

code.html

https://www.notion.so/{workspace_name}/{page_id}?v={view_id}
https://www.notion.so/{workspace_name}/{page_id}?v={view_id}
1

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

第三步

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

第四步

前往 Cloudflare 仪表板，依次点击 Workers → 管理 Workers → Create a Service，使用默认选项点击 Create Service 创建一个 Workers。然后点击快速编辑。
返回 Cloudflare 仪表板，依次点击 Workers → 添加路由，添加如下内容并保存。

第五步

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

一些问题

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

有同学在 Notion 中文社区反馈 fruitionsite.com 的 worker.js 失效了。今天我尝试用 fruitionsite.com 的 worker.js 部署成功了。实际上，fruitionsite.com 嵌套的 worker.js 是 https://fruition-stephenou.vercel.app。

如果部署失败的话，可直接前往 GitHub 复制 worker.js 并粘贴到 Cloudflare Workers，修改相应内容。

修改示例

code.javascript

/* 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 */
/* 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 */
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