本周研究了下notion，因为有个域名所以有了这篇文章。
👉
您需要准备Notion账号、Github账号、next.js项目地址、cloudflare账号。
Github项目地址：https://github.com/chusight/nextjs-notion-starter-kit
项目原作者：https://github.com/transitive-bullshit
可以用自定义的QQ邮箱注册。
需要找一些notion页面模板，复制到自己的库，然后分享为所有人可查看。
此时左侧列表栏复制你分享页面的地址。
格式如下： https://www.notion.so/******************************
这个很重要，会用到项目内的代码里。
国内加载慢注册需要工具。
注册后打开上面的next.js项目fork到自己的库。
项目文件需要修改处请参考项目内自述文件，有几个关键点截图放下面：
总共有三处，从上往下
💡
第一处，
components文件夹内的
Update GitHubShareButton.tsx文件
这个要修改的是主页右上角的Github链接
代码链接马赛克部分替换为自己的账户名
💡
第二处
public文件夹内的图标文件，这个主要功能就是在各种设备上的预览图标，可以下载后在ps内一个一个替换掉，ico有很多网站可以在线转换。
修改完chrome的效果：
💡
第三处（关键）
第三处最关键成功与否都在这个文件内
rootNotionPageId:后面跟在notion内共享页面复制到的link地址的后尾
domain后面填写你共享页面的Link
name与author可以随意写。
这里有个小tips，notion页面的标题切记不要更改，更改后你这个页面的link地址会有变化，这个代码里的修改就没用了。
底下twitter， GitHub ，Linkedin 不用可以不填，填的话只填写用户名就可以了。
三处修改完就可以去vercel部署项目了。
用上面的Github账号登陆vercel可调用库内刚保存的next.js部署新项目。
部署成功后会生成几个结尾是.app的项目链接，打开这些链接就是项目内修改的notion的页面。
以上教程比较简单，不明之处请自己寻找答案。
如果你有独立域名可以继续往下看：
一个免费的dns解析网站
先注册账号，输入你的独立域名解析，会有两个属于自己的dns地址。
将独立域名服务商（你的域名购买商）处的dns解析地址修改为cloudflare给的两个dns地址。
当收到邮件反馈，表示你的dns已经解析成功了。
vercel部署页面
在Domains内添加你的独立域名，因为dns已经在Cloudflare解析成功，这个页面会显示你需要在Cloudflare网站添加的dns规则
💡
有两条
💡
A @ xx.xx.xx.xx
💡
CNAME www xxxx.xxxx.xxxx.xxxx
Cloudflare网站添加成功后如图
vercel上会自动验证
如图
成功后你的独立域名就可以访问了！
但为了访问速度更快，
我们再次地
Cloudflare免费版支持三种页面规则，可以添加以下两种
以下规则为WordPress建站规则不适用于vercel
具体如图：
💡
1.~~~~www.****.***~~~~/wp-admin*
前面是你自己的独立域名
💡
2.~~~~www.****.***~~~~/*preview=true*
前面是你自己的独立域名
设置完成DNS规则内会自动生成几个规则，直接添加到记录。
如图
这时所有工作都完成了，你在notion上面修改你的共享页面时，它将自动更新。
此时你的独立域名访问就是你部署的网页。
enjoy it ！
感谢：Athena 指正 以上规则为WordPress建站规则。
Ps.自己摸索，如有疑问可邮件联系我，谢谢！
更新两点：
1.解析可以直接在域名购买平台解析，直接添加DNS规则。（不需要Cloudflare）
2.首页文章列表用notion里的databace做的。
说在前面
听闻原作者有了更新（作者地址：https://github.com/transitive-bullshit/nextjs-notion-starter-kit）预览网页：https://transitivebullsh.it/，去看了下github的分叉，用的是一个韩国老哥的库，（地址在这里：https://github.com/hanmilLee/nextjs-notion-starter-kit）预览网页：https://hmdev.vercel.app/
可以说是重磅效果：
PC
安卓：
导航栏此次在site.config.ts文件内
这几行
注意中间有个逗号相隔
实测手机端体验良好导航栏标题不要超过三个。
留言板复制完库后，登录github要求安装，自动跳转到https://utteranc.es/?installation_id=25639318&setup_action=install 点击安装就可以了
点击统计使用的是https://hits.seeyoufarm.com/
具体代码在components/Footer.tsx 内
在hit网页输入你的域名链接，注意要带https://
将
里面的内容copy到上面文件内的
需要注意的是，尾段的=false需要改为ture
如下：
在components/PageHead.tsx内
此处暴露了原作者的GA ID
（什么是GA ID？Google Analytics 中文名称“谷歌分析”，是谷歌官方发布的一款网站流量统计分析工具，也是同类型SEO工具中功能最强大的那一个，没有之一，具体可以看这篇文章）
有谷歌账号即可
地址：https://analytics.google.com/
注册添加
在数据流添加一个网页数据流
添加网页地址与名称可以生成如下ID
将G-**********的字段与下图位置替换。
可将G-*******字段用${config.GAId}替换
