NotionNext-博客搭建历程-1

type

status

date

slug

summary

准备列表

准备资源表

描述	详细描述	用途
准备资源	邮箱（最好为外国邮箱，如Gmail/Outlook）	- 注册GitHub账户 - 注册Notion账户 -注册Vercel账户如要自定义域名 - 注册域名购买商账户（取决于你在哪家买） - 注册Cloudflare账户
准备资源	头像/名字/背景图等资源材料	构建博客
准备资源（仅自定义域名需要）	10-100RMB	购买域名

产生资源列表

描述	详细使用过程记录
GitHub账户	创建并且Fork项目
Notion账户	复制官方Notion模板，记录Notion对外公开后的ID
Vercel账户	关联GitHub账户并配置环境变量，部署项目
域名购买商账户	购买域名，更改解析解析到Cloudflare（非必须）
Cloudflare账户	关联Vercel，自定义域名

📝 搭建过程

1.GitHub账号注册+fork项目到自己仓库

GitHub是一个基于Git的代码托管平台，它允许开发者存储、管理、追踪和协作开发软件项目。它提供了版本控制和源代码管理功能，使得开发者可以方便地与他人共享代码并进行协作。GitHub也是全球最大的开源社区之一，聚集了众多项目和开发者。

打开GitHub 如果没有账号可以注册一个（尽量避免使用QQ邮箱/网易163邮箱，建议使用Google或者outlook等。否则可能有安全隐患或者收不到验证码等一系列went）。

然后可以打开NotionNext项目地址。点击右上角的Fork，Fork到自己仓库（Fork可以理解为复制）。

然后就可以在自己的仓库看到项目了

2. Notion账号注册+复制模板+开启网络访问

Notion是一个多功能的组织和协作工具，它集成了笔记、数据库、看板、日历和提醒等多种功能。用户可以在Notion中创建个性化的工作空间，整合文档、任务管理和项目规划等。它广泛应用于个人笔记记录、团队协作、知识管理和项目管理等领域，因其灵活性和用户友好的界面而受到许多用户的喜爱。

如果没有账号，则点击Notion注册自己的账号（Notion有网页版和APP版，功能是一样的）

然后点击此处复制作者的模板：NotionNext（

Notion 博客）

点击Duplicate就可以复制到自己的面板了。

然后需要你回到你自己的Notion界面，点击右上角的share-publish。

你会看到一串链接，打开之后就能访问到你当前的Notion笔记页面

https://example.notion.site/sagdais1231gda53u12809ddc2e03?pvs=4

我们需要记住其中的sagdais1231gda53u12809ddc2e03（放在某处，一会用来确定NotionPage的位置）

3. Vercel账号注册+Vercel关联GitHub部署

Vercel是一个面向前端开发者的云平台，专注于加速网站和应用程序的开发、预览和部署流程。它提供了无服务器（Serverless）架构和自动化部署功能，支持多种前端框架如Next.js、React、Angular等。使用Vercel，开发者可以轻松实现代码的实时预览和自动化发布，同时它还提供了性能优化、全球内容分发网络（CDN）和HTTPS等功能，有助于提高网站和应用程序的性能和安全性。Vercel特别适合快速开发和部署现代网页应用和静态网站。

点击此处注册Vercel账号+点击continue with GitHub（会自动关联到你的GitHub账号）

然后点击下方链接创建一个新的Vercel项目

New Project – Vercel

To deploy a new Project, import an existing Git Repository or get started with one of our Templates.

https://vercel.com/new

添加一个属性名称为NOTION_PAGE_ID，值为步骤一获取的页面ID。

过一会就出现了一个域名，点击就可以访问到自己的网站了。

如果你没有那种部署到自己的域名的要求，现在就已经可以开始使用了

4.Vercel绑定域名（Cloudflare面板专属（其它的同理，都差不多））

注：此处默认你已经在Cloudflare面板绑定了自己的域名，若没有可参考域名选购指南和绑定指南：

域名简单科普 | TechLeaf Blog

简单的介绍（）

https://techleaf.xyz/article/domains-what

域名选购指南 | TechLeaf Blog

基本的购买指南，最好结合配置证书一起看

https://techleaf.xyz/article/domainsbuy

域名绑定到Cloudflare面板 | TechLeaf Blog

绑定到Cloudflare面板。无须手动配置证书等操作。

https://techleaf.xyz/article/domaincloudflare

Cloudflare是一家提供网站安全性和性能增强服务的公司，它通过其全球分布的服务器网络为用户提供内容分发网络（CDN）、互联网安全服务、分布式域名系统（DNS）服务和反分布式拒绝服务（DDoS）攻击保护。Cloudflare的CDN服务通过缓存网站内容在全球各地的数据中心，加快了网站的加载速度并减少了服务器的负担。其安全服务包括自动检测和抵御网站攻击、提供SSL/TLS加密等，帮助保护网站的数据安全和用户隐私。Cloudflare广泛用于提高网站的访问速度和防止网络攻击，受到许多网站管理员的青睐。

现在我们回到Vercel面板，点进我们的项目