如何用Notion搭建自己的博客
如何用Notion搭建自己的博客

如何用Notion搭建自己的博客

Created
2021-12-02
Tags
博客
Notion
Vercel
置顶
Last Modify
2022-01-10 / 07:05 AM
💡
首先是效果展示,也就如本博客所展示的一样。 If anyone needs an English version of this tutorial, you can leave a comment to me.

支持特性:

  • 完全免费,且支持评论功能
  • 搭建操作简单,最全最细教学
  • 系统一经搭建,后续操作只需在 Notion 即可完成,不再需要通过 Git 来完成博客更新
  • 支持搜索功能(感觉只能搜索标题)
  • 支持白天/黑夜模式 🌑
  • 增加 Google Analytics 分析功能
  • 图片点击放大功能🔍 
  • 支持 sitemap,进行简单的 SEO 优化
  • 可爱的 Feedback,提升博客活力🔥

快速开始:

  • fork 上面的仓库,然后把 fork 后的仓库 clone 到本地
  • 修改配置文件 site.config.js (修改内容见下方)
  • 本地运行:
yarn
yarn dev
运行成功后,打开 http://localhost:3000
notion image

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 页面右上角的 ShareShare to web
💡
我们的 Notion 页面需要在 Share 下打开 Share to web

2. 部署到 Vercel

在本地运行没有问题后,我们可以开始尝试进行部署,首先把前面修改好的代码 pushGithub
然后打开上面的链接,用 Github 账号登录(会自动创建 Vercel 账号)
点击 New Project
notion image
在这里添加我们的仓库,先点击 Add Github Namespace
notion image
在弹窗中选择 Fork 后得到的自己的仓库:
notion image
点击绿色的 Save 按钮保存后,再点击这里的 Import 导入仓库:
notion image
然后 Vercel 就会自动部署我们的仓库代码,等待部署完成后,我们可以点击 DOMAINS 下的链接进行访问:
notion image

功能添加:

1. 搜索

开启搜索功能的关键是把配置中的 domain 配置正确:
// site.config.js
module.exports = {
  ...
  domain: 'nextjs-notion-starter-kit-frankcbliu.vercel.app',
}
我们要把上面的域名改完你在 vercel 上获得的域名,配置完成后,一样需要提交代码到 Github 上, push 完成后, Vercel 会自动进行更新。
💡
我们还可以通过 command + P 的快捷键来快速打开搜索栏,不过搜索结果其实挺慢的,而且不能搜索内容,不是特别好用。

2. 图片预加载(可选)

效果如下图所示:
notion image
这里要用到我们一开始的配置中关掉的 isPreviewImageSupportEnabled,在将它改为 true 之前,我们需要完成一些预备工作:
  • 拿到三个配置项的值:
    • GCLOUD_PROJECT
    • GOOGLE_APPLICATION_CREDENTIALS
    • FIREBASE_COLLECTION_IMAGES
  • 在服务端,通过 Vercel 的环境变量进行添加
  • 在本地测试环境中,通过添加 .env 文件

2.1 获取 GCLOUD_PROJECT

首先在 Google FileBase 中创建项目:
然后进入到如下页面:
notion image
step3 我们拿到的项目 ID 就是 GCLOUD_PROJECT

2.2 获取 GOOGLE_APPLICATION_CREDENTIALS

点击上面的链接,然后如下图进行操作:
notion image
按照步骤 创建服务账号 中的描述完成创建,注意,包括下图中的步骤:
notion image
:拿到 json 文件后,我们通过文本编辑器(例如: VS Code)打开,然后全部复制,打开一个 Base64 在线编码网站:
然后如下图进行操作:
notion image
得到 Base64 编码字符串后,这个就是我们的 GOOGLE_APPLICATION_CREDENTIALS

2.3 获取 FIREBASE_COLLECTION_IMAGES

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

2.4 Vercel 环境变量配置

具体操作如图所示:
notion image
具体的添加步骤如下:
notion image
配置结果如下:
notion image

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 项目
notion image
至于 utterancesGitHubLabel,这只是自动打的标签名,可以根据情况修改:
notion image

4. Google Analytics(建议)

首先你需要先拿到 tracking Id,然后和上面类似,配置到 Vercel 的环境变量中:
GOOGLE_ANALYTICS_TRACKING_ID=你的trackingID
格式大致如下:
notion image

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
 
你觉得这篇文章怎么样?
YYDS
比心
加油
菜狗
views

Loading Comments...