如何用Notion搭建自己的博客
如何用Notion搭建自己的博客

如何用Notion搭建自己的博客

Tags
blog
Web Dev
Published
April 1, 2023
Author
wangfengyuan
博客网站的形式有很多,最常见的是基于github管理,通过github pages或者自定义github actions来自动部署,当需要更新时需要打开github仓库,修改代码并push,然后触发自动部署来达到更新的目的。而使用Notion来创建博客网站,
  • 可以快速添加、编辑、删除博客内容,而且每次发布博客也无需手动更新网站,从而大大提高了博客内容的更新效率。
  • 可以让多人方便地协作管理和编辑博客内容,使得团队协作更加容易。

快速开始

本地调试

 
  • 将上面仓库fork到自己仓库,并clone到本地
  • 修改site.config.ts 中的配置, 其中必须得是跟页面相关的rootNotionPageId , 首先找到博客使用的notion模板
notion image
  • 点击右上角复制页面到自己的notion空间下,然后点击页面右上角分享,获得一个公开链接,链接最后一截就是rootNotionPageId 比如我的对应的就是6e4c1aee7c57432baf035aee373fb317
https://wangfengyuan.notion.site/6e4c1aee7c57432baf035aee373fb317
Notion页面右上角的 Share→ Share to web
Notion页面右上角的 ShareShare to web
 
  • 本地运行
npm install npm run dev
本地运行代码,打开http://localhost:3000预览效果

部署到vercel

vercel绑定自己github仓库导入自己项目
导入后的好处在于,后续修改代码只需要推送到master主分支就能触发自动部署
notion image
部署完成后,vercel会自动分配个域名,通过改链接就可以访问, 比如我的对应的是
https://nextjs-notion-blog-wfy.vercel.app/
 

自定义域名

vercel设置

进行自定义域名,首先需要在域名服务商购买域名,我这是在腾讯云购买的域名,在vercel对应项目找到设置一栏,点击domain, 在输入自己想自定义的域名,比如我的是blog.codefe.top ,点击add进行添加
notion image

添加DNS解析

上面步骤完成后,会提示你需要将域名的DNS地址配置一条CNAME记录到cname.vercel-dns.com 我们按照要求,到域名管理后台添加一条CNAME记录,这里
notion image
点击保存后过几分钟回到vercel就显示成功了,并且会自动生成SSL证书
notion image
然后就可以通过 https://blog.codefe.top/ 这个域名访问了
 

添加谷歌分析

在谷歌分析创建账号并拿到对应的衡量ID
notion image
按照提示我们可以直接在vercel设置自己的环境变量 NEXT_PUBLIC_GOOGLE_ANALYTICSS_ID 值为上面的衡量ID
notion image
保存后再次部署即接入了自己的谷歌分析