summary
type
status
date
slug
tags
category
password
icon
也不是很难吧,大家可以参考一下我的过程。
整个时长大约在1H左右。需要用到这几个平台:Notion,GitHub,Vercel,任意域名提供商(Cloudflare)。
非常感谢作者以及其他贡献者的付出
官方写说明文档(有能力可以直接参考文档搭建):
📝 搭建过程
1.GitHub账号注册+fork项目到自己仓库
GitHub是一个基于Git的代码托管平台,它允许开发者存储、管理、追踪和协作开发软件项目。它提供了版本控制和源代码管理功能,使得开发者可以方便地与他人共享代码并进行协作。GitHub也是全球最大的开源社区之一,聚集了众多项目和开发者。
打开GitHub 如果没有账号可以注册一个(尽量避免使用QQ邮箱/网易163邮箱,建议使用Google或者outlook等。否则可能有安全隐患或者收不到验证码等一系列went)。
然后可以打开NotionNext项目地址。点击右上角的Fork,Fork到自己仓库。
然后就可以在自己的仓库看到项目了
2. Notion账号注册+复制模板+开启网络访问
Notion是一个多功能的组织和协作工具,它集成了笔记、数据库、看板、日历和提醒等多种功能。用户可以在Notion中创建个性化的工作空间,整合文档、任务管理和项目规划等。它广泛应用于个人笔记记录、团队协作、知识管理和项目管理等领域,因其灵活性和用户友好的界面而受到许多用户的喜爱。
如果没有账号,则点击Notion注册自己的账号(Notion有网页版和APP版,功能基本上一样的)
然后点击此处复制作者的模板:NotionNext(Notion 博客 )
点击Duplicate就可以复制到自己的面板了。
然后需要你回到你自己的Notion界面,点击右上角的share-publish。
你会看到一串链接,打开之后就能访问到你当前的Notion笔记页面
https://example.notion.site/sagdais1231gda53u12809ddc2e03?pvs=4
我们需要记住其中的sagdais1231gda53u12809ddc2e03(粘贴到一个txt里,一会要用到哦)
3. Vercel账号注册+Vercel关联GitHub部署
Vercel是一个面向前端开发者的云平台,专注于加速网站和应用程序的开发、预览和部署流程。它提供了无服务器(Serverless)架构和自动化部署功能,支持多种前端框架如Next.js、React、Angular等。使用Vercel,开发者可以轻松实现代码的实时预览和自动化发布,同时它还提供了性能优化、全球内容分发网络(CDN)和HTTPS等功能,有助于提高网站和应用程序的性能和安全性。Vercel特别适合快速开发和部署现代网页应用和静态网站。
点击此处注册Vercel账号+点击continue with GitHub(会自动关联到你的GitHub账号)
然后点击创建一个新的Vercel项目
添加一个属性名称为
NOTION_PAGE_ID
,值为步骤一获取的页面ID。过一会就出现了一个域名,点击就可以访问到自己的网站了。
如果你没有那种部署到自己的域名的要求,现在就已经可以开始使用了
4.Vercel绑定域名(Cloudflare面板专属(其它的同理,都差不多))
什么?不知道如何注册域名?别担心,之后会写教程的!挖坑+1
教程链接:还没写(之后会写的
Cloudflare是一家提供网站安全性和性能增强服务的公司,它通过其全球分布的服务器网络为用户提供内容分发网络(CDN)、互联网安全服务、分布式域名系统(DNS)服务和反分布式拒绝服务(DDoS)攻击保护。Cloudflare的CDN服务通过缓存网站内容在全球各地的数据中心,加快了网站的加载速度并减少了服务器的负担。其安全服务包括自动检测和抵御网站攻击、提供SSL/TLS加密等,帮助保护网站的数据安全和用户隐私。Cloudflare广泛用于提高网站的访问速度和防止网络攻击,受到许多网站管理员的青睐。
现在我们回到Vercel面板,点进我们的项目
切换到settings
点击Domains。然后输入你自己的域名,点击Add
然后你就可以看到显示还需要一些操作来证明域名是你自己的,这个时候就需要我们打开操作面板来设置了。
根据图片上的信息,需要我们解析(不同用户的可能会不一样)
Type | Name | Value |
A | @ | 76.76.21.21 |
CNAME | www | cname.vercel-dns.com |
此时,打开Cloudflare面板
下面是具体信息
都解析完毕之后就可以访问啦
🙃Q&A
部署完了无法访问。显示重定向过多。
与Cloudflare配置有关。进入操作面板
🤗 总结归纳
配置了整个的NotionNext的项目。(非常简单
📎 参考文章&视频
NotionNext
tangly1024 • Updated Oct 14, 2024
有关NotionNext安装或者使用上的问题,欢迎您在底部评论区留言,一起交流~
- Author:ByteSage
- URL:https://www.techleaf.xyz/article/blogbuild1
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!