Vercel+Nobelium搭建独立站

type

Post

演示地址

http://nobelium.tangly1024.com/ —— 演示站即 Nobelium 默认效果。

💡

我在 Nobelium 之上还做过 NotionNext（本站同款），入口：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-CN；下面是给 Notion 用户的逐步图文版。

(1) 拷贝模板并分享

打开 Nobelium 提供的 Notion 模板，Duplicate 到自己的 Notion Workspace。

打开复制出来的页面，Share → Share to web，保证 Nobelium 能读到页面。

💡

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

(2) Fork 到你自己的 GitHub

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