NotionNext 个人博客搭建教程:腾讯云 EdgeOne 部署

1681 字
8 分钟
NotionNext 个人博客搭建教程:腾讯云 EdgeOne 部署
NotionNext 个人博客搭建教程:腾讯云 EdgeOne 部署

前言#

目前主流的博客搭建方案可大致分为两类,且各有局限:一类是以 WordPress 为代表的动态博客系统,依赖独立服务器运行,运维与硬件成本较高;另一类是以 Hexo 为代表的静态博客框架,采用本地 Markdown 编写,无实时预览能力,无法在编辑阶段直观确认最终呈现效果,且内容更新需手动执行构建部署流程,操作链路较长。

NotionNext 恰好填补了两类方案之间的空白。它以 Notion 作为内容生产端,完整保留了所见即所得的块级编辑体验与强大的数据库管理能力,创作者可专注于内容本身,无需在编辑与预览间反复切换;同时通过 Next.js 将 Notion 内容渲染为独立的静态博客站点,支持多平台托管部署,兼顾了部署灵活性与运维轻量化。

基于这套方案,本文介绍,如何通过NotionNext,将个人博客部署到腾讯云 EdgeOne Pages和Vercel上。

前置准备:Notion 账号、GitHub 账号、腾讯云账号(已实名认证)、备案域名(可选)


一、创建 Notion 内容页#

1. 复制官方模板#

打开 NotionNext官方配置模板,点击页面右上角 Duplicate,将模板复制到自己的 Notion 工作区。

NotionNext官方配置模板
NotionNext官方配置模板

2. 获取页面 ID#

  1. 打开复制后的配置页面,依次点击右上角 Share → Publish → 开启 Share to web,复制页面共享链接。
  2. 提取规则:链接中连续 32 位的字母数字串即为页面 ID,需剔除 ?v=?pvs= 及之后的所有参数。
    • 示例: https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb...
    • 页面 ID:02ab3b8678004aa69e9e415905ef32a5
  3. 关键提醒:必须开启公开分享,否则站点无法拉取 Notion 数据。

公开分享
公开分享


二、复刻项目源码#

  1. 打开 NotionNext GitHub 官方仓库,点击右上角 Fork,将项目完整复刻到自己的 GitHub 账号下。
  2. 后续所有部署、配置修改均基于你自己的仓库完成,支持版本管理和个性化二次开发。

Fork
Fork


三、腾讯云 EdgeOne 部署#

1. 进入 Makers控制台#

登录腾讯云控制台,搜索「边缘安全加速平台 EO」,左侧导航选择「Makers」,点击「创建项目」。

边缘安全加速平台 EO
边缘安全加速平台 EO

2. 导入 Git 仓库#

  1. 选择「导入 Git 仓库」,完成 GitHub 账号授权,建议仅授权指定的 NotionNext 仓库。
  2. 仓库选择上一步 Fork 的项目,生产分支选择 main

生产分支
生产分支

3. 构建配置(核心步骤)#

系统会自动检测项目的框架,并且预填写构建命令

  1. 构建命令请使用静态导出:yarn export。若托管面板模板仍显示 npm run build / npm run export,请按仓库习惯改为 Yarn。前者是动态站点,后者是静态。
  2. 项目名称要修改一下,名称长度必须为5到63个字符,只能包含小写字母、数字和连字符。
  3. 环境变量中添加您的NOTION_PAGE_ID

补充说明:静态部署后,Notion 内容更新需重新触发构建才能同步到站点。

构建配置
构建配置

4. 启动部署#

  1. 确认配置无误,点击「开始部署」,首次构建约 3-5 分钟。
  2. 部署成功后,系统分配默认访问域名,可直接打开验证站点效果。

开始部署
开始部署

5. 绑定自定义域名(可选)#

  1. 前提:域名已完成工信部 ICP 备案。
  2. 操作路径:项目设置 → 域名管理 → 添加自定义域名,按提示在域名服务商处添加 CNAME 解析记录。
  3. 解析生效后系统自动签发 SSL 证书,默认开启 HTTPS 访问。

绑定自定义域名
绑定自定义域名


四、备选方案:Vercel 一键部署#

适用场景:海外读者为主,或需要 Notion 内容实时自动同步。

  1. Vercel 官网使用 GitHub 账号登录。
  2. 导入 Fork 的 NotionNext 仓库,框架会自动识别为 Next.js。

Vercel
Vercel

  1. 添加环境变量 NOTION_PAGE_ID,点击 Deploy 即可完成部署。

Deploy
Deploy

  1. 优势:支持 ISR 增量静态再生,Notion 修改内容后数分钟内自动同步,无需手动重建。

vercelNotion
vercelNotion


五、站点基础配置#

1. 发布文章#

在 Notion 数据库中新增一行:

  • type 选择 Post(普通博客文章)
  • status 设为 Published(公开可见)
  • 填写标题、分类、标签、摘要后,点击进入页面,即可用 Notion 原生块编辑器撰写内容。

Notion 数据库
Notion 数据库

2. 主题与菜单#

  • 主题切换:新增 Config 类型条目,配置名填 THEME,配置值为主题文件夹名(如 next、heo、matery)。
  • 导航菜单typeMenu 为一级菜单,选 SubMenu 为二级子菜单,slug 字段填写跳转路径。
  • 配置优先级:Notion 内配置 > 项目本地 blog.config.js 文件。

3. 内容更新规则#

  • EdgeOne 静态部署:Notion 修改内容后,需在 EdgeOne 控制台手动触发重新部署,站点才会同步更新。

EdgeOne 控制台手动触发重新部署
EdgeOne 控制台手动触发重新部署

  • Vercel 部署:默认开启增量缓存,无需手动操作,数分钟内自动同步。

搭建的博客首页样式如图所示

博客首页样式
博客首页样式

六、常见问题#

  1. 站点不显示文章
    • 检查页面 ID 是否准确,Notion 页面是否开启公开分享。
    • 确认文章 statusPublished
  2. EdgeOne 构建失败
    • 确认构建命令为 npm run export
    • 可添加环境变量 NODE_VERSION=18 指定 Node 版本,清空构建缓存后重试。
  3. 国内访问加载慢
    • 建议替换谷歌字体为国内源,图片资源改用国内图床。
    • 在 EdgeOne 控制台配置缓存规则,提升静态资源命中效率。

总结#

总的来说,这套 Notion + NotionNext 的建站方案,最大的好处就是把「写内容」和「搭网站」拆得特别舒服。你不用像用 WordPress 那样操心服务器运维,也不用像用 Hexo 那样在本地编辑器和最终部署效果之间反复横跳 —— 平时写文章就正常用 Notion,排版、分类、插代码嵌图片都所见即所得,写完发布顺手就能同步到网站上,门槛低了很多。

对国内用户来说,部署到腾讯云 EdgeOne 是性价比很高的选择,国内访问速度稳,个人博客用免费额度基本就够;如果想图省事一键搭建,或者主要面向海外读者,Vercel 方案也完全能用。

📎 参考文章#

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
NotionNext 个人博客搭建教程:腾讯云 EdgeOne 部署
https://blog.leihub.cn/archives/1044/
作者
阿雷
发布于
2026-06-13
许可协议
CC BY-NC-SA 4.0
相关文章智能推荐
1
群晖照片异地备份到 Unraid + Immich 相册搭建详细教程:rsync 同步与踩坑全记录
NAS & 云服务搭建我家里同时有白群晖和 unRAID 两台 NAS ,准备把群晖里攒了几年的照片进行异地备份,单盘 NAS 一旦坏了,照片可就全没了。 我自己折腾了两天,踩了一堆坑,终于跑通了一套「unRAID 定时拉取群晖 + Immich 相册」的方案。
2
西上东下:梵净山雾中徒步记
城市短途漫游朋友嚷嚷了一年的梵净山,最近终于找到了爬山窗口,做足了攻略的我们,直接选择来一波特种兵爬梵净山。 一、周五晚上10点,株洲站出发 我们几个都是从株洲出发的,火车是晚上的卧铺车,10 点出发,第二天凌晨 5:40 到铜仁。一张硬卧 138 块
3
折腾记录:2025 WordPress 搭建 + 迁移全攻略,Docker / 宝塔 / 插件多方案任选
博客搭建 & 运维一、前言 作为用 WordPress 写了四年博客的老用户,之前分享过不少主题配置、插件推荐的内容,很多朋友问过我怎么安装和迁移 WordPress,毕竟不管是新手入门还是换服务器,这两个都是刚需操作。今天就把我实际用过的几种安装方式和迁移
4
wordpress遇到的小问题记录
博客搭建 & 运维这篇文章用于记录wordpress配置中遇到的小问题,当作自己的错题本来用了。 1、伪静态配置问题 报错现象 当我迁移完博客时,发现迁移后的博客首页可以访问,但是博客下面的文章,比如/archives/908/这样的链接就会报404错误。
5
五一萍乡自驾游|4天游玩全记录
自驾旅行日记五一不想挤人山人海的热门景区,和朋友果断冲萍乡自驾游!四天三晚玩遍孽龙洞、竹筏、反穿武功山,有好玩到封神的项目,也有巨踩雷的景点和美食,还有自驾专属大坑!全程真实无滤镜,新手直接抄作业,避坑省钱两不误✨ ✨出行省钱小技巧 出发前专门囤了株洲
随机文章随机推荐

评论区

Profile Image of the Author
阿雷
一个小趴菜
公告
本站已从 WordPress 迁移到 Astro,访问更快、更清爽。文章链接保持原样(/archives/文章ID/),评论数据正在陆续恢复中。
分类
标签
最新动态
站点统计
文章
76
分类
15
标签
99
总字数
318,421
运行时长
0
最后活动
0 天前
站点信息
构建平台
EdgeOne Pages
博客版本
Firefly v6.16.8
文章许可
CC BY-NC-SA 4.0
文章目录