Notion , Blog 新体验

date
Jul 3, 2021
slug
blog-with-notion
status
Published
tags
Website
Notion
Vercel
Cloudflare
summary
使用 Notion + Vercel + Nobelium 搭建自己的静态博客
type
Post

相关产品

💡
Notion 是一款提供笔记、任务、数据库、看板、维基、日历和提醒等组件的应用程序。用户可以将这些组件连接起来,来创建自己的系统,用于知识管理、笔记记录、数据管理、项目管理等。这些组件和系统可以单独使用,也可以与他人进行跨平台协作。
💡
Vercel 是一家提供 JAMStack,静态网站 托管的平台,支持自动从 Github,GitLab,Bitbucket 等仓库自动拉取代码,自动式进行构建,最后把生成的静态网站的一站式服务平台; 在这基础上同时也支持自定义域名,自动申请 SSL证书等功能。
💡
Nobelium 基于 Notion 和 Nextjs 构建的静态博客的开源项目,可部署在 Vercel 上。

部署说明

  1. 打开 Nobelium 提供的 Notion 模版,并将此模版复制到自己的 Notion Workspace 中
    1. notion image
  1. 将已复制到自己 Workspace 中的该页面进行分享
    1. notion image
  1. 打开 Nobelium GitHub 仓库页面,并 Fork 到自己账号下
    1. notion image
  1. 进入 Fork 后的项目,找到 blog.config.js 这个文件,进行配置修改
    1. notion image
  1. 根据模版字段,按需修改
    1. notion image
      💡
      title:博客的名称 author:作者名称 email:邮箱地址,关联 Gravatar ,生成头像 link:博客地址 description:博客的描述 其余配置根据项目说明,按需修改。
  1. 登录 Vercel ,GitHub 授权,部署项目
    1. notion image
  1. 填写环境变量 Environment VariablesNOTION_PAGE_ID,以及对应的值
    1. notion image
      关于 NOTION_PAGE_ID 的值参考以下
      notion image
  1. 点击 Deploy ,开始部署,部署完成后即可以查看博客
  1. 按照页面说明,绑定自定义域名
    1. notion image
  1. 至此,已经全部部署完毕,可以使用自己的域名访问博客了

接入 Cloudflare CDN

  1. 域名接入 Cloudflare
  1. 添加 CNAME 解析到 cname.vercel-dns.com ,并开启 Proxy
  1. 添加页面规则,将 /.well-known/* 的 SSL 设置为关
    1. notion image
  1. 在 SSL/TLS 中,将 SSL/TLS 加密模式设为 完全
    1. notion image
  1. 在 SSL/TLS 的边缘证书中,关闭 始终使用 HTTPS
    1. notion image
  1. 考虑到 始终使用 HTTPS 选项关闭,可以添加页面规则,为其他请求开启始终使用 HTTPS
    1. notion image

注意事项

💡
使用 GitHub 授权登录 Vercel 时,需注意如果 GitHub 绑定的不是 Gmail,大概率会被要求验证手机号( Google Voice 等虚拟手机号基本上都无法通过验证)。此时,建议使用 Gmail 登录后再授权 GitHub。
💡
Vercel 服务目前已经被 GFW 认证,无法直接访问,建议接入 Cloudflare CDN。

参考教程

用 Notion 部署你的个人博客 -- 基于 Nobelium + Vercel 的个人博客搭建指南 - 少数派
静态博客的平台层出不穷,对于普通人而言,部署个人博客也早已不再是一件难事。本文将介绍通过 Nobelium 项目将个人博客托管到 Vercel,再绑定个人域名的操作过程。 如果你按照本文操作,那么最后能够收获外观不错的个人博客,并且你可以在 Notion 上撰写你的博客,内容会自动同步到个人博客中。如果你在使用 Notion 记录一些知识/生活或是其他,通过 Nobelium 都是一个不错的分享内容的方式。 Nobelium :一个通过 Notion 做内容管理的静态博客项目;基本原理是利用 Notion 公开分享的页面,获取页面内容、添加样式的方式来实现的静态博客。 Vercel :一项对开源项目免费的托管服务。Vercel 是一项集部署发布、服务托管、证书部署等等为一体的自动化的托管服务器。简单而言,我们只需要知道: Vercel 面向开源项目是免费的(意味着其实你不需要花费任何钱); Vercel 能够自动将开发模式下的代码「转变」为可以对外提供服务的网页(意味着上手成本比较低); Vercel 做的非常好,功能完善到你无需知道太多专业知识,就可以部署独立域名、带安全证书的网站。 其次,开始前,你需要有一个 GitHub 账号(如果没有的话,赶紧注册一个吧)。 如果你熟悉各种开源项目,那么其实 Nobelium 的 README 已经详细介绍了具体部署的步骤,如果你只是普通的 Notion 用户,那么可以跟着以下步骤进行: 1. 打开 Nobelium 提供的 Notion 模板,拷贝这个模板到自己的 Notion Workspace 中。 2.
用 Notion 部署你的个人博客 -- 基于 Nobelium + 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 例外页面规则:   1. 在CF控制台的"规则"选项卡中选择"创建页面规则";   2. 在"如果 URL 匹配"文本字段中输入 *example.com/.well-known/* ;   3. 从"选择设置"下拉列表中选择"SSL",然后从"选择 SSL 设置"下拉列表中选择"关";   4. 点击"保存并部署"按钮。    说明:这个时候使用curl命令测试,不出意外返回应该就是HTTP/1.1 404 Not Found,那么你的域名便可正常访问。如果仍然是301重定向,尝试关闭CF中的始终使用HTTPS。   为确保所有其他 HTTP 请求继续重定向到 HTTPS,请通过以下方式创建另一个页面规则:   1.
使用Cloudflare加速vercel

© Jiegto 2021