博客网站的形式有很多,最常见的是基于github管理,通过github pages或者自定义github actions来自动部署,当需要更新时需要打开github仓库,修改代码并push,然后触发自动部署来达到更新的目的。而使用Notion来创建博客网站,
- 可以快速添加、编辑、删除博客内容,而且每次发布博客也无需手动更新网站,从而大大提高了博客内容的更新效率。
- 可以让多人方便地协作管理和编辑博客内容,使得团队协作更加容易。
快速开始
本地调试
- 将上面仓库
fork
到自己仓库,并clone
到本地
- 修改
site.config.ts
中的配置, 其中必须得是跟页面相关的rootNotionPageId
, 首先找到博客使用的notion
模板
- 点击右上角复制页面到自己的
notion
空间下,然后点击页面右上角分享,获得一个公开链接,链接最后一截就是rootNotionPageId
比如我的对应的就是6e4c1aee7c57432baf035aee373fb317
https://wangfengyuan.notion.site/6e4c1aee7c57432baf035aee373fb317
- 本地运行
npm install npm run dev
本地运行代码,打开http://localhost:3000预览效果
部署到vercel
在
vercel
绑定自己github
仓库导入自己项目导入后的好处在于,后续修改代码只需要推送到
master
主分支就能触发自动部署部署完成后,vercel会自动分配个域名,通过改链接就可以访问, 比如我的对应的是
https://nextjs-notion-blog-wfy.vercel.app/
自定义域名
vercel设置
进行自定义域名,首先需要在域名服务商购买域名,我这是在腾讯云购买的域名,在
vercel
对应项目找到设置一栏,点击domain
, 在输入自己想自定义的域名,比如我的是blog.codefe.top
,点击add
进行添加添加DNS解析
上面步骤完成后,会提示你需要将域名的
DNS
地址配置一条CNAME
记录到cname.vercel-dns.com
我们按照要求,到域名管理后台添加一条CNAME
记录,这里点击保存后过几分钟回到
vercel
就显示成功了,并且会自动生成SSL
证书然后就可以通过 https://blog.codefe.top/ 这个域名访问了
添加谷歌分析
在谷歌分析创建账号并拿到对应的衡量
ID
按照提示我们可以直接在vercel设置自己的环境变量
NEXT_PUBLIC_GOOGLE_ANALYTICSS_ID
值为上面的衡量ID保存后再次部署即接入了自己的谷歌分析