Apps2021 年 3 月 17 日 12:00

Nobelium —— 基于 Notion 的静态博客

Nobelium 是一个使用 Next.js + Notion 第三方 API 实现的，部署在 Vercel 上的静态博客系统。

本文更新于 1627 天前，其中部分内容可能已经过时。

Nobelium 是什么

Nobelium 是一个使用 Next.js + Notion 第三方 API 实现的，部署在 Vercel 上的静态博客系统。作者是 Notion 中文社区管理团队的 @Craig Hart。

🔗 GitHub｜Demo

特点

部署在 Vercel，配合 Next.js，实现超快的响应速度
使用 Next.js 实现，配合 ISG，更新 Notion 文章无需重新部署
使用 Tailwind CSS 实现样式，方便二次定制
响应式设计，移动端友好
支持搜索，单独筛选页面
Tag 标签、RSS feed… 还有更多！

部署指南

本文不会从注册账号讲起，你可以从其他很多地方获取这些基本知识。

准备

Notion 账号
GitHub 账号
Vercel 账号
一个域名（非必需）

Duplicate 模版，获取 Page ID

在 Notion 中 Duplicate 此 Notion 模版，并打开 Share to web。

然后 Copy link 保存下来复制的链接，我们需要从中提取出 Page ID。例如，

code.php

https://www.notion.so/skylershu/f7ac6993a72e413f871b6ce4bb96d603?v=7672ba01dbcc4e188895816f975db6c1
https://www.notion.so/skylershu/f7ac6993a72e413f871b6ce4bb96d603?v=7672ba01dbcc4e188895816f975db6c1
1

这个链接的格式是这样的：https://notion.so/用户名/PageID?v=***，我们需要的只有 Page ID。

Fork GitHub repo

在 GitHub 中 Fork 此 repository，fork 之后修改 blog.config.js。

按照提示修改引号中的内容，其余保持默认即可。

code.javascript

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
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
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

我们还需要修改 /public 文件夹下的头像，格式、大小可以参考 GitHub 中的图片大小。

部署到 Vercel

前往 vercel.com 登录，在 dashboard 点击 New Project，然后 Import Git Repository 从 GitHub 导入此前 Fork 的 Repository。

选择自己的账号后，填入环境变量 Environment Variables。

NAME 填写 NOTION_PAGE_ID
VALUE 填写步骤一中获取的 Page ID。

这里一定要点击 Add，VALUE 会自动加密，然后点击 Deploy，当看到以下页面即部署成功。

自定义域名

Vercel 会给我们分配一个域名（可以修改），比如我这里的 https://skylers.vercel.app/。如果你自己有域名的话，可以前往 Vercel > Project Settings > Domains 添加域名。然后根据提示在域名后台添加一条 A 记录或 CNAME 记录即可。Vercel 会十分友好地自动生成 SSL 证书。

配合 Cloudflare 使用

最近发现部分地区 Vercel 速度很慢或者无法访问，可使用 Cloudflare 中转。首先，你需要将域名服务器更改为 Cloudflare。

创建新的 DNS 记录，类型为 CNAME，名称为 @，记录值为 cname.vercel-dns.com。
在 CloudFlare 站点管理面板中选择 SSL/TSL 选项，设置 SSL/TLS 加密模式为完全。
在 CloudFlare 管理面板规则 (Rules) 选项，创建页面规则，输入 /.well-known/*，选择关闭安全性 (Disable Security)，保存规则。