category
tags
type
status
slug
date
summary
icon
password
前言
如果你在使用 Notion 记录一些知识/生活,通过 Nobelium 构建一个博客网站是一个不错的分享内容的方式。
本文将介绍通过
Nobelium
项目将个人博客托管到 Vercel,再绑定个人域名的操作过程。如果你按照本文操作,那么最后能够收获外观不错的个人博客,并且你可以在 Notion 上撰写你的博客,内容会自动同步到个人博客中。
![notion image](https://cdn.sspai.com/2021/05/16/f544afc31cef51741f311291dd4a4618.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=719fe35f-9987-4fa3-a40f-0f41a8f120cf)
演示地址
http://nobelium.tangly1024.com/ 此站点就是用Nobelium搭建博客
另外,我在Nobelium的基础上,又二次开发了一个博客,感兴趣的话可以阅读本篇:https://www.tangly1024.com/article/notion-next
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc23bc4e6-690c-45bf-9f97-b658fe47cdd1%2FUntitled.png?table=block&id=292cd528-5840-4b5c-8d7e-ce5803cc6a4d&t=292cd528-5840-4b5c-8d7e-ce5803cc6a4d&width=3352&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc23bc4e6-690c-45bf-9f97-b658fe47cdd1%2FUntitled.png?table=block&id=292cd528-5840-4b5c-8d7e-ce5803cc6a4d&t=292cd528-5840-4b5c-8d7e-ce5803cc6a4d&width=3352&cache=v2)
基础知识
- Nobelium :一个将Notion 做为CMS的静态博客项目,它具有以下特点:
- 快速的页面渲染和响应式设计
- 高效编译器的快速静态页面生成
- 部署在免费、高速的 Vercel 平台
- 支持增量式更新,更新文章后无需重复部署
- 评论、宽页面、搜索和标签
- 订阅、网站统计、Web Vital 分析…… 还有更多功能待你发现
- 丰富的配置项,更支持多语言
- 使用
Tailwind CSS
,轻松实现二次开发
🚀 秒开,设备全适配
🤖 自动,无需重新部署
🚙 全功能,完全不操心
🎨 美观,轻松自定义
🕸 网址美观、搜索引擎优化
Vercel:一项对开源项目免费的托管服务。Vercel 是一项集部署发布、服务托管、证书部署等等为一体的自动化的托管服务器。
- Vercel 面向开源项目是免费的(意味着其实你不需要花费任何钱);
- Vercel 能够自动将开发模式下的代码「转变」为可以对外提供服务的网页(意味着上手成本比较低);
Vercel 做的非常好,功能完善到你无需知道太多专业知识,就可以部署独立域名、带安全证书的网站。
Notion: 这款产品究竟有多好用,无需我在此赘言。个人比较喜欢 block 的排版方式,有一种样式尽在掌握的感觉。
虽然 Notion 自己也有页面分享功能,但是限制较多:
- 不支持自定义域名,第三方支持大多需要付费
- 加载速度较慢,做 SEO 也比较困难
因此直接拿 Notion 分享页面做个人 blog 站点有些勉强。
开始部署
如果你熟悉各种开源项目,那么其实 Nobelium 的 README 已经详细介绍了具体部署的步骤,如果你只是普通的 Notion 用户,那么可以跟着以下步骤进行:
(1)拷贝模板,并分享
1. 打开 Nobelium 提供的 Notion 模板,拷贝这个模板到自己的 Notion Workspace 中。
![notion image](https://cdn.sspai.com/2021/05/16/cb1c5b865fa7a77c16c53452cd1125f1.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=7a2ccab5-4584-41c3-8c4d-0a36f09d18ae)
点击 Duplicate 拷贝模板到自己的Notion中
2. 将自己Workspace 中的这个页面分享出去: Share to web
![notion image](https://cdn.sspai.com/2021/05/16/ad532f627c8b4f29dee949915f611e9c.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=c3535122-1d2b-4f10-92fc-816855be828f)
当然,如果你不想公开这个页面,你也是可以通过 Token 的方式来让 Nobelium 抓取内容的,由于 Notion 后续会提供 API ,并且临时获取的 Token 也存在过期的问题,本文不做介绍,读者可以自行参考 README 找到相关的说明。
(2)复制仓库代码
将 Nobelium Github项目 Fork到自己的仓库(点击一下 Fork 按钮即可)
![notion image](https://cdn.sspai.com/2021/05/16/b5d6c349722776dbcfd6c3cb81c34bae.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=99a21983-f2d5-483c-a822-99c31332783f)
这里对不了解 GitHub 的 Notion 用户解释一下,Fork 其实就是 Notion 的 Duplicate ,也就是把这个项目拷贝到自己的 GitHub 里面,这边你才可以对这个项目的代码进行编辑。拷贝后就能看到「你的ID/nobelium」 ,这就表示这个项目现在在你的仓库中
![notion image](https://cdn.sspai.com/2021/05/16/751e8e58eb8770eb9466864d63a471b6.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=d35138ce-1280-4cc4-b6c7-7eff98f81a41)
Fork 后的项目,就可以编辑啦
(3) 修改配置文件
找到
blog.config.js
这个文件,点击进入到预览页面:![notion image](https://cdn.sspai.com/2021/05/16/35db57df89fe73755c3d48d6c1e83cee.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=1a2ffd65-1517-4592-a899-0dd0bf155cc6)
找到 blog.config.js 文件 点击编辑按钮,点击编辑按钮进行编辑:
![notion image](https://cdn.sspai.com/2021/05/16/9c6b6b7d791bb92c3fa38854e2fd40c7.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=74644fde-f4e5-42ea-a71b-a93ecc799501)
这里可以修改一些博客的基本信息:
title
填写你博客的名称
author
填写作者名称
email
你的邮箱地址(如果你觉得有必要的话)
link
你的博客地址
description
博客的描述
以及外观相关的appearance
、font
、lightBackground
、darkBackground
配置可以进行修改。开发者的文档注释非常详细,可以直接参考文件内的注释进行修改。除了
blog.config.js
外,你还可以替换项目的图标等内容,这些文件都存储在 public
这个文件夹中,点击 「Add file」 按钮,可以将文件上传到此处进行替换,保持文件名称一致即可(可以先修改原文件的名称,再上传一份自定义的文件)。![notion image](https://cdn.sspai.com/2021/05/16/3394d8158a5a95d6aa2001e1f03d0862.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=af1d4942-5663-4ba7-8062-eab171cf8a66)
修改 public 中的文件,对网站样式进行自定义
(4)登陆到 VERCEL 进行部署操作
打开 https://vercel.com/ ,然后点击 Sign up 选中 「Continue with GitHub」。
![notion image](https://cdn.sspai.com/2021/05/16/ef68e32bf20526c7e384fa198772e53c.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=8f583192-dc28-4532-9507-711898d7554b)
授权使用 Github 登陆到 Vercel,接着会弹出 「Import Git Repository」(如果没有,那么点击右上角的 「New」),选择 Nobelium 这个项目,点击 「Import」,选择个人账号,开始部署操作:
![notion image](https://cdn.sspai.com/2021/05/16/53e2e7dc7b99ffae087ca0a20bd698f1.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=b504a4b8-11a0-433b-9ad8-7ee442f070dc)
![notion image](https://cdn.sspai.com/2021/05/16/d2aa3876dff7dae55ef29ce6369ae487.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=eeea6ffa-18b6-43ee-806f-95d342256597)
展开 「Environment Variables」,即环境变量,填写
NOTION_PAGE_ID
,以及对应的值:![notion image](https://cdn.sspai.com/2021/05/16/aae378410646f61b695aa484d3cd7603.gif?t=4738ae56-14cf-46f1-bc1b-8e32f695a474)
关于 Notion page id,可以直接看:
![notion image](https://cdn.sspai.com/2021/05/16/87534799dcd151167c69675e4471641b.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=8078a5bf-133a-492d-a86e-8dd2f96738ab)
就是分享链接中
?v=
前面的那段字符。确认后,点击 「Add」:最后一步,就是点击 「Deploy」,开始部署,右侧会显示部署的过程:
![notion image](https://cdn.sspai.com/2021/05/16/e728bd10cdfcabe91f608b1e64e51136.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=f475958d-4c43-4f22-bbd3-7fdcdec7874d)
部署 完成后,点击「Visit 」就可以看到博客网站啦!
![notion image](https://cdn.sspai.com/2021/05/16/b5353a713b714c838ffa8a6693733c91.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=d54fe957-84c7-4b7b-8b90-bea5cbed64a8)
绑定自己的域名
在 Vercel 中打开项目,选择「Settings」,然后选中「Domains」,添加自己的域名即可。添加后,需要去域名服务商中,设置一下解析,CNAME 解析即可。
![notion image](https://cdn.sspai.com/2021/05/16/161cf29156f51eddfff4070bb90b14da.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=a20fb5d3-cf84-4b29-8c28-969e4176de1b)
当然,如果你输入域名后,网页的域名跳转了,你也可以再设置一下,将 「Redirect to」,选为 「No Redirect」。
![notion image](https://cdn.sspai.com/2021/05/16/bda60d5af6716cb45984b6b36f54341c.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1&t=3becd773-202b-4481-97f7-d01e30d73911)
注意事项
- about 页面可以在 Notion 中创建一个 slug 为 about ,type 为 Page 的内容,在其中填写内容即可;
- 其他问题可以参考 GitHub 中的 issue 页面;
总结
Nobelium 这个项目还提供了网页信息统计、评论等功能,如果你有一定的编程基础,也可以给自己的博客添加这些配置。
博客可能并不是当今中文互联网最好的承载个人内容的方式,但我依然认为,个人博客是仍是当今最浪漫的方式。愿意维护自己博客的人,想必也都是理想且烂漫的人。文字独特的魅力,是视频音频等其他多媒体形式无法代替的。
参考
原项目Github仓库
少数派原文链接
行动建议
你的notion博客网站搭建成功了吗,不妨在评论区,留下你的博客地址,让我看看吧~
- 作者:Tangly
- 链接:https://blog.tangly1024.com/article/notion-nobelium-vercel
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。