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到自己仓库。
然后就可以在自己的仓库看到项目了
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F2f8cc10b-27ca-41f8-af02-2cdd1081a864%2FUntitled.png?table=block&id=9490fdb1-f043-4867-ac28-ef11d556d164&t=9490fdb1-f043-4867-ac28-ef11d556d164&width=2896&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2Ff36900ca-5da8-4ff4-9097-09e8b0b668c1%2FUntitled.png?table=block&id=bc4032d1-b95a-463a-b906-dded00ead0b9&t=bc4032d1-b95a-463a-b906-dded00ead0b9&width=2896&cache=v2)
2. Notion账号注册+复制模板+开启网络访问
Notion是一个多功能的组织和协作工具,它集成了笔记、数据库、看板、日历和提醒等多种功能。用户可以在Notion中创建个性化的工作空间,整合文档、任务管理和项目规划等。它广泛应用于个人笔记记录、团队协作、知识管理和项目管理等领域,因其灵活性和用户友好的界面而受到许多用户的喜爱。
如果没有账号,则点击Notion注册自己的账号(Notion有网页版和APP版,功能基本上一样的)
然后点击此处复制作者的模板:NotionNext(Notion 博客 )
点击Duplicate就可以复制到自己的面板了。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F22ba8ab9-8afc-4bcd-b230-1e3a3c5fb2cc%2FUntitled.png?table=block&id=5380994e-6321-437e-a42b-7ae9fff428ee&t=5380994e-6321-437e-a42b-7ae9fff428ee&width=2288&cache=v2)
然后需要你回到你自己的Notion界面,点击右上角的share-publish。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2Fb7cf6ba3-8af9-4e32-a43a-54f6e477e564%2FUntitled.png?table=block&id=6e29a8e6-2b46-4a43-9fe9-12fcfc73670e&t=6e29a8e6-2b46-4a43-9fe9-12fcfc73670e&width=588.9921875&cache=v2)
你会看到一串链接,打开之后就能访问到你当前的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账号)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F31a1dd71-75d8-4284-ab02-f5ccad8f3310%2FUntitled.png?table=block&id=a22a2618-83c3-43a5-a844-a2fcd44aa9a2&t=a22a2618-83c3-43a5-a844-a2fcd44aa9a2&width=2796&cache=v2)
然后点击创建一个新的Vercel项目
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F55769c34-d83e-4d43-84ff-3aae34b70ca5%2FUntitled.png?table=block&id=7218f217-286a-4583-a6bf-2a35c4828171&t=7218f217-286a-4583-a6bf-2a35c4828171&width=2246&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F2b5136fd-0861-4b6b-ae84-05b549000f4e%2FUntitled.png?table=block&id=9c17ce86-d450-413d-83af-e41b2006f230&t=9c17ce86-d450-413d-83af-e41b2006f230&width=2241&cache=v2)
添加一个属性名称为
NOTION_PAGE_ID
,值为步骤一获取的页面ID。![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F53a00dae-5f9c-4dd4-9f66-5acfb5ed4054%2FUntitled.png?table=block&id=6eed65ed-e423-47b7-9924-cdcd44d13c1c&t=6eed65ed-e423-47b7-9924-cdcd44d13c1c&width=1676&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F0769b5db-f356-4645-a1ac-ddf9bd3e5790%2FUntitled.png?table=block&id=a0ed20fa-c49b-481f-aba8-cf7618808ef7&t=a0ed20fa-c49b-481f-aba8-cf7618808ef7&width=1367&cache=v2)
过一会就出现了一个域名,点击就可以访问到自己的网站了。
如果你没有那种部署到自己的域名的要求,现在就已经可以开始使用了
4.Vercel绑定域名(Cloudflare面板专属(其它的同理,都差不多))
什么?不知道如何注册域名?别担心,之后会写教程的!挖坑+1
教程链接:还没写(之后会写的
Cloudflare是一家提供网站安全性和性能增强服务的公司,它通过其全球分布的服务器网络为用户提供内容分发网络(CDN)、互联网安全服务、分布式域名系统(DNS)服务和反分布式拒绝服务(DDoS)攻击保护。Cloudflare的CDN服务通过缓存网站内容在全球各地的数据中心,加快了网站的加载速度并减少了服务器的负担。其安全服务包括自动检测和抵御网站攻击、提供SSL/TLS加密等,帮助保护网站的数据安全和用户隐私。Cloudflare广泛用于提高网站的访问速度和防止网络攻击,受到许多网站管理员的青睐。
现在我们回到Vercel面板,点进我们的项目
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2Fb648ec9d-a690-4b07-a524-f06556642277%2FUntitled.png?table=block&id=3d0b41e0-5181-4a79-8dd0-06f44182550e&t=3d0b41e0-5181-4a79-8dd0-06f44182550e&width=1494&cache=v2)
切换到settings
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2Fd1c2b769-7f1d-452b-9de7-359dd2170c8c%2FUntitled.png?table=block&id=27259a39-535d-4c68-bbe5-f4857bfa4b00&t=27259a39-535d-4c68-bbe5-f4857bfa4b00&width=1251&cache=v2)
点击Domains。然后输入你自己的域名,点击Add
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2Fbeda9ede-d5c6-40c9-ade0-4f0f447df647%2FUntitled.png?table=block&id=e1d81421-3e24-461d-afe1-b5893f14079a&t=e1d81421-3e24-461d-afe1-b5893f14079a&width=2721&cache=v2)
然后你就可以看到显示还需要一些操作来证明域名是你自己的,这个时候就需要我们打开操作面板来设置了。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2Fb7ab59ed-3d3b-45a8-9b8e-bf358e3d83db%2FUntitled.png?table=block&id=d2b37622-f6ca-4baf-b088-60e03ff99b70&t=d2b37622-f6ca-4baf-b088-60e03ff99b70&width=1818&cache=v2)
根据图片上的信息,需要我们解析(不同用户的可能会不一样)
Type | Name | Value |
A | @ | 76.76.21.21 |
CNAME | www | cname.vercel-dns.com |
此时,打开Cloudflare面板
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F369a7e8d-4cab-4a10-b7ad-961dec630608%2FUntitled.png?table=block&id=2b5a07eb-65a0-41c9-9deb-e4ba0e0480d8&t=2b5a07eb-65a0-41c9-9deb-e4ba0e0480d8&width=2820&cache=v2)
下面是具体信息
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2Fe604e1f2-1069-43f4-8731-d93888f5a6b6%2FUntitled.png?table=block&id=04a3b4e4-9a11-4d77-aee9-0219d7cf55c2&t=04a3b4e4-9a11-4d77-aee9-0219d7cf55c2&width=2438&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2Fcbdf4f28-503f-43c0-80e1-7a47011c5bb7%2FUntitled.png?table=block&id=49007fbc-44d7-4805-b14f-83195ba36281&t=49007fbc-44d7-4805-b14f-83195ba36281&width=2115&cache=v2)
都解析完毕之后就可以访问啦
🙃Q&A
部署完了无法访问。显示重定向过多。
与Cloudflare配置有关。进入操作面板
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F26431f42-0dde-4892-bd36-60099a4bf82c%2F6240cf4a-91ae-4d3b-85d6-13200d984e73%2FUntitled.png?table=block&id=5c4ce591-a2ba-4f3b-a843-f4d89987330e&t=5c4ce591-a2ba-4f3b-a843-f4d89987330e&width=2774&cache=v2)
🤗 总结归纳
配置了整个的NotionNext的项目。(非常简单
📎 参考文章&视频
NotionNext
tangly1024 • Updated Oct 14, 2024
有关NotionNext安装或者使用上的问题,欢迎您在底部评论区留言,一起交流~
- Author:ByteSage
- URL:https://www.techleaf.xyz/de6d826e43ee4a98a15331d09ddc2e03
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!