只需 10 分钟！使用 NotionNext + Vercel 免费搭建高颜值个人博客

在这个人人都是创作者的时代，拥有一个独立的个人博客是沉淀知识、展示自我的最好方式。

但是，传统的建站方式（如 WordPress）需要购买服务器和域名，配置繁琐；静态博客（如 Hexo, Hugo）虽然免费，但发布文章需要写 Markdown 并推送到 GitHub，流程不够“丝滑”。

今天，我要向大家推荐一个终极解决方案：NotionNext。

为什么选择 NotionNext？

NotionNext 是一个基于 Next.js 的开源博客框架，它完美结合了 Notion 的易用性和 Next.js 的高性能。

零成本：利用 Vercel 托管，完全免费。

写作体验极佳：直接在 Notion 中写作，无需 Markdown 语法，支持拖拽排版。

即时更新：Notion 内容修改后，博客自动同步（或触发重构建），无需复杂的 Push 操作。

多主题切换：内置多种精美主题，一键切换。

准备工作

在开始之前，请确保你拥有以下账号（只需注册，无需付费）：

Notion：用于管理内容。

GitHub：用于存放代码。

Vercel：用于部署网站。

搭建步骤指南

第一步：Fork 项目代码

访问 NotionNext 的官方 GitHub 仓库：https://github.com/tangly1024/NotionNext

点击右上角的 Fork 按钮，将项目克隆到你自己的 GitHub 仓库中。

第二步：复制 Notion 模板

这是最关键的一步，你的所有文章、菜单和配置都将存储在这里。

打开 NotionNext 的演示站点或官方文档中提供的 Notion 模板链接。

点击右上角的 Duplicate（复制），将其保存到你自己的 Notion 工作区中。

重要：确保你刚才复制下来的这个 Notion 页面，点击右上角 Share -> 开启 Share to web。

第三步：获取 Notion Page ID

我们需要告诉代码去哪里读取数据。

在你刚才 Duplicate 的 Notion 页面中，查看浏览器地址栏的 URL。

URL通常长这样：https://www.notion.so/username/My-Blog-1234567890abcdef1234567890abcdef

链接末尾的那串 32位字符（1234567890abcdef1234567890abcdef）就是你的 Page ID。复制它，备用。

第四步：在 Vercel 上部署

在 Import Git Repository 中，选择你第一步 Fork 的 NotionNext 项目，点击 Import。

配置环境变量（Environment Variables）：

在部署页面的 Environment Variables 区域，添加一个变量。

Name: NOTION_PAGE_ID

Value: 粘贴你在第三步获取的 32 位 ID

点击 Deploy。

等待几十秒，当屏幕上撒满庆祝的彩带时，恭喜你！你的博客已经上线了。

个性化配置

虽然博客已经跑起来了，但你肯定想把它变成你自己的样子。

1. 修改站点信息

NotionNext 的强大之处在于，大部分配置也可以在 Notion 页面中直接修改，或者通过修改代码仓库中的 blog.config.js 文件来实现。

在 GitHub 中打开 blog.config.js 文件，你可以修改：

TITLE: 博客标题

AUTHOR: 作者名称

LINK: 网站地址

THEME: 主题选择（例如：'Hexo', 'Next', 'Medium' 等）

2. 绑定自定义域名（可选）

如果你购买了域名，可以在 Vercel 的项目设置（Settings -> Domains）中添加你的域名，并按照提示添加 CNAME 解析即可。

结语

使用 NotionNext 搭建博客，最大的感受就是**“回归写作本身”**。你不再需要折腾服务器，不再需要在这个平台和那个平台之间复制粘贴。

只要在 Notion 里写下文字，全世界都能看到。

快去试试吧，期待看到你的独立博客！

参考资料：
NotionNext GitHub 仓库
Vercel 官网

WU XIN XIN

使用NotionNext快速建站