本站搭建全过程记录-Notion Next

NotionNext - 2023-3-25 - 杂文 / 建站
发布于:2023-3-25|最后更新: 2023-8-2|
type
status
date
slug
summary
tags
category
icon
password

一. 准备工作

📌
你可以先完成以下准备工作,再开始搭建

1. 注册Notion

在下面网站注册Notion账号并进行登录

2. 注册Github

在下面网站注册Github账号并登录

3. 登录Vercel

在下方网站通过Github账号进行登录

二. 开始搭建

1. 为项目点个赞

本着吃井不忘挖水人的原则,既然我们使用了这么优秀的项目,那么请给她一个大大的赞
首先打开下方链接
照着下图右上角⭐Started位置点击单数下,切记单数下,单数下,单数下… 确保星星变成黄色就可以了
notion image

2. 准备Notion模板

  1. 打开下方网址
  1. 在打开的网址中找到下图箭头所示位置,名字叫Duplicate ,点击它,将会复制这个模板到你的Notion账户下。
notion image
  1. 点击Duplicate 后,你将进入自己Notion下的模板页面(前提:已登录Notion),接下来我们修改这个这个页面的分享权限,将它分给到Web,公开给每个人都可以访问。如下图所示,先找到右上角Share 按钮,点击后出现弹框,再点击弹框中的Share to web 后的开关按钮。
notion image
  1. 接下来找到这个模板页面的ID,并复制保存起来,后续部署会用到这个页面ID。ID在我们上一步分享时出现了,也就是我们点击分享开关后,下方出现的分享链接中。我们需要的ID在链接中的位置是.notion.site/ID?,即.notion.site/后,?前的32位字符。
👉
如下链接示例的红色部分就是ID: https://eastern-fernleaf-3cb.notion.site/02b5803c4ebf48da8bae17a1134b743e?v=c08a102d13484840bf0766fc41b57dcd 所以ID为:02b5803c4ebf48da8bae17a1134b743e
 
 
notion image
至此,我们Notion中的准备工作就到此结束了。接下来开始部署博客。

3. 复制NotionNext项目

复制NotionNext的源代码到自己的Github中,打开下方项目链接。
点击右上方Fork按钮,如下图
notion image

4. 将项目部署到Vercel

  1. 点击下方链接到创建Vercel项目页面(前提:确保已完成准备工作中的通过Github登录Vercel)。找到NotionNext一项,并点击import按钮,打开后如下图所示:
notion image
  1. 配置项目信息
这一步是配置部署到Vercel的项目信息,以及项目的环境变量,配置环境变量将把部署的项目与我们之前创建的Notion模板页面相关联起来。如下图步骤操作:
  • 填写项目名称,非必须,可以默认
  • 配置环境变量,Name为NOTION_PAGE_ID,Value为我们之前保存的页面ID ,并单击Add按钮进行添加环境变量
  • 点击Deploy按钮
notion image
Deploy后,需要等待两三分钟时间,下图是点击Deploy后的页面,
notion image

三. 完结撒花🎉

等待Deploy结束后会跳转到成功页面,Vercel贴心的为我们撒花庆祝
notion image
接下来我们点击页面上的Continue to Dashboard进入控制台
notion image
点击Visit就可以访问了。
notion image

四. 博客使用

上面我们已经完成了博客搭建,接下来就是如何去管理我们博客的文章了,当我们访问我们部署完成的网站时,发现其中已经有一些示例文章存在了,细心的你会发现这些文章就是我们Notion模板页面中的文章。
  1. 新建一篇文章
进入Notion,并点击下图所示位置的New按钮新增一篇文章
notion image
点击新增后,列表中会新增一条,右边会打开新增的内容,如下
notion image
我们就可以在右边开始自己的创作了。
这是一篇记录了我个人搭建NotionNext博客的全过程,也是刚开始接触,后续有其他相关问题将继续记录在这里。
 
👍
感谢开发者提供如此优秀的项目!

 
Docker本地开发软件安装记录让小爱更智能-小爱接入ChatGPT