type
status
slug
tags
category
icon
password
Property
Nov 16, 2022 06:52 AM
date
summary
因为有想要搭建个人博客的需要,加上个人平时文章的记录都喜欢使用notion,所以便有了这边文章,主要依靠于github项目和大佬们的教程。
参考链接 如下
涉及
- Vercel:免费静态网站托管
- Notion:内容后台
- CloudFlare:CDN 加速
- 域名
- nextjs-notion-starter-kit:以 Notion 为后台的网站
部署
首先需要Duplicate Next.js Notion Starter Kit Template 这个模板,并在自己的notion的设置为分享并复制分享的🆔(下需要用到)

先fork这个项目, ,然后自己fork后的项目中修改
site.config.ts
配置文件 只需要修改下面部分这些然后去Vercel https://vercel.com 将fork后的项目进行托管,点击新增项目然后如下操作

到了这一步在对应项目就可以看到 对应域名了

通过该域名就可以访问到项目了,下面就是配置个人域名到这个项目上,其实就是设置一个cname
首先点击查看域名

输入对应域名,然后点击添加对应域名


这时候去域名管理添加对应的CNAME记录,如下添加cname记录

最后使用自己域名访问

不得不说还是挺方便的,只需要将对应内容添加到notion中就可以自动同步。
CDN加速
这里使用免费的cloudflare加速
添加一个cname记录到cname.vercel-dns.com即可

速度还是可以的
