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

前言

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

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

工具说明

Vercel ：对个人用户基本免费的程序托管平台，利用Vercel可以很便捷地搭建静态Hexo博客，甚至创建一个API服务器。

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

特点

界面风格

首页是一个Notion的页面，完全在你的笔记中设计板面

使用reaction-notion-x库渲染Notion笔记的元素样式，与Notion软件中的样式基本一致，你也可以进行自定义

支持侧边Table Contents文章目录

支持Collection、Database等复杂Block的展示

支持调用NotionAPI搜索文章

默认使用 https://utteranc.es/ Github评论插件

支持Fathom 统计，类似GoogleAnalystics

不足之处：

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

演示地址

https://starter-kit.tangly1024.com 或 https://tangly1024.ml/

这篇文章将介绍如何用Nextjs-Notion-Starter-Kit 这套方案搭建一个独立博客网站

快速搭建

💡

熟悉开源github项目的话，可以直接移步官方README文档，步骤说明已经十分想尽！ Nextjs-Notion-Starter-Kit

1. 复制项目

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

2.修改配置

编辑 site.config.js

配置说明

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

您需要先公开Share您的Notion 页面，然后将链接复制到剪贴板。然后提取看起来像的 URL 的最后一部分d1b5dcf8b9ff425b8aef5ce6f0730202，这是您页面的 Notion iD。

建议是在首页上设置一个集合（可选），其中包含您的所有文章/项目/内容。然而，你的 Notion 工作区没有任何结构限制，因此可以像通常在 Notion 中一样随意添加内容。

部署

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

点击从github仓库导入项目：

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

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

域名映射

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

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

💡

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

总结

至此，你可以通过自己的域名打开你的Notion网站了。关于Notion搭建博客的另一个方案Nobelium可以参考这篇文章：

Vercel + Notion搭建独立博客[Nobelium]

如果你在使用 Notion 记录一些知识/生活或是其他，通过 Nobelium 都是一个不错的分享内容的方式。关于Notion 本文将介绍通过 Nobelium 项目将个人博客托管到 Vercel，再绑定个人域名的操作过程。如果你按照本文操作，那么最后能够收获外观不错的个人博客，并且你可以在 Notion 上撰写你的博客，内容会自动同步到个人博客中。 Nobelium ：一个通过 Notion 做内容管理的静态博客项目；基本原理是利用 Notion 公开分享的页面，获取页面内容、添加样式的方式来实现的静态博客。订阅、网站统计、Web Vital 分析...... 还有更多功能待你发现 Vercel ：一项对开源项目免费的托管服务。Vercel 是一项集部署发布、服务托管、证书部署等等为一体的自动化的托管服务器。简单而言，我们只需要知道： Vercel 面向开源项目是免费的（意味着其实你不需要花费任何钱）； Vercel 能够自动将开发模式下的代码「转变」为可以对外提供服务的网页（意味着上手成本比较低）； Vercel 做的非常好，功能完善到你无需知道太多专业知识，就可以部署独立域名、带安全证书的网站。 Notion: 这款产品究竟有多好用，无需我在此赘言。个人比较喜欢 block 的排版方式，有一种样式尽在掌握的感觉。虽然 Notion 自己也有页面分享功能，但是限制较多：因此直接拿 Notion 分享页面做个人 blog 站点有些勉强。如果你熟悉各种开源项目，那么其实 Nobelium 的 README 已经详细介绍了具体部署的步骤，如果你只是普通的 Notion 用户，那么可以跟着以下步骤进行： 1.

https://www.tangly1024.com/article/notion-nobelium-vercel

行动建议

你的notion博客网站搭建成功了吗，不妨在评论区，留下你的博客地址，让我看看吧~