学习杂记

Notion个人网站搭建教程 - Armin同学的文章 - 知乎
https://zhuanlan.zhihu.com/p/2025351668099719752

准备内容：

• GitHub账号
• Vercel账号
• Notion
• 个人域名

架构：

Notion（内容）→ GitHub（代码）→ Vercel（部署）→ 域名（入口）

通过这样的搭配，我们能实现在Notion里写内容，然后直接在网站里展示，不需要自己在代码里进行操作。在你有ai的情况下，你能直接告诉ai你想对网站做什么改动，ai能直接push到github上，vercel就能自动部署网站，你直接刷新一下就好啦。

四者分工：

• Notion：内容来源（你写什么）
• GitHub：代码仓库（网站长什么样）
• Vercel：部署平台（让网站能访问）
• 个人域名：访问入口（用户怎么找到你）

为什么使用个人域名：

• 好看：xxx.vercel.app 不如 yourname.com 专业
• 好记：别人更容易记住你的域名
• 自由：换部署平台不用换域名

为什么使用Vercel：

• 免费：个人项目完全够用
• 快：自动部署，push代码就更新
• 简单：连服务器都不用管
• CDN：全球加速，访问快

介绍得差不多了，那我们正式开始搭建我们的个人网站：

Notion部分：

你先准备：

1. 创建一个Integration

   访问 notion.so/my-integrations，点击「New integration」

   填个名字（比如「我的网站」），关联你的工作空间

   创建完成后，复制那个 Internal Integration Token（ntn_xxx 开头的）

   注意：这个Token很重要，后面要用，先存好。

2. 连接Integration到你的页面

   在你想要作为网站数据源的Notion页面，点击右上角「...」→「Add connections」→选择你刚创建的Integration

3. 获取页面ID

   打开你的页面，URL格式是这样的：https://www.notion.so/your-workspace/页面标题-xxxxxx

   最后那串 xxxx 就是页面ID（如果有连字符也没关系，去掉就行）

GitHub部分

1. Fork一个现成的Notion网站模板

   我推荐用我自己的模板（嘿嘿）：

   Bookmarkhttps://github.com/waku-hoomi/my-site

   点击右上角Fork，把项目复制到你自己的账号下。

2. 配置环境变量

   Fork完后，你需要把你的Notion信息告诉网站代码。有两种方式：

   • 方式一（推荐）：在Vercel里配置环境变量（后面会讲）
   • 方式二：在代码里直接写（不推荐，会暴露密钥）
3. 修改个人配置

   Fork完后，你需要改几个地方：

   • lib/notion.ts 里面检查API调用逻辑
   • app/page.tsx 改成你自己的名字和简介
   • public/ 文件夹里换掉头像和favicon
   • app/globals.css 可以改配色

Vercel部分

1. 创建Vercel账号

   直接用GitHub登录，省事。

2. 导入项目

   在Vercel首页点击「New Project」→选择你刚Fork的仓库→点击Import

3. 配置环境变量（关键步骤！）

   在部署之前，你需要设置环境变量，告诉网站你的Notion信息：

   • NOTION_API_KEY：你之前复制的那个ntn_xxx
   • NOTION_PAGE_ID：你的页面ID

   在Vercel项目设置里找到Environment Variables，把这两个加进去。

4. 部署

   点击Deploy，等个一两分钟就好了。部署完成后你会得到一个 xxx.vercel.app 的网址。

域名部分

1. 购买域名

   推荐去阿里云、腾讯云或者Cloudflare买域名。我用的阿里云，.com域名一年几十块钱。

   购买流程就不细说了，实名认证、选域名、付款，按提示来就行。

2. DNS解析配置

   在你的域名服务商后台，找到DNS解析设置，添加一条记录：

   • 类型：CNAME
   • 主机记录：@（或者www，看你想要哪个）
   • 记录值：cname.vercel-dns.com
3. Vercel绑定域名

   在Vercel项目设置里找到Domains，输入你的域名，Vercel会自动配置SSL证书。

   等DNS生效后（可能需要几分钟到几小时），你就能用你自己的域名访问网站了！

日常使用

网站搭建好后，日常更新就很简单了：

1. 在Notion里写内容
2. 刷新网站（如果设置了ISR，等几分钟自动更新）
3. 如果要改网站样式，让AI帮你改代码→push到GitHub→Vercel自动部署

就是这么简单！

常见问题

Q: 网站显示空白或者报错？

A: 检查环境变量是否正确配置，特别是NOTION_API_KEY和NOTION_PAGE_ID。

Q: Notion内容更新了但网站没变？

A: ISR有缓存时间，等几分钟或者手动触发重新部署。

Q: 列表格式不对？

A: 在Notion里用快捷键创建列表（- + 空格 = bullet，1. + 空格 = 数字列表），不要直接打字输入。

最后

这个教程基于我的实际经验写的，希望能帮到你。有问题随时问我！

如果你有AI助手，很多事情可以让它帮你做，比如改代码、写内容、调样式，效率会高很多。