使用Cloudflare和notion搭建自己的博客

欢迎访问我的个人博客 ximikang.icu

使用Cloudflare和notion搭建自己的博客

使用过Nation的小伙伴一定在某个时刻冒出过这样子的想法:这个笔记应用这么好用,而且是基于Web端开发的,那为什么不可以用他来作为我自己的博客呢?这样我是不是可以用记笔记的方式来快速的实现和维护自己的博客了呢?

我搭建的个人博客，欢迎大家访问。https://notion.ximikang.icu/

购买一个域名并将域名转移到Cloudflare

首先我们需要将域名的域名服务器设置为 Cloudflare 的域名服务器，这样就可以使用 Cloudflare 的 DNS 服务了。

注册Cloudflare ，然后在这里添加自己的域名：

将你的域名指向notion

切换到 dns 页面，添加一条 CNAME 记录，如果你自己的二级域名为 blog.xxx.com，那么名称那就填 blog，目标填 Notion 的域名，保存。

或者需要将主域名设置为则为

注意需要将代理状态切换至已代理，这样才能用cloudflare的免费CDN。

添加后下方就会显示已添加的域名，点击已添加的域名进入设置页面。

配置Cloudflare的Web Worker

配置workder使得我们访问我们上面定义的http请求可以自动改写。

1. 首先管理Workers，新建一个对应的notion的worker。

   

   获取notion页面中的链接ID，如图中的id需要在worker配置中使用。

   

   创建worker后编辑worker,将如下代码复制到worker中。

   /* CONFIGURATION STARTS HERE */
     
     /* 添加域名 notion.ximikang.icu*/
   
     const MY_DOMAIN = '';
     
     /*
           添加刚才的id
           例如：
           '': 'bb1678c7e8fe47b29bf49aac08aebbb',
      */
     const SLUG_TO_PAGE = {
       '': '',
     };
     
     /* 添加主页面的标题和描述  */
     const PAGE_TITLE = '';
     const PAGE_DESCRIPTION = '';
     
     /* 可以选择显示的字体 https://fonts.google.com 
       例如：const GOOGLE_FONT = 'Noto Sans Simplified Chinese';*/
     const GOOGLE_FONT = '';
     
     /* 添加自定义脚本，可以添加Google Analytics */
     const CUSTOM_SCRIPT = ``;
     
     /* CONFIGURATION ENDS HERE */
     
     const PAGE_TO_SLUG = {};
     const slugs = [];
     const pages = [];
     Object.keys(SLUG_TO_PAGE).forEach(slug => {
       const page = SLUG_TO_PAGE[slug];
       slugs.push(slug);
       pages.push(page);
       PAGE_TO_SLUG[page] = slug;
     });
     
     addEventListener('fetch', event => {
       event.respondWith(fetchAndApply(event.request));
     });
   
     function generateSitemap() {
       let sitemap = '';
       slugs.forEach(
         (slug) =>
           (sitemap +=
             'https://' + MY_DOMAIN + '/' + slug + '')
       );
       sitemap += '';
       return sitemap;
     }
     
     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);
       url.hostname = 'www.notion.so';
       if (url.pathname === '/robots.txt') {
         return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml');
       }
       if (url.pathname === '/sitemap.xml') {
         let response = new Response(generateSitemap());
         response.headers.set('content-type', 'application/xml');
         return response;
       }
       let response;
       if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) {
         response = await fetch(url.toString());
         let body = await response.text();
         response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response);
         response.headers.set('Content-Type', 'application/x-javascript');
         return response;
       } else if ((url.pathname.startsWith('/api'))) {
         // Forward API
         response = await fetch(url.toString(), {
           body: url.pathname.startsWith('/api/v3/getPublicPageData') ? null : request.body,
           headers: {
             'content-type': 'application/json;charset=UTF-8',
             'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36'
           },
           method: 'POST',
         });
         response = new Response(response.body, response);
         response.headers.set('Access-Control-Allow-Origin', '*');
         return response;
       } else if (slugs.indexOf(url.pathname.slice(1)) > -1) {
         const pageId = SLUG_TO_PAGE[url.pathname.slice(1)];
         return Response.redirect('https://' + MY_DOMAIN + '/' + pageId, 301);
       } else {
         response = await fetch(url.toString(), {
           body: request.body,
           headers: request.headers,
           method: request.method,
         });
         response = new Response(response.body, response);
         response.headers.delete('Content-Security-Policy');
         response.headers.delete('X-Content-Security-Policy');
       }
     
       return appendJavascript(response, SLUG_TO_PAGE);
     }
     
     class MetaRewriter {
       element(element) {
         if (PAGE_TITLE !== '') {
           if (element.getAttribute('property') === 'og:title'
             || element.getAttribute('name') === 'twitter:title') {
             element.setAttribute('content', PAGE_TITLE);
           }
           if (element.tagName === 'title') {
             element.setInnerContent(PAGE_TITLE);
           }
         }
         if (PAGE_DESCRIPTION !== '') {
           if (element.getAttribute('name') === 'description'
             || element.getAttribute('property') === 'og:description'
             || element.getAttribute('name') === 'twitter:description') {
             element.setAttribute('content', PAGE_DESCRIPTION);
           }
         }
         if (element.getAttribute('property') === 'og:url'
           || element.getAttribute('name') === 'twitter:url') {
           element.setAttribute('content', MY_DOMAIN);
         }
         if (element.getAttribute('name') === 'apple-itunes-app') {
           element.remove();
         }
       }
     }
     
     class HeadRewriter {
       element(element) {
         if (GOOGLE_FONT !== '') {
           element.append(`
           `, {
             html: true
           });
         }
         element.append(``, {
           html: true
         })
       }
     }
     
     class BodyRewriter {
       constructor(SLUG_TO_PAGE) {
         this.SLUG_TO_PAGE = SLUG_TO_PAGE;
       }
       element(element) {
         element.append(`
   Powered by Fruition
         ${CUSTOM_SCRIPT}`, {
           html: true
         });
       }
     }
     
     async function appendJavascript(res, SLUG_TO_PAGE) {
       return new HTMLRewriter()
         .on('title', new MetaRewriter())
         .on('meta', new MetaRewriter())
         .on('head', new HeadRewriter())
         .on('body', new BodyRewriter(SLUG_TO_PAGE))
         .transform(res);
     }

2. 配置对应的路由，也就是访问我们的域名后，需要执行我们定义的notion worker

   

   路由为我们的域名加上/*

   Worker为刚才新建的worker

   

   现在你的个人博客就大功告成了

添加Google Analytics脚本监控你的网站

进入Google Analytics后台 ，点击左上侧管理，选择需要添加代码的网站对应的账号和媒体资源后，依次点击媒体资源下的管理-数据流，可以看到如下所示界面：

将如下的代码添加到worker中的自定义片段中就可以对你的博客进行访问监控。