Vercel部署NotionNext

category
tags
type
status
slug
date
password
Last edited time
Feb 21, 2024 07:46 AM
summary
icon

前言

遵循此教程您将在Vercel上免费搭建一个NotionNext博客。
NotionNext是一个完全开源免费的建站脚本,将您的Notion笔记实时渲染成博客。 Vercel是一个来自国外的在线脚本托管平台,对于个人使用,其免费版已经完全足够,因此您无需购买服务器即可搭建自己的网站。
部署站点只需三步,分别是:
  1. 复制我的Notion模板
  1. 复制我的Github源代码
  1. 在Vercel中一键部署。
部署文档已经过大量网友实践验证,如您实在无法完成独立部署,可以考虑向我们求助

视频

我录了一个1分38秒的简略视频,演示了整个部署过程,最终以文档为主。

一、创建您的Notion页面

复制模板

  1. 请先注册登陆您的Notion账号。
  1. 点击下方链接,打开模板
  1. 在右上角点击Duplicate复制模板,如图所示。点击后会将这个博客数据模板复制到您的笔记空间中。
    1. 点击右上角的Duplicate,将模板复制到您的笔记中
      点击右上角的Duplicate,将模板复制到您的笔记中
       

获取页面ID

  1. 在Notion笔记中:在页面右上角的菜单栏中,依次点击SharePublishedShare To Web,开启页面分享,获取共享链接
      • 如下图所示,点击右上角 Share ,在弹出窗口中点击 Publish Share to web (点击展开截图)
        • notion image
  1. 复制页面ID
    1. 页面ID在您的共享链接中、域名中间的一串32位字母与数字
      • 如下图所示:
        • notion image
      • 页面ID注意
        • 👇以下我的共享链接,其中标红加粗下划线部分才是页面ID要忽略?v=后面的英文数字。
          https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d
          👇我的页面ID 02ab3b8678004aa69e9e415905ef32a5
          请将您的页面ID记录下来,在步骤三会用到。
 

二、复制源代码

💡
注意,请不要使用qq邮箱等国内邮箱,尽量使用hotmail或gmail等国际邮箱,否则下一步登陆vercel后会提示账号被封禁。
  1. 请先注册并登陆Github账号
  1. 仅需点击下方链接,即可一键Fork(复刻)项目。

三、Vercel部署

准备账号

注册登陆Vercel ,这里推荐选择Github账号登录。
notion image
注册vercel账号可能遇到的问题
若注册时提示 Error:This user account is blocked.Contact [email protected] for more information.
这是由于 Vercel 不支持大部分国内邮箱。可以将 github 账号主邮箱改为 Gmail 邮箱。
但是根据群友反应,将 github 账号主邮箱切换为 Gmail 以后,Vercel 又会提示需要使用手机号码验证。然而 github 并没有提供手机号码绑定的内容。
综上,建议一开始注册 github 账号时就使用 Gmail 等国外邮箱进行注册。
  1. 国内访问Gmail的方案:
  • 直接使用 QQ 邮箱手机版,它提供 Gmail 的访问路线,可以直接注册并使用。使用 Ghelper 等浏览器插件访问。详情可以参考这篇文章:玩转 Microsoft-Edge
  1. 若是执着于当前Github账号,可以参考以下方案进行尝试:
  • 完成了 Gmail 等国外邮箱的注册,打开 github-> 头像 ->settings->Emails>Add email address, 并完成邮箱验证。在Add email address 下方的Primary email address 选项中将 Gmail 设置为主邮箱。

导入代码

  1. 点击下方创建新项目
  1. 在代码仓库列表中选择导入NotionNext
    1. 2.点击导入您的NotionNext项目
      2.点击导入您的NotionNext项目
      💡
      注意:这里步骤放慢些,不要急着点击页面上的Deploy按钮,先看下方教程。

配置页面ID并部署

  1. 点击Environment Variables(环境变量),并添加一个属性名称为NOTION_PAGE_ID值为步骤一获取的页面ID
    1. 例如,我的页面ID是:02ab3b8678004aa69e9e415905ef32a5,则配置如下:
      属性名称 Name
      属性值 Valve
      NOTION_PAGE_ID
      02ab3b8678004aa69e9e415905ef32a5
      左侧填写 NOTION_PAGE_ID , 右侧填写 页面ID的值
      左侧填写 NOTION_PAGE_ID , 右侧填写 页面ID的值
      填写后要点击右边的Add按钮确认添加
  1. 点击Deploy按钮,静候两分钟等待部署。
    1. 1.点击Deploy进行自动部署
      1.点击Deploy进行自动部署
 

四、完成🎉🎉🎉

  1. 在部署完成页面,点击Go to Dashboard访问控制台
    1. notion image
  1. 在控制台右上角的Visit按钮访问您的站点。或在DOMAINS中获取您的网站地址
    1. 2.在Vercel控制台中找到访问地址
      2.在Vercel控制台中找到访问地址

注意事项

💡
NotionNext会实时抓取Notion笔记内容 (由于缓存和网络延迟,最多刷新两次页面即可看到同步结果)。
⚠️
若您的站点始终无法同步笔记的数据,请再次检查上面的步骤,或者干脆重来一遍: 1. 在Notion中检查您的NOTION_PAGE_ID 格式是否正确、并已开起页面分享。 2. Vercel后台环境变量中NOTION_PAGE_ID是否配置,并重新配置后尝试Redploy。 如何检查Vercel后台环境变量配置:
notion image
如何重新部署
notion image

自定义您的站点

到这里,您已拥有了自己的独立博客,站点的一切内容:标题、描述、头像、菜单栏等所有配置都可随心所欲地定制。
接下来,请访问下方的《NotionNext 操作手册》获取更多站点配置的帮助!

关于部署方案

我目前主要使用Vercel云托管,除此之外、您还可以选择Zeabur部署服务器本地部署导出静态网页Docker容器化CloudFlare部署等方案,不过这些都要求您有一定的技术基础。
 
Vercel的个人免费版足够普通的博客网站使用,但如果你的网站运营很成功,导致访问量过大会快速消耗完Vercel的计费流量,在Vercel后台的Usage中可以看到免费版本的用量。
notion image
此时可以有三种解决方法;
  1. 充值Vercel会员
  1. 换平台,例如Netlify部署
  1. 换部署方案,改为静态部署
    1. 在vercel项目后台的General中,将打包命令改为yarn export这种模式是静态运行网站,基本不消耗用量。但是每次写完文章需要到后台Redeploy一下,适合站点访问量大,文章更新不频繁的用户。
      notion image
      另一种就是直接用Cloudflare的部署方案, 这种方案本身就是纯净。
  1. 购买服务器,在自己的VPS上部署。
V1.0→V3.15 更新汇总Vercel绑定自定义域名
  • Twikoo
  • Giscus
  • Cusdis