title: Notion绑定域名-你的笔记就是你的博客!
author: Tomatoro
comments: true
tags:

  • Blog
  • Notion
    top: 0
    abbrlink: c60ac904
    date: 2019-11-06 16:04:28

为Notion公共页面提供自定义域名可能是最受要求的功能之一，而且目前看起来还不支持这样做（可以理解）但是，这里有一个使用Cloudflare Workers的解决方案。

第一步: 将你的域名服务器代理至Cloudflare

Cloudflare需要控制您的DNS，因此请按照本指南将名称服务器切换到它们。不用担心，您的DNS设置将保持不变。

Changing your domain nameservers to Cloudflare
这一步很重要,大致可以理解为以下步骤:

  1. 将你原来的nameservers更改为Cloudflare提供给你的nameserver
    Notion绑定域名-你的笔记就是你的博客! - 图1

  2. 比如我的域名是在阿里云的, 进行如下操作即可(修改后需要过一段时间等Cloudflare发邮箱给你)
    Notion绑定域名-你的笔记就是你的博客! - 图2
    Notion绑定域名-你的笔记就是你的博客! - 图3

  3. 在域名解析里添加一条A的记录,IP随便填
    Notion绑定域名-你的笔记就是你的博客! - 图4

  4. 当收到邮件后,你的Cloudflare的Overview页会变成这样,就说明更改nameservers成功了
    Notion绑定域名-你的笔记就是你的博客! - 图5

  5. 在Cloudflare的DNS页里也添加一条A的记录,IP随便填但是要保证Proxy Status是通的
    Notion绑定域名-你的笔记就是你的博客! - 图6

第二步: 添加工程脚本

Big thanks to Mayne for writing this worker script. You can find the original in this gist.

以下是为你代理域的代码，因此请执行以下操作：

  1. Click on the ”Workers” tab
  2. Click “Launch Editor”
  3. On the left, click ”Add Script”
  4. Name it notion-worker

Notion绑定域名-你的笔记就是你的博客! - 图7

Once you have followed those steps, copy this script into that new file.

  1. const MY_DOMAIN = "example.com"
  2.     const START_PAGE = "https://www.notion.so/link/to/your/public/page"
  4.     addEventListener('fetch', event => {
  5.       event.respondWith(fetchAndApply(event.request))
  6.     })
  8.     const corsHeaders = {
  9.       "Access-Control-Allow-Origin": "*",
  10.       "Access-Control-Allow-Methods": "GET, HEAD, POST,PUT, OPTIONS",
  11.       "Access-Control-Allow-Headers": "Content-Type",
  12.     }
  14.     function handleOptions(request) {
  15.       if (request.headers.get("Origin") !== null &&
  16.         request.headers.get("Access-Control-Request-Method") !== null &&
  17.         request.headers.get("Access-Control-Request-Headers") !== null) {
  18.         // Handle CORS pre-flight request.
  19.         return new Response(null, {
  20.           headers: corsHeaders
  21.         })
  22.       } else {
  23.         // Handle standard OPTIONS request.
  24.         return new Response(null, {
  25.           headers: {
  26.             "Allow": "GET, HEAD, POST, PUT, OPTIONS",
  27.           }
  28.         })
  29.       }
  30.     }
  32.     async function fetchAndApply(request) {
  33.       if (request.method === "OPTIONS") {
  34.         return handleOptions(request)
  35.       }
  36.       let url = new URL(request.url)
  37.       let response
  38.       if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) {
  39.         response = await fetch(`https://www.notion.so${url.pathname}`)
  40.         let body = await response.text()
  41.         try {
  42.           response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response)
  43.           // response = new Response(response.body, response)
  44.           response.headers.set('Content-Type', "application/x-javascript")
  45.           console.log("get rewrite app.js")
  46.         } catch (err) {
  47.           console.log(err)
  48.         }
  50.       } else if ((url.pathname.startsWith("/api"))) {
  51.         response = await fetch(`https://www.notion.so${url.pathname}`, {
  52.           body: request.body, // must match 'Content-Type' header
  53.           headers: {
  54.             'content-type': 'application/json;charset=UTF-8',
  55.             'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36'
  56.           },
  57.           method: "POST", // *GET, POST, PUT, DELETE, etc.
  58.         })
  59.         response = new Response(response.body, response)
  60.         response.headers.set('Access-Control-Allow-Origin', "*")
  61.       } else if (url.pathname === `/`) {
  62.             let pageUrlList = START_PAGE.split("/")
  63.         let redrictUrl = `https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length-1]}`
  64.         return Response.redirect(redrictUrl, 301)
  65.       } else {
  66.         response = await fetch(`https://www.notion.so${url.pathname}`, {
  67.           body: request.body, // must match 'Content-Type' header
  68.           headers: request.headers,
  69.           method: request.method, // *GET, POST, PUT, DELETE, etc.
  70.         })
  71.       }
  73.       return response
  74.     }

现在，你已经添加了脚本，您需要更改顶部的两个const：

  1. MY_DOMAIN 表示你需要代理的域名-你自己的域名 ( E.G. example.com)
  2. START_PAGE 表示你代理的目标域名地址-notion的地址(E.G.https://www.notion.so/link/to/your/public/page)

保存你的脚本,然后返回上一层

第三步: 添加一个通配符路径才处理你的所有流量

Notion绑定域名-你的笔记就是你的博客! - 图8

在这里添加你的域名和通配符,然后在你Worker这一栏选择你刚刚配置的脚本名就可以了

  1. example.com/*

到这里为止就大功告成了! 这时候你访问你自己的域名就可以看到notion的页面啦, 以后用notion写博客也可以使用自己的域名了, 可谓是相当酷炫了!

💎最后,这里有我的示例tomatoro.space