如何用Notion搭建自己的博客

💡

首先是效果展示，也就如本博客所展示的一样。 If anyone needs an English version of this tutorial, you can leave a comment to me.

支持特性：

完全免费，且支持评论功能

搭建操作简单，最全最细教学

系统一经搭建，后续操作只需在 Notion 即可完成，不再需要通过 Git 来完成博客更新

支持搜索功能（感觉只能搜索标题）

支持白天/黑夜模式 🌑

增加 Google Analytics 分析功能

图片点击放大功能🔍

简单表格 (目前 react-notion-x 还不支持该特性)

支持 sitemap，进行简单的 SEO 优化

可爱的 Feedback，提升博客活力🔥

快速开始：

GitHub - frankcbliu/awesome-nextjs-notion-blog: Deploy your own Notion-powered website in minutes with Next.js and Vercel.

基于 Next.js、 Notion 实现的个人博客系统修改node_modules/进行patch后，vercel需要重新deploy一下，否则会使用默认的依赖包，导致patch失败。 The perfect starter kit for building websites with Next.js and Notion. This project based on transitivebullsh.it. It uses Notion as a CMS, fetching content from Notion and then uses Next.js and react-notion-x to render everything. The site is then deployed to Vercel.

https://github.com/frankcbliu/awesome-nextjs-notion-blog

GitHub - frankcbliu/awesome-nextjs-notion-blog: Deploy your own Notion-powered website in minutes with Next.js and Vercel.

fork 上面的仓库，然后把 fork 后的仓库 clone 到本地

修改配置文件 site.config.js （修改内容见下方）

本地运行：

yarn
yarn dev

运行成功后，打开 http://localhost:3000

1. 替换成自己的 `Notion` 内容

首先打开我们自己的 Notion 页面，查看 URL ，记录下这最后面的字符串：

https://www.notion.so/frankcbliu/6a76fdd9ec6d4ae2855aa790d620eec4

然后在根目录下的 site.config.js 文件中，把 rootNotionPageId 的值改为前面记录的字符串：

module.exports = {
  rootNotionPageId: '6a76fdd9ec6d4ae2855aa790d620eec4',
  ...
  // 同时，把下面这个key的值由 true 改为 false
  isPreviewImageSupportEnabled: false,
}

💡

上面修改 site.config.js 的操作可以在本地修改，然后 add + commit + push 推到远程仓库上；也可以直接在 Github 上修改文件后提交。

Notion 页面右上角的 Share → Share to web — `Notion` 页面右上角的 `Share` → `Share to web`

💡

我们的 Notion 页面需要在 Share 下打开 Share to web 。

2. 部署到 `Vercel`

在本地运行没有问题后，我们可以开始尝试进行部署，首先把前面修改好的代码 push 到 Github

Dashboard - Vercel

https://vercel.com/dashboard

然后打开上面的链接，用 Github 账号登录（会自动创建 Vercel 账号）

点击 New Project：

在这里添加我们的仓库，先点击 Add Github Namespace：

在弹窗中选择 Fork 后得到的自己的仓库：

点击绿色的 Save 按钮保存后，再点击这里的 Import 导入仓库：

然后 Vercel 就会自动部署我们的仓库代码，等待部署完成后，我们可以点击 DOMAINS 下的链接进行访问：

功能添加：

1. 搜索

开启搜索功能的关键是把配置中的 domain 配置正确：

// site.config.js
module.exports = {
  ...
  domain: 'nextjs-notion-starter-kit-frankcbliu.vercel.app',
}

我们要把上面的域名改完你在 vercel 上获得的域名，配置完成后，一样需要提交代码到 Github 上， push 完成后， Vercel 会自动进行更新。

💡

我们还可以通过 command + P 的快捷键来快速打开搜索栏，不过搜索结果其实挺慢的，而且不能搜索内容，不是特别好用。

2. 图片预加载（可选）

效果如下图所示：

这里要用到我们一开始的配置中关掉的 isPreviewImageSupportEnabled，在将它改为 true 之前，我们需要完成一些预备工作：

Getting started with authentication | Authentication | Google Cloud

This topic shows how to quickly authenticate to a Google Cloud API for testing purposes. It does not show how to authenticate to non-Google Cloud APIs, such as the Google Maps Platform APIs. For information about API keys for Google Maps Platform APIs and SDKs, see the Google Maps documentation.

https://cloud.google.com/docs/authentication/getting-started#cloud-console

拿到三个配置项的值：

GCLOUD_PROJECT
GOOGLE_APPLICATION_CREDENTIALS
FIREBASE_COLLECTION_IMAGES

在服务端，通过 Vercel 的环境变量进行添加

在本地测试环境中，通过添加 .env 文件

2.1 获取 GCLOUD_PROJECT

首先在 Google FileBase 中创建项目：

Firebase

由 Google 技术驱动，受到各种规模公司（从初创公司到跨国企业）中诸多应用开发团队的青睐 We just wrapped up Firebase Summit 2021! Catch up on everything we announced and learn how Firebase can help you accelerate app development, run your app with confidence, and scale with ease.

https://firebase.google.com/?hl=zh-cn

然后进入到如下页面：

在 step3 我们拿到的项目 ID 就是 GCLOUD_PROJECT

2.2 获取 GOOGLE_APPLICATION_CREDENTIALS

点击上面的链接，然后如下图进行操作：

按照步骤创建服务账号中的描述完成创建，注意，包括下图中的步骤：

:拿到 json 文件后，我们通过文本编辑器(例如: VS Code)打开，然后全部复制，打开一个 Base64 在线编码网站：

Base64 在线编码解码 | Base64 加密解密 - Base64.us

base64 = btoa(str); 或 var s = CryptoJS.enc.Utf8.parse(str); base64 = CryptoJS.enc.Base64.stringify(s);

https://base64.us/

然后如下图进行操作：

得到 Base64 编码字符串后，这个就是我们的 GOOGLE_APPLICATION_CREDENTIALS

2.3 获取 FIREBASE_COLLECTION_IMAGES

这个其实可以自定义，我们设置为 images

注意，在 FireBase 中创建三个文档:

其名字与代码中 lib/config.ts 下的默认值对应

也可在参考的 .env.example 中修改(修改后改名为 .env)

2.4 Vercel 环境变量配置

具体操作如图所示：

具体的添加步骤如下：

配置结果如下：

2.5 本地测试环境配置

我们需要复制一份 .env.example，并且改名为 .env，然后把

# .env.example
# Optional (for preview image support)
#GOOGLE_APPLICATION_CREDENTIALS=

# Optional (for preview image support)
#GCLOUD_PROJECT=

# Optional (for preview image support)
#FIREBASE_COLLECTION_IMAGES=

修改成：

# .env
# Optional (for preview image support)
GOOGLE_APPLICATION_CREDENTIALS=填入前面获取的值

# Optional (for preview image support)
GCLOUD_PROJECT=你的项目 ID，也是在前面就获取了的

# Optional (for preview image support)
FIREBASE_COLLECTION_IMAGES=images

2.6 修改配置

完成前面的步骤后，我们只需要再修改 site.config.js：

module.exports = {
  ...
  // 把下面这个key的值由 false 改为 true
  isPreviewImageSupportEnabled: true,
}

然后提交代码重新部署即可。

3. 评论功能（建议）

同样是修改 site.config.js 文件：

module.exports = {
  ...
  // Utteranc.es comments via GitHub issue comments (optional)
  utterancesGitHubRepo: 'frankcbliu/awesome-nextjs-notion-blog',
  utterancesGitHubLabel: '博客评论',
}

你需要正确填写你 forked 后的项目名称，或者是你想用来存放评论的 Github 项目

至于 utterancesGitHubLabel，这只是自动打的标签名，可以根据情况修改：

4. Google Analytics（建议）

首先你需要先拿到 tracking Id，然后和上面类似，配置到 Vercel 的环境变量中：

GOOGLE_ANALYTICS_TRACKING_ID=你的trackingID

格式大致如下：

5. 简单表格-功能展示

Name

Text

Background

Select

Text LM (Hex)

Text LM (RGB)

Text DM (Hex)

Text DM (RGB)

BG LM (Hex)

BG LM (RGB)

BG DM (Hex)

BG DM (RGB)

Select LM (Hex)

Select LM (RGB)

Select DM (Hex)

Select DM (RGB)

Default

Default

Default

37352F

55, 53, 47

FFFFFF (90%)

255, 255, 255,0.9

FFFFFF

255, 255, 255

2F3437

47, 52, 55

CECDCA (50%)

206,205,202,0.5

505558

80,85,88

Gray

Gray

Gray

606062 (93%)

96, 96, 98, 0.93

8D8F91

141, 143, 145

EBECED

235, 236, 237

454B4E

69, 75, 78

9B9A97 (40%)

155,154,151,0.4

979A9B (50%)

151,154,155,0.5

Brown

Brown

Brown

AE661D

174, 102, 29

D69050

214, 144, 80

E9E5E3

233, 229, 227

434040

67, 64, 64

8C2E00 (20%)

140,46,0,0.2

937264 (50%)

147,114,100,0.5

Orange

Orange

Orange

D25216

210, 82, 22

F47C4B

244, 124, 75

FAEBDD

250, 235, 221

594A3A

89, 74, 58

F55D00 (20%)

245,93,0,0.2

FFA344 (50%)

255,163,68,0.5

Yellow

Yellow

Yellow

CB912F

203, 145, 47

F7B75B

247, 183, 91

FBF3DB

251, 243, 219

59563B

89, 86, 59

E9A800 (20%)

233,168,0,0.2

FFDC49 (50%)

255,220,73,0.5

Green

Green

Green

3E8F35

62, 143, 53

74A16A

116, 161, 106

DDEDEA

221, 237, 234

354C4B

53, 76, 75

00876B (20%)

0,135,107,0.2

4DAB9A (50%)

77,171,154,0.5

Blue

Blue

Blue

2183BE

33, 131, 190

5AA0D5

90, 160, 213

DDEBF1

221, 235, 241

364954

54, 73, 84

0078DF (20%)

0,120,223,0.2

529CCA (50%)

82,156,202,0.5

Purple

Purple

Purple

975DBE

151, 93, 190

A576CE

165, 118, 206

EAE4F2

234, 228, 242

443F57

68, 63, 87

6724DE (20%)

103,36,222,0.2

9A6DD7 (50%)

154,109,215,0.5

Pink

Pink

Pink

CB3E84

203, 62, 132

EB68A1

235, 104, 161

F4DFEB

244, 223, 235

533B4C

83, 59, 76

DD0081 (20%)

221,0,129,0.2

E255A1 (50%)

226,85,161,0.5

Red

Red

Red

D03C3C

208, 60, 60

F86660

248, 102, 96

FBE4E4

251, 228, 228

594141

89, 65, 65

FF001A (20%)

255,0,26,0.2

FF7369 (50%)

255,115,105,0.5