Nobelium 部署后的效果

静态博客的平台层出不穷，对于普通人而言，部署个人博客也早已不再是一件难事。本文将介绍通过 Nobelium 项目将个人博客托管到 Vercel，再绑定个人域名的操作过程。

如果你按照本文操作，那么最后能够收获外观不错的个人博客，并且你可以在 Notion 上撰写你的博客，内容会自动同步到个人博客中。如果你在使用 Notion 记录一些知识/生活或是其他，通过 Nobelium 是一个不错的分享内容的方式。

基础知识：

Nobelium ：一个通过 Notion 做内容管理的静态博客项目；基本原理是利用 Notion 公开分享的页面，获取页面内容、添加样式的方式来实现的静态博客。

Vercel：一项对开源项目免费的托管服务。Vercel 是一项集部署发布、服务托管、证书部署等等为一体的自动化的托管服务器。简单而言，我们只需要知道：

  1. Vercel 面向开源项目是免费的（意味着其实你不需要花费任何钱）；
  2. Vercel 能够自动将开发模式下的代码「转变」为可以对外提供服务的网页（意味着上手成本比较低）；

Vercel 做的非常好，功能完善到你无需知道太多专业知识，就可以部署独立域名、带安全证书的网站。

其次，开始前，你需要有一个 GitHub 账号（如果没有的话，赶紧注册一个吧）。

开始部署

如果你熟悉各种开源项目，那么其实 Nobelium 的 README 已经详细介绍了具体部署的步骤，如果你只是普通的 Notion 用户，那么可以跟着以下步骤进行：

1. 拷贝模板，并分享

1. 打开 Nobelium 提供的 Notion 模板，拷贝这个模板到自己的 Notion Workspace 中。

点击 Duplicate 拷贝模板到自己的Notion中

2. 将自己Workspace 中的这个页面分享出去：

Share to web

当然，如果你不想公开这个页面，你也是可以通过 Token 的方式来让 Nobelium 抓取内容的，由于 Notion 后续会提供 API ，并且临时获取的 Token 也存在过期的问题，本文不做介绍，读者可以自行参考 README 找到相关的说明。

2. FORK NOBELIUM 项目到自己 GITHUB 仓库中

点击一下 Fork 按钮即可

这里对不了解 GitHub 的 Notion 用户解释一下，Fork 其实就是 Notion 的 Duplicate ，也就是把这个项目拷贝到自己的 GitHub 里面，这边你才可以对这个项目的代码进行编辑。拷贝后就能看到「你的ID/nobelium」 ，这就表示这个项目现在在你的仓库中了！

Fork 后的项目，就可以编辑啦

3. 修改配置文件

找到 blog.config.js 这个文件，点击进入到预览页面：

找到 blog.config.js 文件

点击编辑按钮，进行编辑：

点击编辑按钮

这里可以修改一些博客的基本信息：

  • title 填写你博客的名称
  • author 填写作者名称
  • email 你的邮箱地址（如果你觉得有必要的话）
  • link 你的博客地址
  • description 博客的描述

以及外观相关的appearance、font、lightBackground、darkBackground 配置可以进行修改。开发者的文档注释非常详细，可以直接参考文件内的注释进行修改。

除了 blog.config.js 外，你还可以替换项目的图标等内容，这些文件都存储在 public 这个文件夹中，点击 「Add file」 按钮，可以将文件上传到此处进行替换，保持文件名称一致即可（可以先修改原文件的名称，再上传一份自定义的文件）。

修改 public 中的文件，对网站样式进行自定义

4. 登陆到 VERCEL 进行部署操作

打开 https://vercel.com/ ，然后点击 Sign up 选中 「Continue with GitHub」。

授权使用 Github 登陆到 Vercel，接着会弹出 「Import Git Repository」（如果没有，那么点击右上角的 「New」），选择 Nobelium 这个项目，点击 「Import」，选择个人账号，开始部署操作：

展开 「Environment Variables」，即环境变量，填写 NOTION_PAGE_ID，以及对应的值：

关于 Notion page id，可以直接看：

就是分享链接中 ?v= 前面的那段字符。确认后，点击 「Add」：

最后一步，就是点击 「Deploy」，开始部署，右侧会显示部署的过程：

部署 完成后，点击「Visit 」就可以看到博客网站啦！

5. 最后一步，绑定自己的域名

在 Vercel 中打开项目，选择「Settings」，然后选中「Domains」，添加自己的域名即可。添加后，需要去域名服务商中，设置一下解析，CNAME 解析即可。

当然，如果你输入域名后，网页的域名跳转了，你也可以再设置一下，将 「Redirect to」，选为 「No Redirect」。

注意事项

  • 在 Notion的 Database 页面中，请不要留空，这样有可能会导致部署失败；
  • about 页面可以在 Notion 中创建一个 slug 为 about ，type 为 Page 的内容，在其中填写内容即可；
  • 其他问题可以参考 GitHub 中的 issue 页面；

尾巴

最后其实 Nobelium 这个项目还提供了网页信息统计、评论等功能，如果你有一定的编程基础，也可以给自己的博客添加这些配置。

最后的最后，博客可能并不是当今中文互联网最好的承载个人内容的方式，但我依然认为，个人博客是仍是当今最浪漫的方式。愿意维护自己博客的人，想必也都是理想且烂漫的人。

 

  • 彩蛋 1：5月14日，Notion API 已经开始公测了，届时应该会有更多不同类型的 Notion Base App 🌚。
  • 彩蛋 2: 该项目我派稿霸 SpencerWoo 也有参与。