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按钮进行浏览

至此已经初步完成啦

相关文章
|
1月前
|
PHP SEO
WordPress博客每日定时发布 每天60秒读懂世界源码
WordPress博客每日定时发布 每天60秒读懂世界源码
42 0
WordPress博客每日定时发布 每天60秒读懂世界源码
一键自动化博客发布工具,用过的人都说好(csdn篇)
使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到csdn上。
一键自动化博客发布工具,用过的人都说好(csdn篇)
|
5月前
|
安全 Apache 数据库
如何在Win系统从零开始搭建Z-blog网站,并将本地博客发布到公网可访问
如何在Win系统从零开始搭建Z-blog网站,并将本地博客发布到公网可访问
67 0
|
NoSQL 安全 PHP
如何搭建WordPress博客网站,并且发布至公网上?
如何搭建WordPress博客网站,并且发布至公网上?
|
5月前
|
自然语言处理 UED
ROSTCM6软件下载及语义网络分析详细操作教程(附网盘链接)
ROSTCM6软件下载及语义网络分析详细操作教程(附网盘链接)
8755 0
|
11月前
|
安全 JavaScript 前端开发
如何下载博客模板部署在自己的服务器上
如何下载博客模板部署在自己的服务器上
53 0
|
弹性计算 安全 JavaScript
基于函数计算快速搭建Typecho博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Typecho博客。
156 0
|
网络安全 数据库 数据安全/隐私保护
如何搭建WordPress博客网站,并且发布至公网上?2
如何搭建WordPress博客网站,并且发布至公网上?2
|
自然语言处理 编译器 程序员
【跟着操作就行了】手把手教你 编译+链接 程序环境教程
【跟着操作就行了】手把手教你 编译+链接 程序环境教程
99 0
|
应用服务中间件
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(二)
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。
96 0
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(二)