博客这个词已经逐渐从大众事业上消失,取而代之的是微博、微信朋友圈这些平台。可是在少数人眼里,博客依然是那个直抒胸臆、发表并记录自己的生活、学习、工作的最好的平台,不需要担心太多的浏览量、点赞量👍,反而更会沉下心写作文章。

因为搭建博客有许多种方式,我现在一直使用的是 Gridea + Github 来搭建我的静态博客。后来看到 @spencerwoo 的 博客 后,也萌发了用 Notion 来作为博客的载体。

今天讲一下如何用 Nobelium + Notion + Vercel 搭建自己的静态博客。简单快速就能部署成功。

注:本篇文章部分网络可能、也许、大概需要在特殊网络环境下访问。

Nobelium

一个使用 NextJS + Notion API 实现的,部署在 Vercel 上的静态博客系统。为 Notion 和所有创作者设计。

Fork Github 仓库

首先大家注册一个 Github 账户,具体过程百度和谷歌会有很多详细步骤,这里就不细讲。然后进入项目的 仓库 点击右上角的  Fork 按钮。

在短暂的等待后你能在自己的 Repositories 里面看到一个 forked from 原仓库的新仓库。

创建 Notion 账户

首先去 Notion 的官网创建一个自己的账户。

之后打开这个项目的 Notion 模板 按下右上角的 Duplicate 按钮复制整个模板到自己的账户下。最后你就能在左侧的导航栏里面看到自己账户下已经有一个模板了。

创建 Vercel 账户

Vercel 的官网注册一个账户,你可以直接使用你之前的 Github 账户登录,只需要授权给 Vercel 即可。

部署

之后进入主界面,你能看到一个非常大的 New Project 的按钮让你创建新的项目。之后你需要点击下方的「Import Third-Party Git Repository →」来把你之前 Fork 的 Github 仓库地址填入进去。

之后回到我们的 Github 仓库,复制它的 HTTPS 地址,并填入 Vercel 里面。

点击 Continue 进行下一步,我们会看到一个选择账户的界面,我们选择第二个自己的 Personal Account。

下一步我们继续选择自己的 Github 账户,目的是确保可以在部署项目后轻松更新项目,所以我们必须创建一个存储库。而这个操作会自动执行不需要我们操行,只是使用 Github 存放,当然你也可以选择其他方式。

我们填入仓库 repo 的名称,我这里使用了 Notion-Blog 作为仓库名。其他设置保持默认即可。

在这之后,我们需要填写 Project Name,这个是指的在 Vercel 里面这个项目的名称,可以随意设置,我这里使用 Nobelium 作为项目名称。然后我们点击 Deploy 开始部署整个项目,然后稍等片刻。

然后你就发现出错了,因为项目名称要小写字符才可以,同时不要超过 100 个字符。

然后你就可以去上个厕所、喝杯咖啡,因为 Vercel 已经开始部署整个项目了。

中途你可能会遇到这个报错,看了报错信息我们可以知道显示的是缺少了 Notion 的 PageID 这个变量。

那么应该去哪里找 Notion PageID 呢?Nobelium 的 Readme 里面也写的很清楚

以我自己的 Notion 来说,就是下图的这一部分。

在此之前,我们先去 Notion 打开分享这个模板的按钮。

在这之后,我们回到 Vercel 的部署页面,在 Environment Variables 里填入 NAME:NOTION_PAGE_ID,VALUE:你的NOTION PAGEID,然后重新点击 Deploy 部署按钮。

🎉部署成功!

经过之前的步骤,页面会出现彩纸来恭喜你整个项目的成功部署。点击 Visit 页面就能看到你自己的博客页面了。

自定义域名

如果你有购买过域名,可以在 Vercel Project 的 Settings > Domains 添加域名。

然后在域名服务商的后台添加一条 DNS 记录,然后根据提示添加一条 A 记录或 CNAME 记录,Vercel 会自动生成 SSL 证书,访问域名即可。

编写文章

之后你所需要做的就是去你的 Notion 里面把模板默认的文章删除,然后导入你自己的文章或者编写新的文章。

在 Table 空白行点击 Open。 就可以写文章了。

然后你写入你自己的文章标题和文章正文,选择一些状态例如:文章状态、文章标签还有文章摘要和文章时间,即可发布。

重新打开自己的博客页面并刷新,你就能看到刚才我写的测试文章。

配置个性化信息

在 Github 仓库里面的  blog.config.js  文件进行配置相关选项。

比如:博客名称、作者名、邮件等等相关信息。而且如果你需要修改也页面样式,修改仓库里的 /style/notion.css  就可以修改博客主题。

  • title:博客名称
  • author:作者名称
  • email:可以通过该邮件获取 Gravtar 里设置的头像
  • link:博客链接
  • description:博客描述
  • lang:可切换博客的语言(en-US 为英语,zh-CN 为中文)