使用Notion搭建个人网站系列二、Notion页面部署到Vercel平台

type

Post

status

Published

date

Jun 2, 2023

summary

使用Notion搭建个人网站系列二、Notion页面部署到Vercel平台

slug

notion/vercel

背景

这个系列适合所有零基础的电脑小白用户，轻轻松松搭建属于自己的个人网站。

如果对怎么使用Notion创建一个网站页面不了解，可以看我上一篇教程：使用Notion搭建个人网站系列一、使用Notion创建个人主页

按惯例先看下我的个人网站展示效果。我是非常喜欢这种主题的，也计划要把个人网站全部迁移到Notion上。

搭建这样效果的个人网站只需要两个账号即可。

一、Github账号

1. 创建账号

如果你还没有Github账号，先使用email地址注册一个，非常简单。

2. 克隆项目

Fork NotionNext到你的Github账号

可以在Github的搜索框直接搜索NotionNext，也可以直接点击链接：https://github.com/tangly1024/NotionNext

然后点击点击右上角的Fork按钮：

然后就会弹出如下界面，点击Create Fork，就会在你的Github账号里面拷贝一份代码。

这份代码就是我们搭建个人网站的关键，这个NotionNext调用了Notion的API来展示Notion的页面，同时提供了一些主题和特效，可以定制化我们的网站效果。

对于这个仓库，我们唯一需要关注的就是blog.config.js文件，我们的所有主题特效修改都只需要改这个配置文件即可，后面我会详细介绍。

二、Vercel账号

如果你还没有 Vercel 账号，先创建一个Vercel账号，直接使用刚才的github账号注册，同时方便从Github导入NotionNext。

1. New Project

第一步是新建项目

2. Import Git Repository

导入Git仓库，可以选择导入所有仓库，也可以选择导入指定仓库NotionNext

3. 选择NotionNext并Import

在仓库列表里面 NotionNext然后点击Import

4. 部署

配置你的notionnext

点击Environment Variables

Name: NOTION_PAGE_ID Value: e4bc192eb3ac47b18c0a547fc127f542

注：Value是你的Notion个人主页的值，我们从我们之前的那个Notion模版里面点击Share->Share to web->Copy web link

可以看到我们的link


<https://mulberry-table-1ab.notion.site/6280b79464184604bc6872e627e9b6a3?v=2cd07ed47d834c89bc60fbfee0973b6b>

那么中间这个部分就是你的value，填到环境变量里面。

点击 Deploy，然后等两分钟，就可以部署成功了。

然后点击Vercel分配给你的域名直接访问，就可以访问到你的个人网站了。由于网络限制的原因，可能访问不成功，没关系，我们下一步申请域名来绑定到个人网站来访问。

网站配置

我们刚才说过blog.config.js文件是Notion个人网站的一些配置，我们可以直接修改这个配置文件来修改展示效果。

文件里面每一行的作用都有详细的注释，你可以根据需求修改。我们在Github上的修改，无需重新部署，Vercel会监听Github的修改，自动部署。


AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || '科技小飞哥', // 您的昵称 例如 techxiaofei
BIO: process.env.NEXT_PUBLIC_BIO || '科技小飞哥的个人网站', // 作者简介
LINK: process.env.NEXT_PUBLIC_LINK || 'https://techxiaofei.eu.org', // 网站地址

所有带有process.env前缀的变量，都可以在Notion里面添加环境变量配置来覆盖，同NOTION_PAGE_ID一样，意味着如果你不想修改NotionNext代码仓库，是完全可行的。

同时NotionNext代码仓库还有着其它非常丰富的配置可以修改，甚至可以显示主题选项，随时一键切换主题，显示鼠标点击特效，动态特效，宠物挂件，音乐播放插件，等等。

这些都等着你探索。

后记

可以看到我们搭建一个个人网站根本不需要任何编程基础或者执行指令。

到现在我们算是成功了80%，还有一步就是申请免费域名就绑定到个人网站。下一篇我会讲如何申请免费域名并绑定到个人网站，到这一步，你的个人网站才算完整。

背景