Nobelium
Skyler Shu
Nobelium 是什么
Nobelium 是一个使用 Next.js + Notion 第三方 API 实现的,部署在 Vercel 上的静态博客系统。作者是 Notion 中文社区管理团队的 @Craig Hart。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/c65c8875-78c4-4a6e-ba87-42104d5de88a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T155840Z&X-Amz-Expires=3600&X-Amz-Signature=44ab54598fd84bca1bfe7d32af28eefd93b7622a2f614db5cf0ed773a029604a&X-Amz-SignedHeaders=host&x-id=GetObject)
Features
部署指南
本文不会从注册账号讲起,你可以从其他很多地方获取这些基本知识。
准备
1. Duplicate 模版,获取 Page ID
在 Notion 中 Duplicate 此 Notion 模版,并打开 Share to web。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/15806eac-6215-4d50-8ce4-6829fd8c7259/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T155840Z&X-Amz-Expires=3600&X-Amz-Signature=904901cb98d9bf0dc9d9b73bb06e4312e537dd3dad6f9ef60a074500b2087de9&X-Amz-SignedHeaders=host&x-id=GetObject)
然后 Copy link 保存下来复制的链接,我们需要从中提取出 Page ID。例如,
php
1
https://www.notion.so/skylershu/f7ac6993a72e413f871b6ce4bb96d603?v=7672ba01dbcc4e188895816f975db6c1
这个链接的格式是这样的:https://notion.so/用户名/PageID?v=***,我们需要的只有 Page ID。
2. Fork GitHub repo
在 GitHub 中 Fork 此 repository,fork 之后修改 blog.config.js。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/b0ee7931-4e38-4a26-9a7c-de3c7aa115b4/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T155840Z&X-Amz-Expires=3600&X-Amz-Signature=ebafcae0fe6411ba89c129918ebe42dd226dc2ba07b80ef6a7a600d597f107b6&X-Amz-SignedHeaders=host&x-id=GetObject)
按照提示修改引号中的内容,其余保持默认即可。
javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
const BLOG = { title: 'CRAIGARY', // 标题 author: 'Craig Hart', // 作者 email: 'i@craigary.net', // 邮箱 link: 'https://nobelium.vercel.app', // 链接或域名 description: 'This gonna be an awesome website.', // 描述 lang: 'en-US', // 语言 appearance: 'auto', // ['light', 'dark', 'auto'],外观 (浅色, 深色或自动) lightBackground: '#ffffff', // 浅色状态下的背景色,请使用十六进制颜色,不要忘记 '#' 号,如 #ffffff darkBackground: '#111827', // 深色状态下的背景色,请使用十六进制颜色,不要忘记 '#' 号 path: '', // leave this empty unless you want to deploy Nobelium in a folder since: 2021, // if leave this empty, current year will be used. postsPerPage: 7, showAbout: true, // WIP showArchive: true, // WIP socialLink: 'https://twitter.com/craigaryhart', // 社交链接 seo: { keywords: ['Blog', 'Website', 'Notion'], googleSiteVerification: '' // Remove the value or replace it with your own google site verification code }, notionPageId: process.env.NOTION_PAGE_ID, // DO NOT CHANGE THIS!!! analytics: { provider: '', // Currently we support Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it. ackeeConfig: { tracker: '', // e.g 'https://ackee.craigary.net/tracker.js' dataAckeeServer: '', // e.g https://ackee.craigary.net , don't end with a slash domainId: '' // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b' }, gaConfig: { measurementId: '' // e.g: G-XXXXXXXXXX } }, comment: { // support provider: gitalk provider: '', // leave it empty if you don't need any comment plugin gitalkConfig: { repo: '', // The repository of store comments owner: '', admin: [], clientID: '', clientSecret: '', distractionFreeMode: false } } } // export default BLOG module.exports = BLOG
我们还需要修改 /public 文件夹下的头像,格式、大小可以参考 GitHub 中的图片大小。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/b4f4d382-4610-4abd-a3e8-4538418808e1/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T155840Z&X-Amz-Expires=3600&X-Amz-Signature=ae1e2202c4f8bea687d6f1bc751183b4171616650eee862515482db9ab8d16a1&X-Amz-SignedHeaders=host&x-id=GetObject)
3. 部署到 Vercel
前往 vercel.com 登录,在 dashboard 点击 New Project,然后 Import Git Repository 从 GitHub 导入此前 Fork 的 Repository。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/34d6a83d-7244-41c2-9d3c-fec1ebb820a9/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T155840Z&X-Amz-Expires=3600&X-Amz-Signature=bde0cdc72720311b67d3c413974c1129469ef58344be3540436014865a9a6e40&X-Amz-SignedHeaders=host&x-id=GetObject)
选择自己的账号后,填入环境变量 Environment Variables。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/8cefa57f-2c05-47f4-bf3c-0fc3ab6ed76a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T155839Z&X-Amz-Expires=3600&X-Amz-Signature=ad50a3b0f1cdbf03cc200ddbdde4e39ef8c4528785f069792bf269e08be0d827&X-Amz-SignedHeaders=host&x-id=GetObject)
这里一定要点击 Add,VALUE 会自动加密,然后点击 Deploy,当看到以下页面即部署成功。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/4dd5b0c7-a86f-4bc7-a944-f17d01185824/NYaq.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T155841Z&X-Amz-Expires=3600&X-Amz-Signature=1f2c46cb115dc9a93c45145ece42ed2a4ad70e5cfb4f2d0b7cc765f9579044d2&X-Amz-SignedHeaders=host&x-id=GetObject)
4. 自定义域名
Vercel 会给我们分配一个域名(可以修改),比如我这里的 https://skylers.vercel.app/。如果你自己有域名的话,可以前往 Vercel > Project Settings > Domains 添加域名。然后根据提示在域名后台添加一条 A 记录或 CNAME 记录即可。Vercel 会十分友好地自动生成 SSL 证书。
![](https://prod-files-secure.s3.us-west-2.amazonaws.com/fa0000c5-2109-4541-9955-5ebe681379c1/2d1b68ad-5be3-4cca-ba30-12de2c881355/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T155840Z&X-Amz-Expires=3600&X-Amz-Signature=8dfbfa80d46b0339d7f72b3fd80771752e8fc89c26001bd120c2057d23361a12&X-Amz-SignedHeaders=host&x-id=GetObject)
配合 Cloudflare 使用
部分地区 Vercel 速度很慢或者无法访问,可使用 Cloudflare 中转。首先,你需要 将域名服务器更改为 Cloudflare。
步骤一: 创建新的 DNS 记录,类型为 CNAME,名称为 @,记录值为 cname.vercel-dns.com。可以考虑将 www 一起加上。
步骤二: 在 CloudFlare 站点管理面板中选择 SSL/TSL 选项,设置 SSL/TLS 加密模式为完全。
步骤三: 在 CloudFlare 管理面板 规则 (Rules) 选项,创建页面规则,输入 /.well-known/*,选择 关闭安全性 (Disable Security),保存规则。
参考: