完全免费！几分钟搭建属于自己的博客网站！

想搭建个人博客网站，通常情况下你需要购买 VPS 服务器，然后部署，安装博客程序。不过一些小伙伴也想通过免费的方式来搭建，例如之前给大家分享过的用 GitHub / Gitee + Gridea / Hexo 的方式来免费创建个人博客。

不过今天又发现了另外一种不用花钱，可以搭建个人博客的新方法。有大佬开发了 NotionNext 博客系统，然后借助 Vercel 云托管服务，再把你的 Notion 笔记实时渲染成静态博客站点。以下教程来源作者，感兴趣的小伙伴可以试着搭建一个。

NotionNext 是开源在 Github 的博客生成器，它帮助写作爱好者们无需购买服务器快速地搭建个人网站，从而让作者专注于写作、不需要操心网站的维护。

• 项目地址：
  https://github.com/tangly1024/NotionNext

NotionNext 使用 NextJs\TailwindCSS 开发，借助 Vercel 云托管服务，将您的 Notion 笔记实时渲染成静态博客站点。

除了 Vercel 云托管、您还可以选择在服务器本地部署、导出静态网页、Docker容器化、CloudFlare部署等方案。

1.强大的Notion

相比于 Hexo 等类型的静态博客，您不需要学习 Markdown 语法，也不需要每次写完文章都提交推送到 Git 仓库。

NotionNext 中，编写与发布都只在您的笔记中完成。借助 Notion 强大的编辑和写作功能，您可以随时随地撰写文章、记录你的创意与灵感。

折腾博客多年，尝试过 WordPress、Hexo、Typecho、Ghost、Gridea、Hugo 等博客系统，我觉得在写作过程中应当把重心放在养成内容持续输出的习惯；博客系统只是一个辅助，反复折腾搭建系统、维护服务器显得本末倒置。

Notion 笔记本的出现，让 “坚持笔记” 和 “博客分享” 得到了完美结合，何乐而不为呢。

2.实用的功能

更快的速度：NotionNext 是基于 craigary 的 Nobelium 项目二次开发，继承了 Nobelium 功能特点，拥有极快的打开速度。

多主题/自定义字体换：目前已支持 5 种主题，以及支持自定义字体，预设了 Google 免费开源的 Noto Sans 字体，您也可以在 blog.config.js 中自定义字体。

交互增强：文章分类、标签、归档页面、支持快速添加单页、菜单、在 Notion 中换头像、换背景、手动切换夜间模式、看板宠物、文章支持加锁、支持自定义你的表头属性、支持多种评论插件。

1.Fork 此 Github 项目

• 地址：
  https://github.com/tangly1024/NotionNext/fork

2.Vercel 中导入您 fork 的项目

• 地址：
  https://vercel.com/new

用 Github 账号登录 Vercel，然后点击 Import 导入您的 NotionNext 项目。

3. 绑定您的 Notion 页面

点击 Environment Variables（环境变量），添加 NOTION_PAGE_ID 变量。参数来源如下：

1.打开这篇 Notion 页面，并复制到你的 notion 空间：(点击右上角 Duplicate)

• 地址：
  https://tangly1024.com/02ab3b8678004aa69e9e415905ef32a5

2.开启分享：点击 Share 开启 Share to web 选项

3.在页面链接中取得 PAGE_ID：

Ctrl 或 cmd+L 可以快速复制当前页面链接，PAGE_ID 就是以下页面链接中的标红部分：

示例：https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

4. 完成

点击 Deploy 按钮，静候两分钟即可完成。完成后点击 Go to Dashboard 访问控制台，在控制台右上角的 Visit 按钮访问您的站点。

NotionNext 实时抓取 Notion 笔记的改动(由于缓存和网络延迟的缘故，需要刷新几次网页才能看到生效)。如果您的站点始终没有同步笔记的数据，请再次检查以下配置：

1.您的 PAGE_ID 是否正确、并已开起分享。

2.Vercel 后台的环境变量 NOTION_PAGE_ID 是否正确配置。

3.blog.config.js 中的 NOTION_PAGE_ID 参数

首次部署成功后，您可以很方便地修改站点信息，而不需要每次都重新导入 Vercel。

1.修改基础信息

在 Notion 页面中，以下四个元素将会直接同步到网页作为站点信息：修改Notion页的图标 ①、标题 ②、描述 ③、及封面图④，将分别对应同步站点的作者头像、站点标题、站点描述和首页的封面大图。

图标支持自定义上传图片，建议图片文件不要过大，否则影响首页打开速度。

2.更多自定义配置

1.Vercel 会自动将您 Github 仓库中的代码部署到站点，最常见的是修改 blog.config.js 后更新站点。

• 用自己的图片替换 /public 文件夹里的 favicon.svg 和 favicon.ico

• 在 blog.config.js 配置网站的相关信息，例如站点地址，作者信息，以及默认主题：
  
  

2.修改 Vercel 后台的环境变量，在 blog.config.js 配置文件中我们可以看到类似process.env.NEXT_PUBLIC_THEME 的格式，意味着这些配置支持在 Vercel 中使用环境变量的方式来配置。例如默认主题的配置：

环境变量的修改方式：项目主页点击 Settings，并选择 Environment Variables 配置环境变量。

修改完环境变量，回到项目的 Deployments 下，将最新的部署记录Redeploy。

3.Notion页面的隐私安全：您共享的 Notion 页，他人只有查看权限，除非你手动开启编辑和评论的权限。另外，若您不希望别人访问到你的源 Notion 页面，可选择关闭 Noton 页面共享，然后通过 Notion 的 access_token 进行数据访问。

如果你不想购买服务器的话，利用 Notion 来自动推送更新内容到网页这种方法的确不错，还不用操心网站的维护，加上 NotionNext 轻量级速度快，免费开源你也可以自己新增功能，当然前提是你会开发。最后感兴趣的自己折腾去吧。