Nobelium 初尝

date
Feb 24, 2022
slug
taste-nobelium
status
Published
tags
Website
Design
summary
静态博客的不二之选
type
Post

介绍

Nobelium 项目的介绍在下面少数派这篇文章已经写的很好了,并且如何部署到 Vercel 的步骤也写的非常“保姆”了,总的来说 Nobelium 就是以 Notion 作为数据源,页面用 react-notion-x 进行渲染的博客。
用 Notion 部署你的个人博客 -- 基于 Nobelium + Vercel 的个人博客搭建指南 - 少数派
静态博客的平台层出不穷,对于普通人而言,部署个人博客也早已不再是一件难事。本文将介绍通过 Nobelium 项目将个人博客托管到 Vercel,再绑定个人域名的操作过程。 如果你按照本文操作,那么最后能够收获外观不错的个人博客,并且你可以在 Notion 上撰写你的博客,内容会自动同步到个人博客中。如果你在使用 Notion 记录一些知识/生活或是其他,通过 Nobelium 是一个不错的分享内容的方式。 Nobelium :一个通过 Notion 做内容管理的静态博客项目;基本原理是利用 Notion 公开分享的页面,获取页面内容、添加样式的方式来实现的静态博客。 Vercel :一项对开源项目免费的托管服务。Vercel 是一项集部署发布、服务托管、证书部署等等为一体的自动化的托管服务器。简单而言,我们只需要知道: Vercel 面向开源项目是免费的(意味着其实你不需要花费任何钱); Vercel 能够自动将开发模式下的代码「转变」为可以对外提供服务的网页(意味着上手成本比较低); Vercel 做的非常好,功能完善到你无需知道太多专业知识,就可以部署独立域名、带安全证书的网站。 其次,开始前,你需要有一个 GitHub 账号(如果没有的话,赶紧注册一个吧)。 如果你熟悉各种开源项目,那么其实 Nobelium 的 README 已经详细介绍了具体部署的步骤,如果你只是普通的 Notion 用户,那么可以跟着以下步骤进行: 1. 打开 Nobelium 提供的 Notion 模板,拷贝这个模板到自己的 Notion Workspace 中。 2.
用 Notion 部署你的个人博客 -- 基于 Nobelium + Vercel 的个人博客搭建指南 - 少数派
根据上面的步骤,只要 Duplicate 下来作者提供的 Notion 模板并且设置为公开状态,即可获取到属于你 Notion 页面的 NOTION_PAGE_ID ,这是部署在 Vercel 上的重要环境变量。接着 Fork 作者的项目:nobelium,就可以在 Vercel 部署此项目并添加 NOTION_PAGE_ID 环境变量即可完成部署。

优点

对于很多搭建静态博客的人来说,已经习惯了每次发表文章都要重新构建部署等操作,但是使用 Nobelium 项目,则可专注于写作,后期更新文章,只需要在已经 Duplicate 下来的 Notion 模板中添加一篇文章,并且设置为 published 即可,无需再重新部署。只有在修改项目中源代码的时候才会自动重新部署。
notion image

配置

  • 一些基本的配置,在项目页面已经写的十分清楚:
    • blog.config.js 修改博客基本信息
    • favicon.svg , favicon.ico 可以自定义
而在项目页面没有提到的,在下面这篇文章中也有涉及,包括自定义新的导航连接、修改左上角图标颜色以及调整导航透明背景的模糊程度。

关于 Twitter 头像

notion image
notion image
如你所见,每一篇 POST 都会有这样一个位置显示作者具体信息及头像,头像链接过去就是在 blog.config.js 所配置的 social link,即个人的 Twitter 社交链接。可是问题是填入自己的社交链接之后却又只是左边的图像,并没有发生什么变化。
 
而当我以为存在静态图片的 /Public/ 文件夹中却又发现没有类似 avatar 的踪影,事实上,审查元素的时候就可以知道原来 Nobelium 调用的是互联网最知名的 Gravatar 头像库的头像。Gravatar ( Globally Recognized Avatar ) 提供一种可在全球范围内通用的头像服务,你只要在 Gravatar 上传一次头像,就能在无数个支持 Gravatar 的博客、论坛等网站使用它。众多科技类网站使用的社会化评论系统:DISQUS、国内的多说、友言,WordPress 和 Typecho 等程序也都使用 Gravatar 作为评论系统的头像。
简单来说当你访问支持 Gravatar 头像的网站时,只要输入你注册的邮箱账号,即会自动调用 Gravatar 的 api,转换成保存的头像。而我们使用也是相当简单,在上方的链接中注册一个账号上传头像即可。
👉
实际上,在项目中是根据我们所填写的邮箱生成一个哈希值,而这个哈希值唯一的对应我的头像

添加评论系统

  1. 先在 blog.config.js 上填写 provider 字段,选择第三方评论系统的提供商,目前 Nobelium 提供 Gitalk, Utterances, Cusdis
  1. 根据你选择的提供商,填写对应提供商所要填写的字段即可
  1. 个人觉得 Cusdis 的 UI 比较简洁,且评论时无需登录;有关 Cusdis 的详细配置、Gitalk 的详细配置、Utterances 的详细配置,下面三篇文章写的不错,可以参考。
自建、免费、开源的评论系统解决方案
我最近把评论系统切换到了 Cusdis ,这是一个非常年轻的项目,我是看着 GitHub Repo 从建立到现在近 900 个 star 的。产品体验不错,在开源协作的过程中也有很多收获,觉得有必要推荐一下,并且介绍下自己用的 workflow 所以有了这篇水文。 评论系统有以下几种选择: 公司产品,最有名的比如 Disqus,好处是使用人数多方便互动,不用自己管理 Infra,缺点是不由你说了算,比如强行给你加广告付费才能去除(驱动我换评论系统的最大原因),以及被墙及跑路的风险。 白嫖后端产品,常见被白嫖的有 GitHub(utterances),LeanCloud(Valine),优点是省心,缺点是不好导出迁移。 自造轮子产品,比如我曾经就做过一个,优点是完全自主,缺点是要做好没有 bug 还是有很多细节要考虑,而且维护 infra 也是一个开销。 Cusdis 其实三类全占,它既有一个 Hosted 服务你可以直接把数据托管在上面,也给了你自己部署自建数据库的自由。而且它支持从 Disqus 导入评论数据。于是我就尝试了一下,最后发现整个方案我挺满意,重点是全白嫖不花钱,下面分享一下。 Cusdis 支持连接你指定的 PostgreSQL 数据库实例,为了省心我首先想到了 DBaaS,但之前对这块不太熟,找了下各大知名云,都不是永久免费。于是我想到了 Heroku ,对于免费的实例只有 PostgreSQL 是可以免费用的,而 Cusdis 又(暂时)只支持连接 PostgreSQL,一切都是刚刚好。 注册帐号登录之后,进入到 Dashboard,右上角 Create new app 新增一个 app,区域选美国 转到 Resources
自建、免费、开源的评论系统解决方案

小坑

Nobelium 支持 RSS 并且 SEO 相当友好、支持自动更换暗黑模式,但是同时也有一些小缺点。

我一开始欣喜若狂地使用 Cusdis 评论系统的时候,却发现底部 ←Back 按钮 和 ↑Top 按钮距离 Cusdis 太近了,显得很窄,整体很不美观,估计是作者在后期加入两个按钮的时候对于整体美观度欠缺了考虑(真不是我强迫症),如下图所示,您细品。 修改起来也不麻烦,只需要在 layouts/layout.js 文件第 83 行代码中,找到需要修改两个按钮所在的 div 即可,对 div 添加垂直方向的外边距(这是 tailwindcss 的语法,感兴趣可以去了解)。
👈 修改前 | 修改后 👉
👈 修改前 | 修改后 👉
修改前:
<div className="flex justify-between font-medium text-gray-500 dark:text-gray-400">
修改后:
<div className='flex justify-between font-medium text-gray-500 dark:text-gray-400 my-5'>

其他

脚注

修改 footer :components/Footer.js
notion image
<p>
	© {BLOG.author} {from === y || !from ? y : `${from} - ${y}`} 加你想要的东西
</p>
 

notion 样式

你甚至可以渲染过来后 notion 内置样式: styles/notion.css ,而我这个需求是因为我将非黑暗模式下的背景调成了比较淡雅的比白色稍微淡一点的颜色:#f1fafa ,这恰好与 notion 内置的 bookmark 外边框颜色相近,从而在非黑暗模式下,bookmark 的外框几乎不存在,所以我就改变了 bookmark 的样式,将颜色稍微改深了一点。

最后

人无完人,项目更是如此。如果你正想搭建一个低成本静态博客,Nobelium 是你的不二之选,喜欢折腾的你也一定能在这个项目上做二次开发,搭建一个有自己特色的博客。贴上一个 Nobelium 项目组开发成员 yokinist 的博客,他在此项目上做了二次开发,增加了美观度,我也曾想使用它二次开发的主题,但是他在首页的 tag 是写死的,并不能像原项目那样从 notion 中进行读取,不太符合我的需求,有兴趣的同学可以折腾一下,修改起来也不难。

© Issac Tan 2019 - 2024