完全免费！几分钟搭建属于自己的博客网站！
想搭建个人博客网站，通常情况下你需要购买 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 配置网站的相关信息，例如站点地址，作者信息，以及默认主题：
AUTHOR: 'tangly1024', // 作者BIO: '一个普通的干饭人🍚', // 作者简介LINK: 'https://tangly1024.com', // 网站地址KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
2.修改 Vercel 后台的环境变量，在 blog.config.js 配置文件中我们可以看到类似process.env.NEXT_PUBLIC_THEME 的格式，意味着这些配置支持在 Vercel 中使用环境变量的方式来配置。例如默认主题的配置：
THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']// 如果在VERCEL中有环境变量NEXT_PUBLIC_THEME，则会默认读取环境变量设置，否则将读取 'next' 作为默认主题。
环境变量的修改方式：项目主页点击 Settings，并选择 Environment Variables 配置环境变量。
修改完环境变量，回到项目的 Deployments 下，将最新的部署记录Redeploy。
3.Notion页面的隐私安全：您共享的 Notion 页，他人只有查看权限，除非你手动开启编辑和评论的权限。另外，若您不希望别人访问到你的源 Notion 页面，可选择关闭 Noton 页面共享，然后通过 Notion 的 access_token 进行数据访问。
如果你不想购买服务器的话，利用 Notion 来自动推送更新内容到网页这种方法的确不错，还不用操心网站的维护，加上 NotionNext 轻量级速度快，免费开源你也可以自己新增功能，当然前提是你会开发。最后感兴趣的自己折腾去吧。
相关文章
配置评论插件：
https://tangly1024.com/article/notionnext-valine如何添加评论插件：
https://tangly1024.com/article/notion-next-comment-plugin功能介绍：
https://docs.tangly1024.com/zh
MORE最近更新 & 相关文章
软件合集：https://docs.qq.com/sheet/DUGpUdEZ3WmZFZndQ