Post Banner

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

Author

Skyler Shu

🔗 网站GitHub

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

特点

⦁ 自定义域名

⦁ 自定义 URL

⦁ 深色模式

⦁ 自定义字体

⦁ 自定义 Javascript

今天看到 theBlock 分享的

准备工作

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

第一步:设置 Cloudflare 账号

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

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

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

第二步

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

  • 如果你点击 Copy,则 URL 使用如下格式:

      html

      1
      https://{workspace_name}.notion.site/
  • 如果你点击 Copy link,则 URL 使用如下格式:

      html

      1
      https://www.notion.so/{workspace_name}/
  • 其中 {workspace_name} 可前往 Settings & MembersSettingsDomain 设置。这里直接点击 Copy 即可。

    第三步

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

    第四步

    1⃣️ 前往 Cloudflare 仪表板,依次点击 Workers管理 WorkersCreate 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.comworker.js 部署 wallpaper.apppie.me 成功了。实际上,fruitionsite.com 嵌套的 worker.jshttps://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