如何使用Notion+Vercel免费搭建自己的博客（二）

1 详细操作

基于 (一) 的内容

1.1 完成代码配置

1.1.1 安装 git

后续操作需要使用 git 命令完成，所以请确认你的电脑上已安装有 git 工具。

如果不知道怎么安装 git 请先查看 Git - 安装 Git 官网内容完成安装。

1.1.2 下载仓库代码

接下来就要正式开始干活了！

首先是要下载 transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel. 仓库的代码，请在本地找到一个合适的目录，打开终端 (命令行工具… Apple 自带的终端、Windows 的 Powershell、或者 Git Bash 都 OK)，要输入的内容如下。


git clone https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git

提示完成后，进入 clone 后的目录并建立一个新的分支，以便后续更新，要输入的内容如下。


cd nextjs-notion-starter-kit
git checkout -b <branch name>

branch name 请输入一个你认为合适的分支名称。

1.1.3 修改配置文件

请在当前目录下找到 site.config.ts

对以下关键内容进行配置。

rootNotionPageId: 上一篇文章所记录的 ID，请替换原来的 7875426197cf461698809def95960ebf 为你的 ID

name: 你的博客名称

domain: 你的博客域名，可以后面补充使用 vercel 免费提供的域名但就独立性来说，其实我更推荐你购买一个，一方面是可以增加你的标识度，另一方面也避免只依赖 vercel 的服务

~~此处预留一个广告位…哈哈哈🤡~~

author: 作者名称，填写你的名称即可

description: 简单介绍一下你的博客吧

twitter: 你的 twitter/x 名称，如果没有可以删除

twitter: 你的 github 名称，如果没有可以删除

liinkedin: 你的 liinkedin 名称，如果没有可以删除

更多配置可参考文档内说明，如果对某些配置有疑问欢迎留言～

1.1.4 修改静态文件

请直接打开 public 文件夹

修改如下文件：

favicon: 以这个开头的文件请替换为你自己的 logo 图片，大小请参考原图片

manifest.json: 修改其中的 name 和 short_name 为你的网站名称及简称

1.1.5 保存修改

在终端执行下方命令，将你的修改保存下来吧！


git add .
git commit -m "init"

如此一来，配置工作就算告一段落了。

哪怕某个位置配置错了也没关系，后面可以随时更改，更新也十分方便～

1.2 上传代码到 Github

1.2.1 注册 Github

Github 注册没有什么复杂度，点击此处前往官网注册。

唯一的难点可能就是防机器人的注册验证了 hhh。

1.2.2 创建 Github 仓库

注册完成后，请点击 New repository 创建新仓库。

如果你找不到在哪里，也可以点击此处前往创建。

创建完成后，应该是类似于下面的页面。

1.2.3 上传代码

接着就要开始上传代码了，上传前回到你刚刚打开的终端做一些基础配置吧。


git config user.name <github name>
git config user.email <github email>

将 github name 和 github email 设置为你的 github 用户名和 github 邮箱。

接着再执行如下代码添加远程仓库并推送代码。


git remote add <branch_name> <repository url>
git push -u <branch_name> <branch_name>

branch name 为你刚刚在 1.1.2 设置的分支名称，repository url 请在你创建好的仓库中复制。

⚠️ 注意:
如果你执行 git push 后，出现了下方错误：
错误：RPC 失败。HTTP 400 curl 22 The requested URL returned error: 400
Send-pack: unexpected disconnect while reading sideband packet
请执行 git config http.postBuffer 52428800 增加传输缓存大小
接着再重新执行 git push -u <branch_name> <branch_name> 即可

操作完毕后，查看你的仓库页面，只要有出现代码文件，代表代码也准备完成咯！