使用 Vercel + Notion 搭建低成本博客
date
Jun 4, 2022
slug
blog-notion-vercel
status
Published
tags
开发测试
summary
域名过期了,又买了个域名,想着不能浪费,之前的blog很久没更新了,想着重新弄一个。。。后续还得把文章移上去,慢慢来吧
type
Post
参考的是这位老哥的博文:使用 Vercel + Notion 搭建低成本博客 (rustc.cloud)
前因
之前的域名过期了,加之后续的知识都放在了notion上,想看看有没有什么可利用的blog搭建方案,没想到还真有
操作
使用了nobelium 这个blog模版,github上讲的很清楚,使用它的notion模版,fork下来,更换自己的图片文件,然后修改对应的blog配置文件即可。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2Fd2696176-4a6b-495a-881c-cdf007d6eed8%2FUntitled.png%3Fid%3D79465b9b-2929-4c1a-a288-0eb8447d6145%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3DN95K7hNsiLqKUEnexThdM_zdQh1W5zJqTbdoALi0k_U?table=block&id=79465b9b-2929-4c1a-a288-0eb8447d6145&cache=v2)
绑定域名那些操作那位老哥的blog讲的很清楚了,就不再叙述了,记一下我改了哪些地方
改造一下
- 修改title的照片
不用多说,直接替换public下的图片就行了
- 添加评论区
直接修改的
blog.config.js
这里面有一个comment
选项,这里我选择了cusdis
作为评论的provider
,自行注册一个就好,然后把注册好的appId
填上就好,改了两处地方![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2F4f6bafa2-8575-44c3-abd0-8a402212d2fd%2FUntitled.png%3Fid%3D207b3545-d652-4495-909d-7014e8c56037%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3Ddo3d8ainkCDDfjycEJRIgdfJ2M3jrZCHau3toyEVm7o?table=block&id=207b3545-d652-4495-909d-7014e8c56037&cache=v2)
- 修改主页面左上角的显示
可以对比一下修改后的效果,改成简约大气一点了
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2F7179b53b-91bf-4f4e-9af7-3d32e60451b3%2FUntitled.png%3Fid%3Dbade5e01-0d5b-4298-8e4c-b79ef7a0693e%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3D1pUPnFswucYMK38YGU6jLeCc355LrH11LF0t80i44V0?table=block&id=bade5e01-0d5b-4298-8e4c-b79ef7a0693e&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2Fe3224d59-c150-4501-b952-797681d3aff2%2FUntitled.png%3Fid%3D2165f76c-f8d8-495b-bfd1-088b5e86c6c1%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3D9IRRe8GFsQuhbSWDMDsgsX2toqSi9m0Tp1FOWa9ut2E?table=block&id=2165f76c-f8d8-495b-bfd1-088b5e86c6c1&cache=v2)
主要是将
blog.config.js
里面的description置空![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2F295caebd-7231-4819-a217-d0a5c1cc3edc%2FUntitled.png%3Fid%3D8ab38440-7ce0-4b79-893b-b7e15884b194%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3DKkP91_2h5WA4ZQZ6_nDsUshjeNyYU6P_AW6xo2Zvqb4?table=block&id=8ab38440-7ce0-4b79-893b-b7e15884b194&cache=v2)
然后修改
components/Header.js
里面具体展示的点 ,删除了一部分,然后改了部分内容是自己展示的内容![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2F79837705-6baf-4db6-93b9-e2871cee1d59%2FUntitled.png%3Fid%3D7654aed9-fc4a-402f-baa5-711670cf79d5%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3DIUHYv2PJniP6IcbcHI3ZxOtH8Detu8J-Daqa26yaiYQ?table=block&id=7654aed9-fc4a-402f-baa5-711670cf79d5&cache=v2)
- 修改详情页面的这个图标
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2Fe91bd9e0-d19c-4d24-aaf4-e02a7f995f1c%2FUntitled.png%3Fid%3Ddcbe08d1-433f-454e-89c4-dba926230a67%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3Dx7BqqJD7qEmzUyyJ_OQvicczBKzV6tkYkB9IYQDOy_I?table=block&id=dcbe08d1-433f-454e-89c4-dba926230a67&cache=v2)
主要是
layouts/layout.js
,首先还是得在blog.config.js
添加一个个全局属性,这个属性指定了public
下存放的图片位置![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2Fc3836baa-97db-49fe-b93c-40eb2e06eb87%2FUntitled.png%3Fid%3Dbc34301f-be53-4fc7-9c72-ce0f2d00b738%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3DRjfdx9H24JTic55eLthBrJvFN1YW_hOcfk618Mjou0I?table=block&id=bc34301f-be53-4fc7-9c72-ce0f2d00b738&cache=v2)
然后修改
layouts/layout.js
里面展示这一块的内容![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fc113620e-b4a6-4a92-bee1-d70b242f1a2f%2Fc093dcf9-2671-4953-8897-30d8646d0063%2FUntitled.png%3Fid%3Debd4a49d-5679-40e0-bf85-5c9397691adf%26table%3Dblock%26spaceId%3Dc113620e-b4a6-4a92-bee1-d70b242f1a2f%26expirationTimestamp%3D1722067200000%26signature%3DGQiJppZdl3AZxuTT7YzNAkeHNki8iIsai__l_9YPSqc?table=block&id=ebd4a49d-5679-40e0-bf85-5c9397691adf&cache=v2)
最后
把以前blog里面的垃圾文章给删掉了,不忍直视。。。。