博客这个词已经逐渐从大众事业上消失,取而代之的是微博、微信朋友圈这些平台。可是在少数人眼里,博客依然是那个直抒胸臆、发表并记录自己的生活、学习、工作的最好的平台,不需要担心太多的浏览量、点赞量👍,反而更会沉下心写作文章。
因为搭建博客有许多种方式,我现在一直使用的是 Gridea + Github 来搭建我的静态博客。后来看到 @spencerwoo 的 博客 后,也萌发了用 Notion 来作为博客的载体。
今天讲一下如何用 Nobelium + Notion + Vercel 搭建自己的静态博客。简单快速就能部署成功。
注:本篇文章部分网络可能、也许、大概需要在特殊网络环境下访问。
Nobelium
一个使用 NextJS + Notion API 实现的,部署在 Vercel 上的静态博客系统。为 Notion 和所有创作者设计。
Fork Github 仓库
首先大家注册一个 Github 账户,具体过程百度和谷歌会有很多详细步骤,这里就不细讲。然后进入项目的 仓库 点击右上角的 Fork 按钮。
![](https://cdnfile.sspai.com/2021/05/14/2a3d146893cc3380eb7d38a86481751f.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
在短暂的等待后你能在自己的 Repositories 里面看到一个 forked from 原仓库的新仓库。
![](https://cdnfile.sspai.com/2021/05/14/2035ae2247118dcbf5accd98bc92ba5c.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
创建 Notion 账户
首先去 Notion 的官网创建一个自己的账户。
之后打开这个项目的 Notion 模板 按下右上角的 Duplicate 按钮复制整个模板到自己的账户下。最后你就能在左侧的导航栏里面看到自己账户下已经有一个模板了。
![](https://cdnfile.sspai.com/2021/05/14/a5fc3cdea782e5c2aea0ad21ca7becb9.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
![](https://cdnfile.sspai.com/2021/05/14/fff674dcedadb306e31f139ff0a34aac.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
创建 Vercel 账户
去 Vercel 的官网注册一个账户,你可以直接使用你之前的 Github 账户登录,只需要授权给 Vercel 即可。
![](https://cdnfile.sspai.com/2021/05/14/0f12074c4e4d35a45f9049aa0d08d30f.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
部署
之后进入主界面,你能看到一个非常大的 New Project 的按钮让你创建新的项目。之后你需要点击下方的「Import Third-Party Git Repository →」来把你之前 Fork 的 Github 仓库地址填入进去。
![](https://cdnfile.sspai.com/2021/05/14/33cb2418adb53cfa7f6309599d75f98b.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
![](https://cdnfile.sspai.com/2021/05/14/60642e58bf25f7a4e502212ecd6a1623.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
之后回到我们的 Github 仓库,复制它的 HTTPS 地址,并填入 Vercel 里面。
![](https://cdnfile.sspai.com/2021/05/14/9c437a73f67147593b4a64c0077a34c3.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
![](https://cdnfile.sspai.com/2021/05/14/2f5484377f358b39544997d51d64f121.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
点击 Continue 进行下一步,我们会看到一个选择账户的界面,我们选择第二个自己的 Personal Account。
![](https://cdnfile.sspai.com/2021/05/14/1e9bf1cd7252e23e0c5def582df8e1a6.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
下一步我们继续选择自己的 Github 账户,目的是确保可以在部署项目后轻松更新项目,所以我们必须创建一个存储库。而这个操作会自动执行不需要我们操行,只是使用 Github 存放,当然你也可以选择其他方式。
![](https://cdnfile.sspai.com/2021/05/14/f763866b9370bdf96a85f9ca7994092f.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
我们填入仓库 repo 的名称,我这里使用了 Notion-Blog 作为仓库名。其他设置保持默认即可。
![](https://cdnfile.sspai.com/2021/05/14/d6c7aa663f4f17d941aea29918cebbbb.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
在这之后,我们需要填写 Project Name,这个是指的在 Vercel 里面这个项目的名称,可以随意设置,我这里使用 Nobelium 作为项目名称。然后我们点击 Deploy 开始部署整个项目,然后稍等片刻。
![](https://cdnfile.sspai.com/2021/05/14/890f6788738e36316303d58db3f2bea3.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
然后你就发现出错了,因为项目名称要小写字符才可以,同时不要超过 100 个字符。
![](https://cdnfile.sspai.com/2021/05/14/12ed7a5d65f7275beabbc6301c28c37a.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
然后你就可以去上个厕所、喝杯咖啡,因为 Vercel 已经开始部署整个项目了。
![](https://cdnfile.sspai.com/2021/05/14/7be21cdc73e4eaa1c86fabd172c09181.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
中途你可能会遇到这个报错,看了报错信息我们可以知道显示的是缺少了 Notion 的 PageID 这个变量。
![](https://cdnfile.sspai.com/2021/05/14/5cf6c9224d59ad25baa4187a5d6dea42.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
那么应该去哪里找 Notion PageID 呢?Nobelium 的 Readme 里面也写的很清楚
以我自己的 Notion 来说,就是下图的这一部分。
![](https://cdnfile.sspai.com/2021/05/14/ba935d87eac69cba3d588f87611b88d1.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
在此之前,我们先去 Notion 打开分享这个模板的按钮。
![](https://cdnfile.sspai.com/2021/05/14/dccb969ae8908d10bba9ff0e4dbe3a01.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
在这之后,我们回到 Vercel 的部署页面,在 Environment Variables 里填入 NAME:NOTION_PAGE_ID,VALUE:你的NOTION PAGEID,然后重新点击 Deploy 部署按钮。
![](https://cdnfile.sspai.com/2021/05/14/4c267dfe7e5a8d158c79d7d20430f467.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
🎉部署成功!
经过之前的步骤,页面会出现彩纸来恭喜你整个项目的成功部署。点击 Visit 页面就能看到你自己的博客页面了。
![](https://cdnfile.sspai.com/2021/05/14/9bc2c4d1caa06dc816018ebd77ba5b02.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
![](https://cdnfile.sspai.com/2021/05/14/839fd7baed323af6be7c48bb80084576.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
自定义域名
如果你有购买过域名,可以在 Vercel Project 的 Settings
> Domains
添加域名。
![](https://cdnfile.sspai.com/2021/05/17/e23f53db14610295fb11906e8e66028b.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
然后在域名服务商的后台添加一条 DNS 记录,然后根据提示添加一条 A 记录或 CNAME 记录,Vercel 会自动生成 SSL 证书,访问域名即可。
编写文章
之后你所需要做的就是去你的 Notion 里面把模板默认的文章删除,然后导入你自己的文章或者编写新的文章。
![](https://cdnfile.sspai.com/2021/05/14/631e30ab82ccfa25a930e618f8f57e87.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
在 Table 空白行点击 Open。 就可以写文章了。
![](https://cdnfile.sspai.com/2021/05/14/0f884bc42b72557d96176679d0426045.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
然后你写入你自己的文章标题和文章正文,选择一些状态例如:文章状态、文章标签还有文章摘要和文章时间,即可发布。
![](https://cdnfile.sspai.com/2021/05/14/2d64412bf70acb0678e1fe0b0b6de7eb.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
重新打开自己的博客页面并刷新,你就能看到刚才我写的测试文章。
![](https://cdnfile.sspai.com/2021/05/14/2f7e9099753d88141f0cec6731df260b.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
配置个性化信息
在 Github 仓库里面的 blog.config.js
文件进行配置相关选项。
比如:博客名称、作者名、邮件等等相关信息。而且如果你需要修改也页面样式,修改仓库里的 /style/notion.css
就可以修改博客主题。
- title:博客名称
- author:作者名称
- email:可以通过该邮件获取 Gravtar 里设置的头像
- link:博客链接
- description:博客描述
- lang:可切换博客的语言(en-US 为英语,zh-CN 为中文)