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

date
Nov 12, 2021
slug
blog-dev
status
Published
tags
Serverless
Website
summary
云时代带来的云成本优势,让个人可以搭建更低成本的博客,成本多低呢?也许你只需要付一个域名的钱。
type
Post

起因

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

成效

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

步骤

选型

首先选择了 Notion 作为内容生产后,就需要找一个基于 Notion 的博客系统,将内容渲染成站点,这里我比较喜欢 nobelium 这种简约而不简单的风格。
 
Fork 后加了几个小功能
  • Dark mode 切换
  • 每晚凌晨定时更新站点 html 内容(优化 SEO)
虽然站点内容是实时更新的,但 html 的更新依赖博客重新部署
 

内容

  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 免费方案(白嫖党必备 😂)
    1. notion image
  1. 回到域名(我用的 阿里云),不需要设置 DNS 解析,只需要设置 DNS 服务器
    1. notion image
  1. DNS 添加 CNAME 记录,内容为 cname-china.vercel-dns.com (cname.vercel-dns.com)
    1. notion image
  1. SSL/TLS 里设置为『完全』,且关闭『始终使用 HTTPS』
    1. notion image
  1. 添加两个页面规则,具体改成自己的域名
    1. notion image
 
等待 DNS 缓存刷新,访问就大功告成了!国内速度嘛,测了下还行。
notion image
 
 

常见问题

Edge 浏览器不显示图片

avif/webp 文件格式在 Edge 显示有问题,解法:
 

参考

使用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服务地址来提升加载和提交速度。如果有任何问题欢迎随时向博主反馈。
使用Cloudflare加速vercel
 

© ycjcl868 2021 - 2024