使用Github, Notion和Vercel快速搭建一个简易博客

使用Github, Notion和Vercel快速搭建一个简易博客

Created
Apr 3, 2022 05:51 PM
Tags
Git
Notion
Vercel
Property

使用Github, Notion和Vercel快速搭建一个简易博客

相关项目及平台地址:

一、Notion的注册与page的创建

打开https://www.notion.so/,注册账号,并新建一个page用来当作博客主页
推荐在主页中添加一个”Gallery view”用于归档每一篇文章,效果如图:
notion image
这样每次写新文章时只要新建一张卡片即可
点击页面右上方的”share”,将“Share to web”设置为打开状态

二、Github项目创建

$ git clone https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git
site.config.js文件中rootNotionPageId的值修改为前面创建的Notion page链接的最后一串字符,如我的page链接为:
https://www.notion.so/KungFu-Tsang-s-Blog-d8cd0ec30b1a42a991cb5fcba91826e9
则修改后的值如下:
rootNotionPageId: 'd8cd0ec30b1a42a991cb5fcba91826e9'
还可以将项目”public”文件夹中的图片替换成自己的头像照片
在项目文件夹下执行以下命令即可在localhost查看博客
npm install npm run dev
新建Github仓库,并将项目上传,仓库名任意

三、Vercel的注册及项目的创建

打开https://vercel.com/并注册账号,新建一个Project,将刚创建的仓库导入,然后部署项目;
在Vercel的设置中配置好事先租赁的域名,并根据指示设置好域名解析
这时在浏览器地址栏输入自己的博客网址,就可以进行访问啦!

四、总结各平台工具的作用

Notion作为一个笔记平台,在此次博客搭建中起到了提供内容的作用,Vercel则通过自动同步、部署Github仓库中的代码完成了获取Notion中的内容并以自定义样式显示出来的工作。
事实上Notion本身也拥有为笔记自定义域名的功能,但归根结底通过Notion只能以笔记的形式阅读文章,并不能满足自定义CSS样式等个性化需求。