如何使用Notion+Vercel免费搭建自己的博客(一)
🥳

如何使用Notion+Vercel免费搭建自己的博客(一)

最后更新时间
2024-11-18 04:07

1 背景

因为是第一次开始搭建博客,刚好时间也较为宽裕,所以计划选择经济投入最少的方式。
参考互联网上大家建的博客后,最终选择了 notion+vercel 来完成我的博客首秀。
本文主要是用于记录我的搭建过程,希望能帮助到正在看文章的你们。

2 三个步骤

只需如下三个步骤即可完成部署:
  1. 完成 Notion 注册,配置好基础页面并操作发布。
  1. 完成 Github 注册,下载 transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel. 中代码并修改配置文件,创建自己仓库并上传后修改的代码。
  1. 完成 vercel 注册,导入 Github 创建的仓库,等待构建完成即上线。
notion image
简单画了一张图:
Notion 是博客的数据源,所有的文章内容都保存在这里。
Github 是代码的存储仓库,正是因为有大佬@transitive-bullshit 的代码,博客才可以获取到 notion 中的内容。
Vercel 是代码的运行容器,它从 Github 获取到代码后,对代码进行构建,在构建完成后对外提供服务,变成用户可以浏览的博客。

3 详细操作

3.1 完成 Notion 配置

3.1.1 注册 Notion

Notion 的注册也十分简单,点击此处前往官网 完成注册。
现在 Notion 原生支持中文,所以对只懂中文的朋友来说就简单许多了。
notion image

3.1.2 配置 Notion 空间

注册完成后,建议单独创建一个空间,专门用于对外发布博客内容。
notion image

3.1.3 复制模板至新创建的工作空间

按照作者@transitive-bullshit 的建议,点击此处 复制模板至 Notion 中,注意位置为刚刚新创建的空间。
后续基于该模板更新使用即可。
notion image

3.1.4 发布页面

此时可以不着急配置内容,先将页面发布出去,以供代码获取内容。
notion image

3.1.5 获取 pageid

发布后,在当前网址最后找到 pageid,先保存下来,以便后续配置。
notion image
 
 

📌 相关文章

📃

如何使用notion+vercel免费搭建自己的博客共 3 篇文章
去查看
打赏@R同学救救孩子吧
去打赏