type
status
date
slug
summary
tags
category
icon
password
🚀 部署教程：用 Netlify 部署 NotionNext 静态博客
本文教你如何将 NotionNext 静态博客部署到 Netlify，使用
yarn export 输出静态文件。🛠 1️⃣ 环境变量设置
在 Netlify → Site Settings → Build & Deploy → Environment → Environment variables 添加：
🔑 变量名 | 💡 示例值 | 📝 说明 |
NODE_VERSION | 18 | 构建所需 Node.js 版本 |
VERCEL_ENV | production | 部署环境 |
NOTION_PAGE_ID | {你的 Notion 页面 ID} | 必填，用于拉取 Notion 内容 |
⚠️ 注意：不要把 .env 文件上传到仓库，以免泄露敏感信息。
⚙️ 2️⃣ 构建配置
在 Netlify → Site Settings → Build & Deploy → Continuous Deployment → Build settings 配置如下：
🏗️ 设置项 | 🔧 配置值 |
Build command | yarn build && yarn export |
Publish directory | /out |
Functions directory | /netlify/functions |
其他设置保持默认，无需修改。
📦 3️⃣ 构建命令说明
在本地仓库执行：
yarn export会把 HTML/CSS/JS 文件输出到根目录/out。
- Netlify 会自动上传
/out内容到 CDN，完成部署。
🔄 4️⃣ 自动部署
- 绑定 GitHub 仓库后，Netlify 会监听指定分支（如
main）。
- 每次你推送代码，Netlify 会自动执行构建命令并更新网站。
- 构建日志可在 Netlify 控制台查看，方便排查问题。
✅ 总结
你的 NotionNext 静态博客 已成功部署到 Netlify，支持：
- 自动部署（GitHub 推送触发）
- 静态导出（无需
.next）
- 安全环境变量管理
💡 小提示：
- 如果博客仅使用静态导出，不要安装
@netlify/plugin-nextjs，否则会报找不到.next目录。
- 构建分钟数、带宽等有限制，普通静态博客一般不会超限。
- Author:雨生
- URL:https://cfblog.273983.xyz//article/example-7
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
