Notion_Blog2:搭建

💡

首先是效果展示，也就如本博客所展示的一样。 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

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

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


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

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


module.exports = {
  rootNotionPageId: '6a76fdd9ec6d4ae2855aa790d620eec4',
  ...

  isPreviewImageSupportEnabled: false,
}

💡

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

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

💡

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

2\. 部署到 `Vercel`

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

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

点击 New Project：

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

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

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

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

功能添加：

1\. 搜索

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


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

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

💡

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

2\. 图片预加载（可选）

效果如下图所示：

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

拿到三个配置项的值：

GCLOUD_PROJECT

GOOGLE_APPLICATION_CREDENTIALS

FIREBASE_COLLECTION_IMAGES

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

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

2.1 获取 GCLOUD\_PROJECT

首先在 Google FileBase 中创建项目：

然后进入到如下页面：

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

2.2 获取 GOOGLE\_APPLICATION\_CREDENTIALS

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

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

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

然后如下图进行操作：

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

2.3 获取 FIREBASE\_COLLECTION\_IMAGES

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

2.4 Vercel 环境变量配置

具体操作如图所示：

具体的添加步骤如下：

配置结果如下：

2.5 本地测试环境配置

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

修改成：


 GOOGLE_APPLICATION_CREDENTIALS=填入前面获取的值

GCLOUD_PROJECT=你的项目 ID，也是在前面就获取了的

FIREBASE_COLLECTION_IMAGES=images

2.6 修改配置

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


module.exports = {
  ...

  isPreviewImageSupportEnabled: true,
}

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

3\. 评论功能（建议）

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


module.exports = {
  ...

  utterancesGitHubRepo: 'frankcbliu/awesome-nextjs-notion-blog',
  utterancesGitHubLabel: '博客评论',
}

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

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

4\. Google Analytics（建议）

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


GOOGLE_ANALYTICS_TRACKING_ID=你的trackingID

格式大致如下：

如何用Notion搭建自己的博客