关于怎么搭建一个这样的blog
发布于:2023-4-16
最后更新: 2023-5-3
次查看
Nobelium
URL
date
AI summary
slug
status
tags
summary
type

背景

最近发现twitter是一个技术氛围和浓度比较高的地方，于是每天花不少时间刷推。
这个blog的搭建就始于刷到的一篇推文
notion image
看起来简单又好用，并且还是免费的，于是乎，就手痒动起来了。

动手

既然作者没给教程，那我们就自己动手，反正看起来也足够简单。于是先找到了nobelium的github repo
nobelium
craigary • Updated Aug 30, 2023
找到了组织就好办了，readme里已经包含了大量有用的信息，堪称教程

跟着官方指导部署Nobelium

notion image
重点都在上面截图用红框标注出来了，这里再总结一下步骤
  1. 注册个notion账号，这个不需要教程吧
  1. 复制（duplicate）nobelium为notion制作的模板
    1. 点击 https://craigary.notion.site/866916e3b939468b9b6f1d47dce99f9c 右上角的duplicate按钮即可
  1. 进入新复制的页面，把页面设置为公共访问
      2. notion image
  1. 找到下图的Page ID，后面Deploy到Vercel上的时候需要填写这个作为环境变量
      2. notion image
  1. Fork nobelium（就是copy一份到你自己的仓库，便于你二次开发）
  1. Github账号授权Vercel登录，下面开始把项目部署到Vercel上
    1. 添加项目
        2. notion image
    2. 从刚刚Fork的Repo导入
        3. notion image
    3. 设置环境变量 NOTION_PAGE_ID，别忘了最后点一下 Add
        4. notion image
  1. 点击Deploy，静静等待编译和发布结束，出现Congratulations页面就可以了！

进阶部署

到这里，其实你已经可以使用vercel提供的域名访问你的blog了。但是我们需要再做几步，让你的blog变得更好。当然，如果你没有下面这些诉求，也可以直接跳过。
  1. 想通过自定义的域名访问blog
  1. 想要接入一个评论系统
  1. 自定义网站介绍、风格等信息
  1. 想要显示自定义的头像
对了，在这里访问blog你应该会看到template里很多篇预设好的文章，没事，统统删掉即可，然后写一篇你的blog，然后published，看看效果？

自定义域名

关于自定义域名，我单独起了一篇新文章，因为我理解它可能是一个“公共的”知识点。所以劳烦需要的同学移步
关于怎么给blog搞一个自定义的域名
关于怎么给blog搞一个自定义的域名
https://blog.zhuchao941.world/how-to-use-your-customized-domain
关于怎么给blog搞一个自定义的域名

接入评论系统 + 自定义网站介绍

这里接入的是cusdis
  1. 注册cusdis账号
  1. 单击Dashboard页面的Embed Code按钮，找到data-app-id
      2. notion image
  1. 修改blog.config.js文件，跟评论系统相关的主要是下面标红的2项
      2. notion image
  1. 上图里的diff就是我自己的网站的一些自定义修改，你可以试着参考一下，应该都很容易理解，这里就不再解释了。有疑问的话可以通过cusdis评论系统提问哦
  1. 当用户发了评论之后，是需要你审核的，审核通过之后才能显示在评论栏里，如果你想及时收到，可以在cusdis上配置一个接收提醒的邮箱哦
  1. 你还自定义blog的favicon哦，只需要替换/public目录下的favicon.ico即可

显示自定义头像

notion image
如你所见，每一篇POST都会有这样一个位置显示作者具体信息及头像，头像链接过去就是在 blog.config.js所配置的social link，即个人的Twitter社交链接。可是问题是填入自己的社交链接之后却又只是左边的图像，并没有发生什么变化。
关于头像显示，nobelium使用的是gravatar，所以你需要先注册gravatar账号。注册完上传自己头像即可，然后保持你的邮箱地址和注册gravatar账号的邮箱一样就可以了哦。
简单来说当你访问支持 Gravatar 头像的网站时，只要输入你注册的邮箱账号，即会自动调用 Gravatar 的 api，转换成保存的头像。
实际上，在项目中是根据我们所填写的邮箱生成一个哈希值，而这个哈希值唯一的对应我的头像

关于“关于”页面

当你把template里的所有预设的文章删掉之后，你会发现“关于”（英文叫about）页面404了。因为“关于”页面其实是链接到了一篇slug为about的Page（设置成POST就会展示到首页哦），所以我们只需要添加进去即可。类似下面这样
notion image

更多的定制

可以参考下面这篇文章，包括自定义新的导航连接、修改左上角图标颜色以及调整导航透明背景的模糊程度。
使用 nobelium + Notion 制作博客的一些 Tips：如何自定义新的导航连接
前段时间把博客迁移到了使用 nobelium + Vercel 的 Notion 上面，最大的好处就是可以利用 notion数据库的形式，来实现写完文章后，把状态改为「publish」就可以立刻发布，不需要在像 Hexo 一样安装npm，每次发文章都需要部署。而且 notion 里大部分的格式都可以在博客里使用，比如书签、表格、代码块、图片、视频等，不需要再找一个图床了。本文将告诉你，如何修改自己博客里 nobelium 的源文件，如何自定义新的导航连接，如何调整导航透明背景的模糊程度。
使用 nobelium + Notion 制作博客的一些 Tips：如何自定义新的导航连接
https://blog-issei.vercel.app/nobelium_tips

大致原理猜测

这里我结合整个搭建过程简单猜测一下大致的原理（没看过源代码）
有没有发现nobelium notion template页面有点像一个数据库表，并且设置成了公开访问。所以我猜测应该是nobelium server（也就是vercel上跑的那个应用）会定时拉取你的notion页面，然后从里面解析出对应的文章生成blog页面。

参考

https://tanxynotion.vercel.app/taste-nobelium
相关文章
2023-04-16
关于怎么给blog搞一个自定义的域名
关于怎么给blog搞一个自定义的域名高cpu使用率和高带宽使用排查思路