category
tags
type
slug
date
status
summary
icon
password
前言
你是否也想要搭建一个博客,然后专注于写作。但碍于网站建设的技术门槛、又或者登录CSDN、Wordpress这类博客平台的步骤繁杂,导致你最后没能坚持这个写作的习惯。
这套方案让你像在写日记一样,写作发布自己的博客网站,分享有趣的内容,让更多的人关注到你。搭建的速度相当快,我的网站搭建效果如下:
方案特点
- 页面排版完全自定义,依托于Notion强大的模板功能,Block嵌套功能,你可以实现多种页面布局方式。
- Notion在网页端、APP端的编辑效果是实时同步的,你在Notion中编辑你的笔记本时,这个博客网站的内容也会实时同步。
- 省钱:不用自己购买服务器,只需要购买一个域名(当然也可以购买免费的),也可以直接使用Notion自带的访问域名。例如我的notion自带域名,然而有时候这个域名会无法访问。(https://tanghh.notion.site/tangly1024-tk-fcd673e000e74bb79667918f94eed2d8)
自定义域名绑定Notion
这里可以通过 Fruition + CloudFlare Workers的方式,将Notion的分享域名 xxx.notion.site 转发到你的自定义域名上。
工具介绍
- Notion: 由国外华人团队开发的,(应该是)最强笔记软件,并支持将笔记页面分享到网上。
- CloudFlare :提供专业的域名托管、反向代理、CDN加速、免费的SSL证书等网络服务,借助它我们可以快速地将我们的网站发布到全球各地。并支持执行Javascript脚本(Workers机制),借助这一机制,我们可以在用户访问的URL地址上实时渲染内容。
- Fruition: 一段简短开源的JavaScript脚本,借助CloudFlare的Workers机制,在用户访问域名时,将域名内容映射到对应的Notion笔记页面。
操作步骤
Step 0: 将笔记发布到网络
- 在您想要公开访问的页面上启用“公开访问权限”,也就是 Share On the Web,这样别人可以通过你的notion域名访问你的网页。
例如这个页面Notion的共享域名是:https://tanghh.notion.site/Fruition-Notion-2d2f8205cc3c4c6cba281ba170a75ff4 ;
- 注册一个域名
可以在阿里云、腾讯云这些域名大厂上购买域名,国内大厂有保障。
我起初是在腾讯云上购买并且备案的域名、后来腾讯涨价了,我就转投Namesilo购买。可参考下文,在国外的Namesilo平台购买一个平价的,保护所有者隐私的域名的域名
Step 1: 设置 CloudFlare 账号 (5 分钟)
- 填写你的域名,即便你想要使用二级子域名(blog.tangly1024.com), 这里仍然要填写的是一级域名,tangly1024.com
- 选择免费方案
- 如果你的域名还没有任何一条A类解析记录,需要在这里手动添加一条记录,Name是根域名,Content填写
1.1.1.1
。然后点击继续,跳转到DNS配置页面。 - 若您用的是子域名,请添加一条记录 Name 是子域名且Content为
1.1.1.1
。
现在配置1.1.1.1似乎会报错提示1034 或者1014,原因是cloudflare出于安全考虑,限制了回源IP,若出现此问题,可以参照此篇《CloudFlare 1034错误》解决
- 复制以下两个 2 域名名称服务器
nameservers
, 以.ns.cloudflare.com
结尾的那两个
- 将名称服务器替换到你的域名服务商的配置中
我这里用的是腾讯的域名后台,其他域名也一样。腾讯的域名主要是认证备案方便一些。
域名右侧菜单→更多→修改DNS ;
等待cloudflare完成NS检查并激活后的邮件
踩坑:腾讯域名的DNSPod中修改NS,导致CloudFlare检测不到NS,需要直接到https://www.dnspod.cn/这个网站修改腾讯云的DNS记录
更新NS可能需要72小时的全球生效时间
腾讯云DNS修改说明:由于各地网络运营商存在缓存,修改后一般 1~2 个小时内刷新生效, 最长需要 72 小时,请您耐心等待。
- 稍等一分钟, 点击Done完成,检查名称服务器配置
- 选择灵活的 SSL/TLS 加密模式(Flexible)
- Flexible:当我们的源网站没有配置 HTTPS 支持时,启用这个选项,Cloudflare 会在回源的时候通过 HTTP 协议访问我们的网站。
- Full:当我们的源网站支持 HTTPS,但是 HTTPS 证书和域名不匹配或者是自签名证书时,Cloudflare 会通过 HTTPS 协议访问源网站,但不会验证证书,也就是说,即使我们的源网站提供的 HTTPS 证书不受浏览器信任,Cloudflare 也会通过 HTTPS 回源网站。
- Full(strict):当我们的源网站支持 HTTP ,并且证书有效时(未过期且受信任)。Cloudflare 会通过 HTTPS 协议访问源网站,并在每个请求过程中验证证书。
- SSL 中设置了 Flexible,CDN 以 HTTP 协议回源网站。
- 源网站支持 HTTPS,并且设置了通过 HTTP 协议访问时,自动跳转到 HTTPS 协议。
- SSL 中选择 Full(strict) 或者 Full(strict),让 CDN 回源的时候使用 HTTPS 的方式回源,没有 HTTP 什么事了,就不会跳来跳去了
- 源网站不设置 HTTPS 支持或者 不设置 HTTP 跳转 HTTPS,让 Cloudflare 回源的时候使用 HTTP 方式获取资源。
这里的类型若选择错误,域名会出现“重定向次数过多”而不能访问的问题。(解决方案点击展开)
CloudFlare 造成重定向的次数过多的原因
当网站开启了 CloudFlare 服务,用户访问我们的网站时,其实访问的离用户比较近的 Cloudflare 服务器,Cloudflare 再代理用户请求我们的源服务器,以达到加速和保护源服务器的目的。Cloudflare 代理用户请求我们源服务器获取网页资源的过程叫回源。
Cloudflare 造成循环重定向的错误就出在了回源的过程中,造成这种错误的原因就是 http 和 https 之间的重定向。
Cloudflare Crypto 的 SSL 中有 4 个选项(如下),其中 Off 就是不启用 SSL,通过 HTTP 协议访问网站。另外 3 种是通过 HTTPS 协议访问网站。
Cloudflare CDN 配置
了解了上面各个设置的功能,我们来看一下 Cloudflare 的循环重定向问题是怎么出现的,在 Cloudflare 中开启了 SSL 后,访问网站时出现循环重定向需满足下面两个条件:
到这里,可能就有朋友发现问题了,我们访问 Cloudflare 的 CDN 服务器的时候,是通过 HTTPS 访问的,CDN 访问源网站的时候,是通过 HTTP 访问的,源网站上 HTTP 又自动跳转了 HTTPS,完美的一个循环重定向。重定向的次数多了,浏览器就撂挑子报出了 ERR_TOO_MANY_REDIRECTS 的错误。
CloudFlare 造成重定向的次数过多问题的解决办法
知道了循环重定向的原因,我们也就知道了怎么解决这个问题,通过测试,下面的两种设置方法都可以解决 Cloudflare 循环重定向的问题。
修改了 CloudFlare 设置后,可能需要过几分钟或清理浏览器缓存后才能生效。
除了 Cloudflare,使用其他 CDN 提供商的时候,也可能会出现这个问题,如果设置了 CDN 后,遇到了 Chrome 报重定向次数过多的问题,可以通过上面的思路查找问题。如果你在使用其他 CDN 的时候也遇到了类似的问题,欢迎在评论中提出,让更多的朋友看到。
如果你的服务器有自带的SSL证书,这里可选完全(Full)
- 可选:开启永远使用 HTTPS,自动缩小化以及Brotli加速
- 点击完成
- 如果前面的NS解析已经生效,Cloudflare会检测到你的网站,你将会看到如下页面。否则要再检查一下NS的配置,再点击重新检查(每小时只能点一次)。
可以用dig
命令 来检测当前生效的NS
dig NS
你的域名
我在执行的时候等的还挺久,Namesevers一直是旧的没有更新过来,不着急
- 选择
Workers
工作页 (上方蓝盒子按钮中的一个)点击Manager Workers
- 为你的Worker任意填写一个子域名
- 点击安装,并确定
- 选择免费方案
如果你的网站访问者很多,以后可以再换成收费方案。
- 验证你的个人邮箱,并回到Workers管理页面 (参见 #12)
- 点击创建Worker
Step 2: 定制生成Fruition脚本(2分钟)
填写这个https://fruitionsite.com/脚本生成器生成:
例如:我的配置是
域名映射:
tangly1024.tk
notion分享URL:
https://www.notion.so/tanghh/Library-4df48560645f4c568aa9c788a38b5e4aStep 3: 将脚本粘贴到 Cloudflare (1分钟)
- 删除旧的代码,粘贴你的
- 点击保存和部署 Save and Deploy
- 保存完成后, 点击页面顶部的你的网站名
- 访问Workers 页面点击 Add Route 添加路由
- 输入您的域名
yourdomain.com/*
(或你的子域名subdomain.yourdomain.com/*
如果用的子域名) 作为路由并且选择你刚创建的Worker
- 点击 save 保存, 万事大吉. 🎉
- 给作者发邮件 让我看看你的有趣的网站
- 欢迎将 Fruition 添加到你的网站,让更多人知道他。
FAQ(常见问题)
1.访问页面时报错Mismatch:
问题:打开网站时显示:
Mismatch between origin and baseUrl (dev).
解决:配置中的MY_DOMAIN与实际域名不符,如果实际打开地址是
www.tangly1024.tk
,但配置是tangly1024.tk
,这样也是错误的。请检查域名地址的正确性。如果您需要 www.tangly1024.tk 与 tangly1024.tk 这两个域名同时能访问,可以添加一个301重定向。档当用户访问前一个域名时,自动跳转到已经配置好fruition的后一个域名。
2.配置CloudFlare显示错误 1004
问题:配置解析时显示
DNS Validation Error (Code: 1004) This record type cannot be proxied
. 解决检查一下配置,当值为1.1.1.1时,必须关闭右边的橙色云,选择仅限DNS代理。
2.配置CloudFlare显示错误 1034
问题:访问网站显示错误 Error 1034,并且提示
Check your DNS records to ensure they are pointed to the IP address(es) you were assigned at registration.
解决:ip受限导致,参考此文章,配置新的回源ip
行动建议
你的notion博客网站搭建成功了吗,不妨在评论区,留下你的博客地址,让我看看吧~
- 博客排版方式推荐:这个博客加入了文章分类的功能,挺实用的:
参考
Loading...