使用 Vercel + Notion 搭建低成本博客

起因

都快 2022 年了，我为什么想弄个博客站点，主要原因是：
  1. 个人特别喜欢 Notion 这款笔记软件，日常深度使用记录输入，想找个地方写写个人思考作为输出。
  1. 将博客作为新时代 Web 技术的实验田，新技术实际是不断降本增效的过程。

成效

现在的博客基本达到了我的一些需求
  • 💰低成本：仅需要付一个域名的钱！
  • 🚀快：所有的读都在全球 CDN 上，保证了国内外都可访问，且免备案免运维
  • 📝写：所见即所得，内容写在 Notion 上，保存后站点立马更新，不需发布
  • 👨🏻‍💻定制：只要会前端基础、结合 BaaS 服务就可以自由定制一些功能（Dark mode、评论等）
 
下面来看下 https://rustc.cloud/ 博客站点是如何搭建的。
notion image
 

步骤

选型

首先选择了 Notion 作为内容生产后，就需要找一个基于 Notion 的博客系统，将内容渲染成站点，这里我比较喜欢 nobelium 这种简约而不简单的风格。
 
Fork 后加了几个小功能
  • Dark mode 切换
  • 每晚凌晨定时更新站点 html 内容（优化 SEO）
虽然站点内容是实时更新的，但 html 的更新依赖博客重新部署
Comparing 071c19d767c3f7299bfb29d1ee16040ca8b6f206...master · ycjcl868/blog
Unfortunately it looks like we can't render this comparison for you right now. It might be too big, or there might be something weird with your repository. You can try running this command locally to see the comparison on your machine: git diff 071c19d767c3f7299bfb29d1ee16040ca8b6f206...master You can't perform that action at this time.
Comparing 071c19d767c3f7299bfb29d1ee16040ca8b6f206...master · ycjcl868/blog
https://github.com/ycjcl868/blog/compare/071c19d767c3f7299bfb29d1ee16040ca8b6f206...master
Comparing 071c19d767c3f7299bfb29d1ee16040ca8b6f206...master · ycjcl868/blog
 

内容

  1. 打开 Nobelium 提供 Notion 模版，将此模版复制到自己的 Notion Workspace 中
notion image
  1. 将模板设置为 Public，这样可以被博客系统读取到
notion image
  1. 然后就可以自由在 Notion 里写文章了
notion image
 

部署

  1. 登录 Vercel，对 Github 进行授权，部署刚刚 Fork 的 repo
notion image
  1. 在环境变量（Environment Variables）处，填 NOTION_PAGE_ID，值就是 Notion 那个模板对应的 pageId
notion image
  1. 点击 Deploy 部署，之后就可以看到 Vercel 分配的临时链接
 

域名绑定

Vercel 的 Project Settings 处设置自己买的域名（这里我的是 rustc.cloud）
notion image
 

CDN 国内加速

域名绑定后，就需要解析域名到 Vercel 服务器了，这里为了加快国内访问，域名 DNS 服务器设置成 Cloudflare ，利用 Cloudflare 代理到 Vercel。
 
  1. 在 Cloudflare 添加域名，选择 Free 免费方案（白嫖党必备 😂）
      2. notion image
  1. 回到域名（我用的 阿里云），不需要设置 DNS 解析，只需要设置 DNS 服务器
      2. notion image
  1. DNS 添加 CNAME 记录，内容为 cname-china.vercel-dns.com (cname.vercel-dns.com)
      2. notion image
  1. SSL/TLS 里设置为『完全』，且关闭『始终使用 HTTPS』
      2. notion image
  1. 添加两个页面规则，具体改成自己的域名
      2. notion image
 
等待 DNS 缓存刷新，访问就大功告成了！国内速度嘛，测了下还行。
notion image
 
 

常见问题

Edge 浏览器不显示图片

avif/webp 文件格式在 Edge 显示有问题，解法：
为 Next.js 图片优化启用 Cloudflare 缓存
最近在折腾 Next.js，而我自己本身一直也在使用 Cloudflare，直到前天发生了一些离谱的事情，我发现 Edge 有时候无法打开套了 Cloudflare 的 Next.js 页面中的图片。 仔细排查了一下，发现这些图片都是 AVIF 格式的，而查了一下 Can I use 发现，Edge 竟然是唯一不支持 AVIF 图片格式的现代浏览器： 这就很奇怪了，新版的 Edge 是从 Chromium 源码来构建的，不应该产生这种问题才对，有理由相信是微软故意阉割了这个功能，原因不得而知，网上搜索也有很多人吐槽这个事情。 此外，我的图片基本都是 .png 或是 .jpg 格式，为什么会出现 .avif 呢？答案就是 Next.js 的图片优化，它会根据浏览器的 Request Headers 中的 Accept 字段进行兼容格式的返回。 一个例子，我用 Chrome 浏览器去请求的时候是这样的： 可以看到，Edge 这边少了一个 image/avif ，也就是说，它确实告诉了 Cloudflare 不支持 AVIF，Cloudflare 也会转达给 Next.js，Next.js
为 Next.js 图片优化启用 Cloudflare 缓存
https://www.imbytecat.com/09b321b6b965445abcd12a082fc3ac0d
为 Next.js 图片优化启用 Cloudflare 缓存
 

参考

也许你不需要用 SSR - Jamstack
前端应用主要分为：SPA（单页应用）、MPA（多页应用），主要区别在于页面渲染方式： 由图可以看出，SSR 相当于服务端（Node.js）模拟渲染流程，用户访问请求时就返回了完整的 HTML 内容，所以经常用在两个场景： 有 SEO 诉求，用在搜索引擎检索以及社交分享，用在前台类应用。 首屏渲染时长有要求，常用在移动端、弱网情况下。 SSR 依赖服务端 Node.js 运行时，同时渲染本身是 耗资源操作，所以缺点也很明显： 一定的运维、服务器成本 更长的 TTFB （首字节到达时长） 针对第一个缺点，工程上可以使用 FaaS 函数降低服务器、运维成本，但是第二个缺点，除了加缓存，很难从根本上解决。 针对前台类 SSR 站点，用户一次访问，只使用 CDN， 不需要服务器、数据库不需要提供实时的服务 如果真可以，核心问题就是 怎样将最新的数据，放到 CDN 上展示 呢？ Jamstack 是一套技术架构，在现有的技术和平台下，为前台类应用 降本增收（即 For fast and secure sites） ； JavaScript：一般是各类 BaaS 服务，如调用评论 SDK、Auth0、Firebase 等 APIs：Headless CMS 系统/平台，可提供 HTTP 接口（RESTful）、基于
也许你不需要用 SSR - Jamstack
https://www.rustc.cloud/jamstack
也许你不需要用 SSR - Jamstack
Notion , Blog 新体验
使用 Notion + Vercel + Nobelium 搭建自己的静态博客
Notion , Blog 新体验
https://jiegto.fun/blog-with-notion
Notion , Blog 新体验
Vercel 国内加速访问
之前将博客改为Notion + Vercel 模式，在可以访问外网的情况下，速度是非常OK的。但是如果是墙内，速度堪忧。 查阅了资料后，发现 Vercel 官方提供了方案。 实际使用发现还是很慢，本来想使用腾讯云的CDN，但是没找到腾讯云的CDN的自定义SSL排除规则的功能。这样会导致证书颁发失败，后台设置页面也不认这个域名。 看了Vercel的文档，支持Cloudflare。尽管官方不推荐，但能用不是么。 然后在将cloudflare的DNS页签下，将域名指向 Vercel 具体配置如下，记得把 换成自己对应的域名： 在SSL/TLS 页签下，将始终使用Https关闭 完成。此时 Vercel的后台，可以看到域名正确指向了
Vercel 国内加速访问
https://while.work/vercel
Vercel 国内加速访问
使用Cloudflare加速vercel
Vercel本身有边缘网络节点，在国内的速度其实还不错，即便后来流量改道去了新加坡。但是为什么要使用cloudflare来加速vercel，因为vercel前段时间出现过被屏蔽的情况（详见 《vercel无法访问带来哪些影响》 ）。cloudflare虽然速度不是特别快，比较免费版无法使用大陆节点，但是用来防止部署在vercel上面的项目再次出现无法访问的情况也算是一个不错的选择。 根据vercel的官方文档，将cloudflare（以下简称CF）与vercel结合使用有两种方法。第一种无代理（仅限DNS）的方法不能避免我们上述提到的问题，所以使用第二种，但是文档本身可能不那么好理解，因此分享这篇日志提供参考。 将域名添加到CF之后，需要在你的域名注册商处修改DNS服务器为CF提供的DNS，通常为 mia.ns.cloudflare.com和 rick.ns.cloudflare.com 。以腾讯云为例，在Dnspod无法修改NS记录且修改也无效，需要登陆腾讯云控制台，在域名处点击管理，然后找到DNS服务器进行修改。 进入CF中域名控制台，点击上方DNS图标，添加记录，A记录或者CNAME记录解析到你部署在vercel的项目。但是这个时候vercel仍然会显示未正确配置，并且这个时候访问很有可能返回错误。因为当 vercel 构建项目时，构建过程的最后一步是颁发 SSL 证书。作为此步骤的一部分，vercel 向 域名/.well-known/acme-challenge 发出 HTTP 请求。如果此 HTTP 请求被重定向到 HTTPS，Vercel 将无法颁发 SSL 证书。 根据文档我们来用命令进行验证（注意协议是http）： 如果能通过域名访问vercel将会返回： 如果运行命令收到 3xx 重定向，那么CF会阻止访问此路由，且vercel会将域名标记为未配置。 为防止上述请求被重定向，需要通过以下方式创建https 例外页面规则： 在CF控制台的"规则"选项卡中选择"创建页面规则"； 在"如果 URL 匹配"文本字段中输入 *example.com/.well-known/* ； 从"选择设置"下拉列表中选择"SSL"，然后从"选择 SSL 设置"下拉列表中选择"关"； 点击"保存并部署"按钮。 说明：这个时候使用curl命令测试，不出意外返回应该就是HTTP/1.1 404 Not Found，那么你的域名便可正常访问。如果仍然是301重定向，尝试关闭CF中的始终使用HTTPS。 为确保所有其他 HTTP 请求继续重定向到 HTTPS，请通过以下方式创建另一个页面规则： 禁用"SSL/TLS"选项卡的"边缘证书"部分中的"始终使用 HTTPS"设置。 在"页面规则"选项卡中选择"创建页面规则"按钮。 在"如果 URL 匹配"文本字段中输入" http://*example.com* " 。 从"选择设置"下拉菜单中选择"始终使用 HTTPS"。 点击"保存并部署"。 说明：这一步骤是国外一位博主分享的，事实上经我测试无需这一步，可能是因为我主域名并非使用CF的这个域名。 此前分享国外可用的免费CDN时便提到过cloudflare，虽然有时候人们戏称它为减速CDN（针对中国大陆地区），但是实际速度也不是想象中那么慢，甚至比我直接解析到vercel新ip的域名速度要快，因此本站将在接下来可能较长时间内使用CF+vercel的waline服务地址来提升加载和提交速度。如果有任何问题欢迎随时向博主反馈。
https://www.hin.cool/posts/cfvercel.html
使用Cloudflare加速vercel
 

© ycjcl868 2021 - 2024