假如我们拥有一个 ​​helloworld.com​​ 这样的域名,我们期望使用 Notion 笔记来搭建自己的博客站点,那么我们可以使用 Notion + CloudFlare 来组合完成。

1.将 ​​helloworld.com​​ 的域名 DNS 解析服务器替换为 CloudFlare 的DNS解析服务


2. CloudFlare 配置 CNAME 记录( helloworld.com → notion.so ")

基于 Notion + CloudFlare + 域名搭建博客(详细图文教程)_搭建博客


3. 在 Notion 创建博客首页,并且获取可访问的链接 https://www.notion.so/hello-world-6f9db3734f914e6b8b247142b3dbac14

基于 Notion + CloudFlare + 域名搭建博客(详细图文教程)_3d_02




4. 在 CloudFlare 配置 Worker

基于 Notion + CloudFlare + 域名搭建博客(详细图文教程)_safari_03

然后配置 notion-worker 的脚本内容

const MY_DOMAIN = "www.helloworld.com"
const START_PAGE = "https://www.notion.so/hello-world-6f9db3734f914e6b8b247142b3dbac14"

addEventListener('fetch', event => {
event.respondWith(fetchAndApply(event.request))
})

const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, HEAD, POST,PUT, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
}

function handleOptions(request) {
if (request.headers.get("Origin") !== null &&
request.headers.get("Access-Control-Request-Method") !== null &&
request.headers.get("Access-Control-Request-Headers") !== null) {
// Handle CORS pre-flight request.return new Response(null, {
headers: corsHeaders
})
} else {
// Handle standard OPTIONS request.return new Response(null, {
headers: {
"Allow": "GET, HEAD, POST, PUT, OPTIONS",
}
})
}
}

async function fetchAndApply(request) {
if (request.method === "OPTIONS") {
return handleOptions(request)
}
let url = new URL(request.url)
let response
if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) {
response = await fetch(`https://www.notion.so${url.pathname}`)
let body = await response.text()
try {
response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response)
// response = new Response(response.body, response)
response.headers.set('Content-Type', "application/x-javascript")
console.log("get rewrite app.js")
} catch (err) {
console.log(err)
}

} else if ((url.pathname.startsWith("/api"))) {
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: {
'content-type': 'application/json;charset=UTF-8',
'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'
},
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
response = new Response(response.body, response)
response.headers.set('Access-Control-Allow-Origin', "*")
} else if (url.pathname === `/`) {
let pageUrlList = START_PAGE.split("/")
let redrictUrl = `https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length-1]}`return Response.redirect(redrictUrl, 301)
} else {
response = await fetch(`https://www.notion.so${url.pathname}${url.search}`, {
body: request.body, // must match 'Content-Type' header
headers: request.headers,
method: request.method, // *GET, POST, PUT, DELETE, etc.
})
}

return response
}


示例博客:​​https://fruitionsite.com/​