幸いですlog

log
nextjs-notion-react-clover博客部署教程

nextjs-notion-react-clover博客部署教程

description
部署简单、文档详细、UI几乎完美、极速加载、带有推送、文档备份、支持多模块嵌入、评论、归档、友链、动态搜索
Created
Jun 21, 2022 04:41 PM
Updated
Last updated June 28, 2022

前言

该博客是兴趣使然,欢迎志同道合的人、一起开发。
该博客是兴趣使然,欢迎志同道合的人、一起开发。

架构

NextJs
React
React-noiton-x
Redis

如何部署

 
建议一健3连下面的项目。
# 目录介绍 nextjs-notion-react-clover - components # 主要存放页面模块 - lib # 封装函数 - pages # 页面主入口 - api # 外部资源请求 - tags # tags detail - public # static - images - media - styles - .env.example # key config - .vercelignore # vercel config - next.config.js # nextjs config - site.config.ts # global variable config

notion 注册和配置

 
1、注册一个账号,用来存放文章
2、按照红色框这种结构。 除了Articles和友链数据都是点`add a page`
notion image
3、Articles和友链数据。在页面的空白处输入 / 选择database
notion image
notion image
4、Articles需要改为gallery,同时记得设置一下参数展示顺序。点击table更换类型
参数即位每个文章需要展示的参数
notion image
notion image
notion image

notion Api注册

点击,选择view my integrations,
进入创建一个新的就可以。记住token
notion image

redis 注册

登陆
redis操作-文档参考如下
创建一个redis数据库
notion image
记住node中 node-redis的链接方式。

LeadnCloud 注册

云引擎 - LeanCloud
为结构化数据增加触发器(trigger),或开发自己的 HTTP Endpoint(可供公开访问的 url),甚至要托管产品的静态页面,都可以通过「云引擎」来实现。 实用功能 项目代码运行在独立的 Docker 容器中,资源隔离,可以平滑部署、弹性扩容。 基于自动服务发现技术,多个云引擎实例之间实时进行负载均衡,在系统意外发生时会自动进行故障转移,提供超过 99.9% 的高可用性。 支持 Node.js、Python、Java、PHP 等主流后端语言和运行时,并提供多种类型项目模版,10 分钟内即可完成项目发布。 『自从有了 LeanCloud ,后端开发简单易学,前后端工程师可以随时穿插复用,小项目一个人就搞定了,降低了成本,提高了效率,也不愁招不到人了。而且用 LeanCloud 开发手机游戏也是很不错的选择。』 沈李明 / 班图网络 CEO 『西窗烛从创立初期就开始使用 LeanCloud 了,可以说陪伴了产品从 0 到 1 的整个过程。LeanCloud 提供了 App 开发所需的几乎全部后端服务,为我们节省了非常多的时间。在移动开发 BaaS 服务这个领域,他们是最棒的!』 刘志鹏 / 西窗烛创始人 『2014 年开始我们游戏服务端业务逻辑全部依赖 LeanCloud,期间遇到技术问题响应非常及时, 帮助我们解决了很多难题, 对于新的技术, 新的需求跟进也很迅速, 让开发者可以更专注于业务本身, 极大的提升了产品的迭代速度。』 闫春路 / 空岛科技创始人
云引擎 - LeanCloud
1、注册一个账号、进入控制台、创建一个应用,名字随便起。
notion image
2、如果看不到评论信息可以在数据库储存→结构化数据→创建一个class ‘Comment’,权限所有用户
notion image
3、在设置。应用凭证里面拿到AppID,AppKey
notion image
4、在设置 安全中心加入自己的域名
notion image

Vercel注册

1、Vercel是一个用来部署的服务器,点击选择github登陆后,选择new project,选择我们fork的项目。
notion image
2、把我们前面注册的一些token导入到这里
notion image
参数配置参考.env.example 主要是下面这几
# Optional (for notion) #NOTION_ID= # Optional (for redis) #REDIS_HOST= #REDIS_PORT #REDIS_PASSWORD= # Optional (for valine) #APP_ID= #APP_KEY=
 

部署成功

1、点击会进入一个详细页面
notion image
2、如果自己有注册域名可以同通过如下方式配置

曾经也有 个和你一样的人来过这里。

「姿や形は問題ではなく、「魂」が問題です。」

Vercel Logo

「健全なる魂は健全なる精神と健全なる肉体に宿る。」

「あなたの魂、受け取りました。」

VercelVercel

Clover © 2022 幸いです 全著作権所有.