Vercel+Nobelium搭建独立站 | Tangly的学习笔记

前言

如果你在使用 Notion 记录一些知识/生活，通过 Nobelium 构建一个博客网站是一个不错的分享内容的方式。

本文将介绍通过 Nobelium 项目将个人博客托管到 Vercel，再绑定个人域名的操作过程。

如果你按照本文操作，那么最后能够收获外观不错的个人博客，并且你可以在 Notion 上撰写你的博客，内容会自动同步到个人博客中。

演示地址

http://nobelium.tangly1024.com/ 此站点就是用Nobelium搭建博客

💡

另外，我在Nobelium的基础上，又二次开发了一个博客，感兴趣的话可以阅读本篇：https://www.tangly1024.com/article/notion-next

基础知识

Nobelium ：一个将Notion 做为CMS的静态博客项目，它具有以下特点：

🚀 秒开，设备全适配

快速的页面渲染和响应式设计
高效编译器的快速静态页面生成

🤖 自动，无需重新部署

部署在免费、高速的 Vercel 平台
支持增量式更新，更新文章后无需重复部署

🚙 全功能，完全不操心

评论、宽页面、搜索和标签
订阅、网站统计、Web Vital 分析…… 还有更多功能待你发现

🎨 美观，轻松自定义

丰富的配置项，更支持多语言
使用 Tailwind CSS，轻松实现二次开发

🕸 网址美观、搜索引擎优化

Vercel：一项对开源项目免费的托管服务。Vercel 是一项集部署发布、服务托管、证书部署等等为一体的自动化的托管服务器。

Vercel 面向开源项目是免费的（意味着其实你不需要花费任何钱）；

Vercel 能够自动将开发模式下的代码「转变」为可以对外提供服务的网页（意味着上手成本比较低）；

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

Notion: 这款产品究竟有多好用，无需我在此赘言。个人比较喜欢 block 的排版方式，有一种样式尽在掌握的感觉。

虽然 Notion 自己也有页面分享功能，但是限制较多：

不支持自定义域名，第三方支持大多需要付费

加载速度较慢，做 SEO 也比较困难

因此直接拿 Notion 分享页面做个人 blog 站点有些勉强。

其次，开始前，你需要有一个 GitHub 账号和 Notion 账号

开始部署

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

(1)拷贝模板，并分享

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

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

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

💡

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

(2)复制仓库代码

将 Nobelium Github项目 Fork到自己的仓库（点击一下 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」 按钮，可以将文件上传到此处进行替换，保持文件名称一致即可（可以先修改原文件的名称，再上传一份自定义的文件）。