写点什么

基于 Notion + CloudFlare + 域名搭建博客

用户头像
张驰Terry
关注
发布于: 2021 年 04 月 18 日

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


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

rayne.ns.cloudflare.com

cosmin.ns.cloudflare.com


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

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

4.在 CloudFlare 配置 Worker


然后配置 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/

发布于: 2021 年 04 月 18 日阅读数: 15
用户头像

张驰Terry

关注

科技创造价值 2017.10.17 加入

专注于SAAS产品和技术架构已有9年时间,业务领域一直专注于CRM SaaS 和 Office SaaS,技术上侧重于前端,目前在前端领域有两个深入的重点,一为 协同软件相关的全栈开发,另一个是CRM Paas 相关的平台工具研发。

评论

发布
暂无评论
基于 Notion + CloudFlare + 域名搭建博客