首先是效果展示,也就如本博客所展示的一样。
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,提升博客活力🔥
快速开始:
fork
上面的仓库,然后把fork
后的仓库clone
到本地
- 修改配置文件
site.config.js
(修改内容见下方)
- 本地运行:
yarn
yarn dev
运行成功后,打开 http://localhost:3000
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F56a491d3-449f-4e39-a7bb-c5b69ba9e08b%2FUntitled.png%3Fid%3Deefc24d7-f2eb-4c08-a853-7b4a87496b5f%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DUAaEqKtuxpNSbB2Pik1CdEq1d6NcTYq9Gr1E5ZcAKXk?table=block&id=eefc24d7-f2eb-4c08-a853-7b4a87496b5f&cache=v2)
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](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F95cc3ee8-7cae-49cd-bf97-fa3e0857ea08%2FUntitled.png%3Fid%3D83f7441c-02dc-4770-873b-2518f689af7f%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DbOeFc7P74LiNVYh3O-omCKUtOt8i6Tau02-YE4UQ6SI?table=block&id=83f7441c-02dc-4770-873b-2518f689af7f&cache=v2)
Notion
页面右上角的 Share
→ Share to web
我们的
Notion
页面需要在 Share
下打开 Share to web
。2. 部署到 Vercel
在本地运行没有问题后,我们可以开始尝试进行部署,首先把前面修改好的代码
push
到 Github
然后打开上面的链接,用
Github
账号登录(会自动创建 Vercel
账号)点击
New Project
:![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F66e85929-426f-48e3-b416-47491852999c%2FUntitled.png%3Fid%3Df12c562d-0ca5-4a24-ac44-7770929c3032%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DzASL8GhrhdQX0JIDEUYp4g9ZD-nYnHzDahWcDYAePvY?table=block&id=f12c562d-0ca5-4a24-ac44-7770929c3032&cache=v2)
在这里添加我们的仓库,先点击
Add Github Namespace
:![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2Fbb4224df-4759-441b-a659-68f96faac979%2FUntitled.png%3Fid%3D832c6512-01ae-4b2d-b3e3-f92629163d5e%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3Dl1CzCF5Dkl_CwkhMbZPpdAVmdgzfWybIgVhkiygy3UI?table=block&id=832c6512-01ae-4b2d-b3e3-f92629163d5e&cache=v2)
在弹窗中选择
Fork
后得到的自己的仓库:![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F9e569eb7-b5c6-4a36-8409-101744cf2ba1%2FUntitled.png%3Fid%3D07254440-10ac-4cfc-a05c-c51a8a129bfd%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3D9JIkFOhIKSY2Ih0KUOZfbiGtxtAMib21vzCtm9CriYQ?table=block&id=07254440-10ac-4cfc-a05c-c51a8a129bfd&cache=v2)
点击绿色的
Save
按钮保存后,再点击这里的 Import
导入仓库:![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F52ab3e6e-1d09-4aed-b8f4-4b3041cd1989%2FUntitled.png%3Fid%3Dfdd5226a-2b64-43d1-afe5-c5260a416951%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3Dmv4h45Cnxj_zpsIwxbpMHF9DK5mUe96I_VG0E8mIWUM?table=block&id=fdd5226a-2b64-43d1-afe5-c5260a416951&cache=v2)
然后
Vercel
就会自动部署我们的仓库代码,等待部署完成后,我们可以点击 DOMAINS
下的链接进行访问:![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F3d02ef68-ae0a-4379-8c16-9fd92c3ba5a3%2FUntitled.png%3Fid%3Dcb74b378-6f8b-42b0-b70b-d9cfa0079934%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3Do3eblJq4HJ3fiFiufaj0EvYcBwR_PSvTj98BZOBz9YQ?table=block&id=cb74b378-6f8b-42b0-b70b-d9cfa0079934&cache=v2)
功能添加:
1. 搜索
开启搜索功能的关键是把配置中的
domain
配置正确:// site.config.js
module.exports = {
...
domain: 'nextjs-notion-starter-kit-frankcbliu.vercel.app',
}
我们要把上面的域名改完你在
vercel
上获得的域名,配置完成后,一样需要提交代码到 Github
上, push
完成后, Vercel
会自动进行更新。我们还可以通过
command + P
的快捷键来快速打开搜索栏,不过搜索结果其实挺慢的,而且不能搜索内容,不是特别好用。2. 图片预加载(可选)
效果如下图所示:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F9e2f1251-04e8-4069-b64c-1c692023c194%2F2.gif%3Fid%3D26915a67-2c7f-499e-9473-29064b25a1ee%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DN5UryR9EZCVx_NVh4VbMk4uRMB43-wTOQtwmFmX9xLc?table=block&id=26915a67-2c7f-499e-9473-29064b25a1ee&cache=v2)
这里要用到我们一开始的配置中关掉的
isPreviewImageSupportEnabled
,在将它改为 true
之前,我们需要完成一些预备工作:- 拿到三个配置项的值:
GCLOUD_PROJECT
GOOGLE_APPLICATION_CREDENTIALS
FIREBASE_COLLECTION_IMAGES
- 在服务端,通过
Vercel
的环境变量进行添加
- 在本地测试环境中,通过添加
.env
文件
2.1 获取 GCLOUD_PROJECT
首先在
Google FileBase
中创建项目:然后进入到如下页面:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F5c448a37-9fd9-4af6-ace0-1fe0b83cfe83%2FUntitled.png%3Fid%3Dca262096-f71b-4ae3-9010-6fdb8d8619e5%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3D5a2FO5dryWqF-csZHkPYIf5A0mYlOQSP-kgchV93P08?table=block&id=ca262096-f71b-4ae3-9010-6fdb8d8619e5&cache=v2)
在
step3
我们拿到的项目 ID 就是 GCLOUD_PROJECT
2.2 获取 GOOGLE_APPLICATION_CREDENTIALS
点击上面的链接,然后如下图进行操作:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F39ebd2cc-336d-457b-8241-66061278af6b%2FUntitled.png%3Fid%3De8705cbf-4881-4f61-b0d2-e873bac0fdd2%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DVsUlXJU2Ig2-ZhLW8F1IY2EIqoGvn_iX4O4HmRWfhfw?table=block&id=e8705cbf-4881-4f61-b0d2-e873bac0fdd2&cache=v2)
按照步骤 创建服务账号 中的描述完成创建,注意,包括下图中的步骤:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2Fd83e7472-e18a-4b62-a4e2-3858f766e721%2FUntitled.png%3Fid%3D0b511458-a99c-4e59-b333-1050bc273562%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DndizF7P1oymk6qIJr9ltL4ffSL3wJCGB4Is4mh4Mphs?table=block&id=0b511458-a99c-4e59-b333-1050bc273562&cache=v2)
:拿到
json
文件后,我们通过文本编辑器(例如: VS Code)打开,然后全部复制,打开一个 Base64
在线编码网站:然后如下图进行操作:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F30e0afa3-f9be-40e9-933a-aee900bb1640%2FUntitled.png%3Fid%3Db410f794-4b32-496c-a58b-5aa01540ae1a%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DzC3NS3c3bGOOtvIFPRDcKCvfnVIAdNP0mtbmVJo2_M8?table=block&id=b410f794-4b32-496c-a58b-5aa01540ae1a&cache=v2)
得到
Base64
编码字符串后,这个就是我们的 GOOGLE_APPLICATION_CREDENTIALS
2.3 获取 FIREBASE_COLLECTION_IMAGES
这个其实可以自定义,我们设置为
images
注意,在
FireBase
中创建三个文档:![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F83930f02-64f4-4e74-adb8-958fb96ab7ff%2FUntitled.png%3Fid%3D9c93f6d0-aeda-46bc-9700-7c347168bea8%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DXs1sZzBwp-w014c2WYmCYA40YeG-ViBvnHbBM9_6dt8?table=block&id=9c93f6d0-aeda-46bc-9700-7c347168bea8&cache=v2)
其名字与代码中
lib/config.ts
下的默认值对应![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2Fb1adebf9-66c3-470d-8762-e3daea0f2385%2FUntitled.png%3Fid%3Df056f05c-6ae6-42b4-aef7-c83c11afd6cf%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DD17UM2CTrI8k269WJ0YENOMldCabN8fmUWwy2X_v6Sc?table=block&id=f056f05c-6ae6-42b4-aef7-c83c11afd6cf&cache=v2)
也可在参考的
.env.example
中修改(修改后改名为 .env
)2.4 Vercel 环境变量配置
具体操作如图所示:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2F5a1f82fb-cb32-4874-831b-27941c0dda3c%2FUntitled.png%3Fid%3D1595adf5-6914-4584-abfb-0fef1c9d97dd%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DPkHN7qQym-iQforKx4PNoGJ9Bvc96zFKQYRkfJLbe5o?table=block&id=1595adf5-6914-4584-abfb-0fef1c9d97dd&cache=v2)
具体的添加步骤如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2Fda558835-2f97-4c06-83f6-f96dee47df23%2FUntitled.png%3Fid%3D798f45d3-8a7d-4e20-b516-22d7352235b2%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3D0NS4lZBNnkj3CVjeqPOjkjXDRh1xjCYqdkcfj_0wk0M?table=block&id=798f45d3-8a7d-4e20-b516-22d7352235b2&cache=v2)
配置结果如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2Fefc70864-f190-41ac-9ea1-d356ff99e7a6%2FUntitled.png%3Fid%3Da9fe57a5-2241-4906-975d-3bf2d2aff366%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DusYz3bPGPXT4cmCl0hPBLjlb0EEY8FfsIlYKGY7q6Lk?table=block&id=a9fe57a5-2241-4906-975d-3bf2d2aff366&cache=v2)
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](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2Fc1b38daf-1238-49df-bd93-9cb2e80676c7%2FUntitled.png%3Fid%3D4f8827b3-a620-4c30-8b38-eb6cc3147693%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DkhXxXAQbrl4U4ZcnL3Oh-rSfTj2ZoPegweAHcPEsLsY?table=block&id=4f8827b3-a620-4c30-8b38-eb6cc3147693&cache=v2)
至于
utterancesGitHubLabel
,这只是自动打的标签名,可以根据情况修改:![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2Fa2970ba4-b321-44da-a6b1-6c9f626b283c%2FUntitled.png%3Fid%3D53b7e0ee-7a41-4cef-a732-e817aa36786a%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DnEjsIs5dXTvcNFEV5e-mlZ0tNIsN6CUHNF9RhhhCYig?table=block&id=53b7e0ee-7a41-4cef-a732-e817aa36786a&cache=v2)
4. Google Analytics(建议)
首先你需要先拿到
tracking Id
,然后和上面类似,配置到 Vercel
的环境变量中:GOOGLE_ANALYTICS_TRACKING_ID=你的trackingID
格式大致如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9b3b041b-5d31-4cc5-91d9-4437b659a00e%2Faff53830-a015-4307-9738-52406d2aa31f%2FUntitled.png%3Fid%3D450103a2-e37a-46cf-b3e8-8a6fb983f69e%26table%3Dblock%26spaceId%3D9b3b041b-5d31-4cc5-91d9-4437b659a00e%26expirationTimestamp%3D1722132000000%26signature%3DRDyDyar6AfR-1D2wHM4CRyYMwWDd-VfIBy0FREZAmcc?table=block&id=450103a2-e37a-46cf-b3e8-8a6fb983f69e&cache=v2)
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 |
Loading Comments...