Notion建站 | Notion-starter-kit 快速搭建独立博客

博主：三百斤的窜天猴
发布时间：2022 年 07 月 06 日
1371 次浏览
3 条评论
8813字数
分类： notion

![Notion建站 | Notion-starter-kit 快速搭建独立博客](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F88d9946a-42f4-44dd-86cc-7ec003ddc3f2%2FiShot2021-10-19_09.59.52.png?table=block&id=6ba370d9-762d-4dd3-8936-51dde92ebf10&cache=v2)

文章转载自[TANGLY’s BLOG](https://tangly1024.com/article/nextjs-notion-starter-kit)

## 前言

你是否想搭建一个属于自己的独立博客，碍于不懂得如何建站和网页开发？或者你不希望耗费精力处理 **网页设计** 、 **SEO优化** 、**数据库设计维护**等麻烦事。

试试这套成熟的解决方案，可以快速帮助你搭建一个属于自己的独立网站，免去大量开发维护的麻烦。几分钟就能把你的笔记本软件变成一个网站～

[工具说明](https://esxdidi.com/)

[Vercel](https://vercel.com/) ：对个人用户基本免费的程序托管平台，利用Vercel可以很便捷地[搭建静态Hexo博客](https://www.tangly1024.com/article/vercel)，甚至[创建一个API服务器](https://www.tangly1024.com/article/vercel-free-serverless-api)。

[Nextjs-Notion-Starter-Kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit) ： 这是作者自己开发、用于支撑个人博客/文件网站的开源项目。它使用 Notion 作为 CMS，从 Notion 获取内容数据，然后使用[Next.js](https://nextjs.org/)和[react-notion-x](https://github.com/NotionX/react-notion-x)来静态渲染所有内容。然后将该站点部署到[Vercel](http://vercel.com/)。

###

[特点](https://esxdidi.com/)

* 界面风格

![notion image](https://bj.esxdidi.com/)

* 首页是一个Notion的页面，完全在你的笔记中设计板面
* 使用reaction-notion-x库渲染Notion笔记的元素样式，与Notion软件中的样式基本一致，你也可以进行自定义
* 支持侧边Table Contents文章目录
* 支持Collection、Database等复杂Block的展示
* 支持手动日间、夜间模式
* 支持调用NotionAPI搜索文章
* 默认使用 [https://utteranc.es/](https://utteranc.es/) Github评论插件
* 支持[Fathom](https://usefathom.com/ref/42TFOZ) 统计，类似GoogleAnalystics

不足之处：

* 文章url不能自定义，默认读取notion的笔记标题，只支持英文，中文会被忽略

###

[演示地址](https://esxdidi.com/)

这篇文章将介绍如何用[Nextjs-Notion-Starter-Kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit)  这套方案搭建一个独立博客网站

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F373ce119-432d-45c9-86a6-0e9ba1f9e1cf%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D7b778f0ae249b8743be52edc9c317bbc08d12449082599c02b8d8027975dd8aa%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=cef8aa05-b83d-40d7-8f6f-0da4202e3888&cache=v2)

[快速搭建](https://esxdidi.com/)

**💡**

熟悉开源github项目的话，可以直接移步官方README文档，步骤说明已经十分想尽！ [Nextjs-Notion-Starter-Kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit)

###

1. [复制项目](https://esxdidi.com/)

在github上复制这个项目 [https://github.com/transitive-bullshit/nextjs-notion-starter-kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit)

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2b6d96c7-a462-47b8-bbb9-8b7e9f069275%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D8d06471f3959812601887e1ef2cdfcabe493a1a9fc6686a661d9091fcc095abc%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=72cdbb98-f9d4-4214-a03c-148df66221e2&cache=v2)

###

2.[修改配置](https://esxdidi.com/)

####

[编辑 site.config.js](https://esxdidi.com/)

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff3ecca5d-79cd-4fb5-9b1a-8f3cd89d9986%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D5943f9f6eff933e2b3f0a1d2f018bd50b837615cd2300ec5c8009b08a37fd944%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=7406c1d8-2327-4f2f-8df2-6a1c0383e4ec&cache=v2)

###

[配置说明](https://esxdidi.com/)

唯一必要做的就是编辑`rootNotionPageId`。这个值用来指定要呈现在网站上的首个页面；

* 您需要先**公开Share**您的Notion 页面，然后将链接复制到剪贴板。然后提取看起来像 的 URL 的最后一部分`d1b5dcf8b9ff425b8aef5ce6f0730202`，这是您页面的 Notion iD。
  ![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F49c7d91e-52a6-47fa-b3d7-7283eb77c29a%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Da5c82cb5b312cd9fabd51b1ff15ff05e9cf4e214997b447274d9c18093ac9039%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=160e9f6e-d61e-45d9-b85c-8117d95d8110&cache=v2)
* 建议是在首页上设置一个集合（可选），其中包含您的所有文章/项目/内容。然而，你的 Notion 工作区没有任何结构限制，因此可以像通常在 Notion 中一样随意添加内容。

[部署](https://esxdidi.com/)

注册并登录Vercel后台(建议是用Github登录)，点击部署新项目【New Project】

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5e813ce5-d1f0-4f29-bb54-a88a64207bed%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Db7b41ea514f1e7d0becad6293e13bab097e9c73d1cdf9c6944706595bf3c691f%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=c3f21fa4-f4ad-4e2b-926a-fd46ab4b9c75&cache=v2)

点击从github仓库导入项目：

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1817ae57-b45a-4fce-9e36-597b3d31e79e%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D236e2be04af09d098c462bb30ab97f935c9a190d4d8e3d2b4a150e0462180369%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=060a1848-3400-4d43-9870-c72651a80b2b&cache=v2)

在项目配置中找到deploy，直接点击部署

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F068e0848-a5ca-446c-8a7d-02706bc25a48%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D53956bfa41d88e8d180010795ea54d93675becb133b08ccb118a1bf545aba9e8%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=45f4f7f5-1116-4786-8e66-629ea1d0b70b&cache=v2)

部署完成后，点击Visit按钮访问你的站点。

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd16d7d8a-f01b-4dda-bdca-6715e2034ebf%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Dc57064df78670c8693a469c7485ddf8d35aa1001d3c683c13a42c4df7b559e9b%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=f77864f2-7c17-43c8-8489-29160d8314e1&cache=v2)

[域名映射](https://esxdidi.com/)

1.在项目面板中找到 Settings→Domains ； 输入你的域名，并点击Add。

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9b3a3d1f-efab-452f-afb2-edd182a203e4%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033458Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D5eeba288dff72b5ee4b48d33032c6c8efafb03b51c71c2bb7987e4d2002e0242%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=143e1078-42eb-4e30-a683-49f568ebe34f&cache=v2)

2.根据提示，在域名服务商后台配置Verccel的Cname，这里我距离用CloudFlare的域名解析服务；

**💡**

添加一个A类型，名称是你的域名，指向Vercel服务器 76.223.126.88
添加一个CNAME类型，名称为www，指向 cname-china.vercel-dns.com

![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fafee8d1f-d74f-4292-a46f-a10924ad2c9a%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220706%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220706T033457Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D79a156a14df072542346741469fa05a939e8b8e296ebda6d26a2454971382ea3%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=c96ee483-5bf4-4f92-9eaa-fc4fc9e43ba5&cache=v2)

最后修改：2022 年 07 月 06 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 * （请使用真实邮箱地址，方便及时接收评论回复！）

打卡

私密评论

名称 *

🎲

邮箱 *

地址

3 条评论

知名的女孩
August 1st, 2022 at 02:35 pm

额，这个评论好有意思OωO滴！

回复
1. 三百斤的窜天猴
  August 6th, 2022 at 11:50 am
  
  @知名的女孩
  
  是吧，handsome自带的哈哈 ::zheo:菜狗花::
  
  回复
0.0
July 13th, 2022 at 11:39 pm

::zheo:哈士奇::

回复

Notion建站 | Notion-starter-kit 快速搭建独立博客

三百斤的窜天猴 • 2022 年 07 月 06 日

文章转载自[TANGLY’s BLOG](https://tangly1024.com/article/nextjs-notion-starter-kit)

## 前言

试试这套成熟的解决方案，可以快速帮助你搭建一个属于自己的独立网站，免去大量开发维护的麻烦。几分钟就能把你的笔记本软件变成一个网站～

[工具说明](https://esxdidi.com/)

###

[特点](https://esxdidi.com/)

* 界面风格

![notion image](https://bj.esxdidi.com/)

不足之处：

* 文章url不能自定义，默认读取notion的笔记标题，只支持英文，中文会被忽略

###

[演示地址](https://esxdidi.com/)

这篇文章将介绍如何用[Nextjs-Notion-Starter-Kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit)  这套方案搭建一个独立博客网站

[快速搭建](https://esxdidi.com/)

**💡**

熟悉开源github项目的话，可以直接移步官方README文档，步骤说明已经十分想尽！ [Nextjs-Notion-Starter-Kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit)

###

1. [复制项目](https://esxdidi.com/)

在github上复制这个项目 [https://github.com/transitive-bullshit/nextjs-notion-starter-kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit)

###

2.[修改配置](https://esxdidi.com/)

####

[编辑 site.config.js](https://esxdidi.com/)

###

[配置说明](https://esxdidi.com/)

唯一必要做的就是编辑`rootNotionPageId`。这个值用来指定要呈现在网站上的首个页面；

[部署](https://esxdidi.com/)

注册并登录Vercel后台(建议是用Github登录)，点击部署新项目【New Project】

点击从github仓库导入项目：

在项目配置中找到deploy，直接点击部署

部署完成后，点击Visit按钮访问你的站点。

[域名映射](https://esxdidi.com/)

1.在项目面板中找到 Settings→Domains ； 输入你的域名，并点击Add。

2.根据提示，在域名服务商后台配置Verccel的Cname，这里我距离用CloudFlare的域名解析服务；

**💡**

添加一个A类型，名称是你的域名，指向Vercel服务器 76.223.126.88
添加一个CNAME类型，名称为www，指向 cname-china.vercel-dns.com

Notion建站 | Notion-starter-kit 快速搭建独立博客

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

3 条评论

Typecho-handsome主题如何增加侧边导航栏

typecho/handsome评论邮件通知提醒设置

搜索框搜索提示有内容，但是最终搜索页面没有显示结果？

CentOS/Debian/Ubuntu 一键网络DD重装脚本（纯净版）让你的服务器纵享丝滑

迅雷for Mac v6.6.6 免登录会员破解版更新mac迅雷破解版+Mac纯净版迅雷修改5.0.8(65887)(授人以渔)

Notion建站 | Notion-starter-kit 快速搭建独立博客

申请加入new bing之chatGPT

欢迎使用 Typecho

在Notion中嵌入视频（以B站为例）

博客标题设置

Notion建站 | Notion-starter-kit 快速搭建独立博客

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

3 条评论

Notion建站 | Notion-starter-kit 快速搭建独立博客

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款