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

至此已经初步完成啦

相关文章
|
3月前
|
PHP SEO
WordPress博客每日定时发布 每天60秒读懂世界源码
WordPress博客每日定时发布 每天60秒读懂世界源码
63 0
WordPress博客每日定时发布 每天60秒读懂世界源码
|
4月前
|
小程序 API 容器
ProFlow 流程编辑器框架问题之查看ProFlow的开源地址和官网链接如何解决
ProFlow 流程编辑器框架问题之查看ProFlow的开源地址和官网链接如何解决
128 0
|
7月前
|
安全 Apache 数据库
如何在Win系统从零开始搭建Z-blog网站,并将本地博客发布到公网可访问
如何在Win系统从零开始搭建Z-blog网站,并将本地博客发布到公网可访问
103 0
|
7月前
|
自然语言处理 UED
ROSTCM6软件下载及语义网络分析详细操作教程(附网盘链接)
ROSTCM6软件下载及语义网络分析详细操作教程(附网盘链接)
12655 1
|
安全 JavaScript 前端开发
如何下载博客模板部署在自己的服务器上
如何下载博客模板部署在自己的服务器上
62 0
|
弹性计算 安全 JavaScript
基于函数计算快速搭建Typecho博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Typecho博客。
|
数据采集 数据挖掘 Shell
[Hexo]部署博客及更新博文
找到其中的 deploy 标签,改成下图所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错。
|
域名解析 弹性计算 安全
如何使用阿里云快速搭建个人WordPress网站博客?
如何使用阿里云快速搭建个人WordPress网站博客?使用阿里云服务器快速搭建网站教程,先为云服务器安装宝塔面板,然后在宝塔面板上新建站点,阿里云服务器网以搭建WordPress网站博客为例,来详细说下从阿里云服务器CPU内存配置选择、Web环境、域名解析到网站上线全流程:
586 0
|
IDE JavaScript 前端开发
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(一)
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。
123 0
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(一)
|
应用服务中间件
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(二)
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。
102 0
个人软件思维导图介绍。下载在以后的博客中。本博客是展示软件页面。(二)