NotionNext 笔记博客部署 图文教程①

简介: 如何使用NotionNext工具将Notion笔记实时渲染成静态博客网站,从创建Notion账号、复制模板、获取页面ID、复制源代码到Vercel部署的完整步骤。

更好的笔记博客建站工具

NotionNext的愿景是帮助非技术人员的小白,最低成本、最快速地搭建自己的网站,帮助您将自己的产品与故事高效地传达给世界。

  • 基于 NextJs 框架开发的免费开源的Notion建站工具
  • 将 Notion 笔记实时渲染成为静态博客网站
  • 无需购买服务器!无需Git仓库操作!
  • Notion 笔记支持在电脑与手机上随时访问
  • Notion 集成了 OpenAI
  • 可以将笔记导出到其它任意平台
  • 博客站点的域名,源码,服务器都归个人所有

建站!!!!

官网链接:Vercel部署NotionNext

大致步骤:

  1. 注册一个Notion账号
    1. 复制Notion模版
    2. 开启页面共享,保存页面ID
  2. 复制源代码
  3. Vercel部署
    1. 准备账号
    2. 导入代码
    3. 配置页面ID并部署

创建Notion账号

Notion 地址:https://www.notion.so/

复制模版

模版地址:https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5

复制完成后,会跳转到你的 Notion 工作台

获取页面ID

点击分享,然后点击发布

然后它会生成一个页面ID

红色标注的即为页面ID,在站点之后,参数之前的那段UUID

复制源代码

前置条件:你需要一个 GitHub 账号,切记你需要整一个谷歌邮箱xxx@gmail.com,否则你的Vercel注册是无法成功的!

谷歌账号注册

提一嘴,谷歌账号注册,需要魔法,然后使用谷歌浏览器去注册

左上角选择三个小圆点,然后点击设置(默认是英文 settings ,我这个是已经修改完的)

然后找到语言,将语言切换为中文,重启浏览器,这会就可以正常的给国区手机发短信了

fork 仓库

步骤:从GitHub仓库Fork作者的项目即可。

Fork仓库地址:https://github.com/tangly1024/NotionNext/fork

点击 Create Fork 即可。

Vercel部署

Vercel:https://vercel.com/

注册登录一个Vercel账号。使用GitHub账号登录即可。

点击 import 导入项目

配置上面找到的页面ID, 点击 环境变量 “Environment Variables”,然后输入key值为:NOTION_PAGE_ID,value值为你的pageID,然后点击添加

然后点击 deploy 进行编译,等待几分钟

部署中

部署完成 点击右上角 continue to dashboard

点击visit按钮进行浏览

至此已经初步完成啦

相关文章
|
存储 安全 对象存储
手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS),新手小白一看就会
本文详细介绍了怎样帮助新手小白从注册,购买阿里云OSS,到一步一步配置OSS做为图床,和PicGo、Typora软件连接,配置好关联之后,在使用Typora写文章时,如果需要插入图片,只需要将图片复制粘贴到Typora的编辑区域,就会自动通过PicGo上传到指定图床,自动复制外网能访问的URL并展示,简直不要太方便,极大的解决了编辑文章时复制处理图片链接的痛点。
14029 16
手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS),新手小白一看就会
|
JavaScript
Bert-vits2-v2.2新版本本地训练推理整合包(原神八重神子英文模型miko)
近日,Bert-vits2-v2.2如约更新,该新版本v2.2主要把Emotion 模型换用CLAP多模态模型,推理支持输入text prompt提示词和audio prompt提示语音来进行引导风格化合成,让推理音色更具情感特色,并且推出了新的预处理webuI,操作上更加亲民和接地气。
Bert-vits2-v2.2新版本本地训练推理整合包(原神八重神子英文模型miko)
|
机器学习/深度学习
基于PaddleGAN精准唇形合成模型实现美女表白视频
基于PaddleGAN精准唇形合成模型实现美女表白视频
2393 0
基于PaddleGAN精准唇形合成模型实现美女表白视频
|
算法 程序员
从《阴阳师》到《原神》,抽卡中的程序算法
收集类的抽卡手游,是玩家们喜闻乐见的一类游戏,他们背后又有哪些程序算法?我们一起来探讨
5487 1
从《阴阳师》到《原神》,抽卡中的程序算法
|
JavaScript 搜索推荐 程序员
Vuepress + gitee五分钟免费搭建个人博客(保姆级教程)
前言 作为一个程序员,没有折腾过个人博客是不算完整的。技术文章的输出是我们程序员能力的一种体现,也是一种非常好的个人总结。 市面上有很多搭建个人博客的工具或框架,包括hexo、wordpress等等。不可否认,市面上有些博客系统做得很好,博客主题也很丰富,但是往往存在一个问题:比较重。 作为一个Vue程序员,我就比较推荐使用vuepress搭建个人博客,因为它毕竟是Vue出品的,大家熟知的vue官方就是利用vuepress搭建的。 本篇文章就从零开始教大家搭建一个免费的博客,零基础小白也可以学习哦!
4187 0
Vuepress + gitee五分钟免费搭建个人博客(保姆级教程)
|
4月前
|
PHP 开发工具 Android开发
语音房社交软件开发/php开发/社交同城交友/语音房APP开发与社交功能的融合
本文介绍语音社交应用的两种开发路径:定制开发适合有独特需求的大中型企业,功能灵活但成本高、周期长;基于成熟方案快速搭建则适合初创团队,利用声网、腾讯云等RTC厂商的开源Demo,低成本高效启动。同时探讨如何通过轻互动、用户标签、个人主页、语音动态等功能,将语音房临时互动转化为长期社交关系,并强调合规、性能与MVP冷启动策略的重要性。(238字)
353 3
|
4月前
|
监控 小程序 Java
2025最新商业版代练护航工作室平台搭建/电竞代练护航小程序快速搭建部署解析
本项目为游戏陪练平台全栈开发方案,涵盖基础架构规划、多端功能开发及定制化流程。支持用户、打手、工作室、管理与管事五端,实现订单追踪、佣金结算、人员调度等功能。采用UniApp跨端开发,后端基于Spring Boot或ThinkPHP,部署使用Docker或宝塔面板,兼容高并发场景,具备完善的安全与监控机制。
450 0
|
6月前
|
设计模式 人工智能 自然语言处理
3个月圈粉百万,这个AI应用在海外火了
不知道大家还记不记得,我之前推荐过一个叫 Agnes 的 AI 应用,也是当时在 WAIC 了解到的。
729 2
|
搜索推荐 JavaScript 前端开发
博客添加Aplayer音乐播放器
本文介绍了如何在博客网站中添加一个美观且功能强大的音乐播放器APlayer.js,从基本设置到高级定制,包括单曲播放、播放列表以及第三方歌单的集成方法。通过简单的HTML和JavaScript代码,即可实现个性化的音乐播放体验,让访客在浏览文章的同时享受美妙的音乐。
903 12
博客添加Aplayer音乐播放器