前言

零、share你的Notion页面

一、注册域名

• 输入想要的域名，点击搜索

• 挑选想要的域名后缀
我的jimmyhjh.com刚刚被我注册了，选择一个想要的，加入购物车，然后付款，就可以了
不同的后缀区别不大，.com还是.cn，还是.我爱你都没啥区别，价格不同，然后.cn是国内顶级域名，.com国际顶级域名
一般注册.com的比较多，价格也算适中，5 60一年





 

二、在域名解析中添加一条记录

三、将域名转移到Cloudflare使用DNS服务

1. 进入网站 https://dash.cloudflare.com
• 用邮箱注册一个账号，然后登录
cloudflare支持中文，可以选择中文进行使用

2. 登录过后点击Add site 进行添加站点

3. 文本框输入我们注册好的域名后，点击Add site



出现这个页面



 

4. 点击 Add record



添加记录的填法是
Type选择CNAME
Name就是在你的域名前加的二级域名
• 输入@，那么就是域名本身，例如 jimmyhjh.com
• 输入其他，例如 jh，那么得到的网址就是 jh.jimmyhjh.com
• 我这个新注册的，直接输入@，得到jimmyhjh.com
IPv4 address 固定，输入notion.so

点击 Save 保存后，Continue 继续
 

5. 出现这个页面，我看过很多教程里都没有教怎么Change nameservers，所以我这里按它所说一步一步完成试试



 
Determine your registrar via WHOIS.
Log in to the administrator account for your domain registrar
• 这步就是找到你注册域名的地方，例如说我是在腾讯云注册的域名，那么我们直接登录到腾讯的域名控制面板中



 
• 点击管理



点击修改，将这两个改成Cloudflare要求的DNS
修改后显示



稍等一会儿后就修改成功了
返回Cloudflare显示如下界面



此处可点击 Finish later
*注，这步其实可以直接Get started，稍后做也行，我第6步其实就是在做这个,不过这个不是关键步骤
随后返回显示如下界面

6. 在Quick Start Guide里点击review setting
 
• Improve security on
• always use HTTPS on
• Optimize performance HTML
• Brotli on

7. DNS修改需要等几分钟，几分钟后Cloudflare会发一份邮件给你，通知你已经成功接到他们那了
或者你回Cloudflare的dashboard刷新一下，显示这个就说明你可以进行下一步操作啦

四、配置 Web Worker

Brooke Sargent

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

https://brookesargent.com/Notion-Fruition-Cloudflare-abd991e5e69848948673aabc9ffaae1d

五、Mismatch between origin and baseUrl (dev).问题

JimmyHuang's Writer Life

遇见这个问题的用户，大概都是使用Notion页面和Cloudflare来实现自定义域名的用户。 好久没用域名访问自己用Notion和Cloudflare实现的博客页面，结果载入非常慢，而且弹出了这么一个页面。 上网一查，一个相关内容都妹有，那就自己试试看。 看错误描述应该是与Url有关的，直接打开Notion页面的Share选项 结果发现，Share页面提供的公开地址，和上次的不一样了 上次是 这次打开后显示的地址明显不一样了，但是我忘记截图了，我已经在后面自定义了domain（后面会提 反正原因应该就是Notion提供的公开页面换地址了，导致Cloudflare实现重定向出了错 有了思路那就可以着手解决了。 回到之前这篇文章 使用Cloudflare为Notion公开页面自定义域名 从 然后把Notion URL for example.org修改成新的地址 结果没用，反正也尝试了很多方式，都失败了

https://jimmyhjh.com/Mismatch-between-origin-and-baseUrl-dev-67d5a945d421467c8444b8893fa225b1

六、附录代码

完整代码

七、参考文章

🌐 Using the Notion page as a personal website with your domain on Cloudflare

Hi, DEV people! 🙂 Today, I give you a handy step-by-step guide to help you set up a Notion page on your domain with free serve by Cloudflare reverse-proxy. A nice bonus out of the box is protection against DDoS attacks, secure access to resources, automatically renew a SSL cert by Cloudflare for your domain and DNS servers.

https://dev.to/koddr/using-the-notion-page-as-a-personal-website-with-your-domain-on-cloudflare-1pi7#on-the-cloudflare-side

如何为 Notion 公开页面自定义域名 | 一日一技 - 少数派

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。 文章代表作者个人观点，少数派仅对标题和排版略作修改。 Notion 可以将一个页面设置为公开显示，即我们可以将页面链接分享给任何用户，而他们在未注册、未登录 Notion 的前提下即可直接访问 Notion 公开页面。Notion 官方曾说可能会提供官方支持的「自定义域名」：即将 Notion 公开显示的页面绑定属于自己的域名，这一特点不仅可以方便用户直接定位你的 Notion 公开页面，还可以帮我们将 Notion 当作自己发布内容的地方，比如博客。不过 目前 Notion 尚未提供类似的功能。 在 Notion 官方支持自定义域名之前，我们可以用「曲线救国」的方法为 Notion 进行域名的自定义 -- 我们可以使用 Cloudflare 的 Web Workers 为 Notion 的 HTTP 请求进行手动改写，使得我们通过自己的自定义域名同样可以访问 Notion 的公开页面。 首先我们进入希望公开显示的 Notion 页面，点击右上角的 Share，并开启公共访问 Public Access，并将权限进行相应的设置。 复制 Notion 的公开页面链接，点击下拉菜单的 Copy Page

https://sspai.com/post/58441

如何使用 Notion 制作个人网站？

建一个page然后分享出去，基本可以满足以下功能：1.满足最基本的 Blog 记录属性 基于 Notion 去写 Blog ...

https://www.zhihu.com/question/342631132/answer/825361363

Notion 使用心得（3）-- 绑定自定义域名

notion 绑定域名 cloudflare workers Notion 使用心得（3）-- 绑定自定义域名 mayne gine 博客 python react

https://gine.me/posts/466ca19681634b09b123067f880ea396

Brooke Sargent

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

https://brookesargent.com/Notion-Fruition-Cloudflare-abd991e5e69848948673aabc9ffaae1d

Fruition - Build Your Next Website With Notion, For Free

Perfect for your portfolio, blog, landing page, or business site. Features: pretty links, custom domains, Google Fonts, SEO support, script injection.

https://fruitionsite.com