阿里云效静态部署 NotionNext 的完整指南

type

status

date

slug

summary

📌 背景介绍

在信息碎片化的今天，Notion 逐渐成为许多人记录灵感、整理资料的重要工具。

而 NotionNext，作为一个开源项目，能够将 Notion 页面无缝转化为现代博客界面，适合用来构建个人博客、技术分享站点或产品文档站。

官方推荐的部署方式如 Vercel 虽然方便，但在国内访问速度及稳定性方面存在不足。

因此，本文将介绍如何 使用阿里云效（云效流水线 + 云效代码管理 + Docker）进行 NotionNext 的静态部署，提升国内访问性能与可控性。

🧩 使用场景

你正在使用 Notion 作为主要内容创作平台。

想搭建一个现代化的博客前端页面。

需要国内访问速度快、稳定性高的静态托管方案。

希望利用阿里云已有资源，降低成本并提升可控性。

🛠️ 前提准备

在开始前，请确保你拥有以下资源或权限：

阿里云账号，已开通云效。

一个有效的 Notion 页面（需要公开分享权限）。

ECS 服务器已安装好 Docker。

📦 部署步骤

第一步：导入 NotionNext 仓库到云效代码管理

由于 Github 访问很不稳定，因此需要将代码仓库导入到云效平台。

访问 NotionNext 的 GitHub 项目页面：

https://github.com/tangly1024/NotionNext

登录阿里云控制台，打开云效代码管理平台：

https://codeup.aliyun.com/

进入【代码管理】 > 选择或新建一个项目 > 点击【导入代码】。

选择 GitHub 来源并授权登录，搜索 NotionNext 仓库，点击【导入】。

导入完成后，你将拥有一个 Codeup 托管的私有仓库，可以进一步开发和部署。

PS：如果因网络问题无法导入，可通过git将代码下载到本地然后再上传到codeup。

第二步：配置 NotionNext 参数

在 Codeup 仓库根目录创建 .env.local 文件，配置以下内容：

PS：Notion 页面需设置为公开访问，才能被 NotionNext 获取内容。

第三步：准备静态 Dockerfile-static

NotionNext 默认已包含一个标准的 Dockerfile，用于构建 Next.js 服务。

但这个是用于动态的，会定时频繁从Notion拉取最新的更新，但也因此会比较影响性能，只适用于建站初期，需要频繁修改的站点的场景。

对于已经渡过初期稳定更新的情况下，还是建议使用静态部署。

创建静态 Dockerfile-static 文件：

PS：这里我没有将构建也写入到 Dockerfile 中，因为感觉使用Docker编译比较慢，而是直接使用云效流水线的构建。

第四步：配置云效流水线自动构建并部署

登录阿里云控制台，打开云效流水线平台：

https://flow.aliyun.com/

在阿里云效中配置流水线步骤如下：

新建流水线，配置代码源-拉取 Codeup 仓库，选择你的分支。

默认是master，我这里自己单独建了个人分支。

添加 Node.js 构建任务，编译静态文件

注意：执行命令中添加以下构建命令：

构建 Docker 镜像并推送至阿里云镜像服务（ACR）

在编译完成后，需要再添加一个任务步骤，选择构建-镜像构建并推送至ACR（个人版）,用于构建站点运行镜像，并上传至镜像仓库。

使用 Docker 部署

最后就到 Docker 部署阶段了，添加部署任务-Docker 部署。

部署脚本如下：

（可选）第五步：配置 Webhook 实现自动触发构建

如果你希望通过代码更新内容时自动触发云效流水线：

流水线-代码源，开启代码源触发，勾选代码提交即可。

✅ 总结

使用阿里云效进行 NotionNext 的静态部署，有以下优势：

国内访问速度快，稳定性高；

完全控制构建与部署流程；

利用云效流水线可实现 CI/CD 自动化；

提高网站性能，避免频繁请求更新。

🔄 后续

这样配置完后还有一个麻烦的点，就是每次只更新文章的话都需要登录到阿里云效控制台来点击运行流水线。

后续计划通过 Notion Button 来调用webhook做到在 Notion 中就触发运行流水线。

💡

有关文章的任何疑问，欢迎您在底部评论区留言，一起交流~

若您认可我的内容，欢迎请我喝杯咖啡~