type
Post
status
Published
date
Sep 16, 2022
slug
blog
summary
使用notion搭配Vercel、GitHub搭建静态个人博客服务,并自定义域名进行访问
tags
建站
开发
category
学习思考
icon
password
Property
Oct 22, 2022 06:51 AM

一、在notion添加模版

首先点开下面的notion模版链接
然后点击右上角的Duplicate,把模版复制到你自己的notion里面
notion image
分享你自己复制的模版链接,并开启编辑权限,如下图所示
notion image
然后把你的分享链接notion.site/后面,?前面的32位字符串复制下来保留备用。

二、GitHub项目并进行配置

先给项目点个小星星,然后Fork项目到自己的GitHub库
notion image
在 blog.config.js 文件中修改NOTION_PAGE_ID为你上一步中保存的页面ID,并保存文件
notion image
其他配置选项请查看

三、在Vercel中部署项目

首先在https://vercel.com/注册一个账号,可以直接用GitHub注册,然后验证一下手机号,大陆号码也可以验证。
然后添加你的GitHub账号
notion image
部署你的项目
notion image
进行命名或者直接Deploy
notion image
等待项目部署完成。
项目部署完成后,点击左边的的网页缩略图就可以访问你的博客了。但是点进去后你会发现网站域名是Vercel生成的随机域名,太长了不便于记忆。如果自己有购买域名可以点击右边的go to Dashboard按钮进入设置页面添加自己的域名。
notion image

四、自定义域名

进入项目设置界面绑定自己的域名
notion image
输入你的子域名后,会提示你进行dns解析,这时候你按照提示到你的域名托管服务商那里按提示解析域名解析操作就可以了。
notion image
像下图这种就是成功了
notion image
但是我自己用的cloudflare添加CNAME记录时,一直卡住,然后在先在cloudflare添加了一条A记录指向Vercel的ip之后就很快成功了,成功之后再把A记录删除就好了。
notion image

五、文章发布

发布新文章只需要在你复制的notion模版点击右下角的new添加新page,并按照示例文章里的说明创建文章就可以了,记得把status的状态设置为Published,否则文章不会在博客中进行展示。
notion image

六、结语

本文章发布于2022年9月16日,也是我发布的第一篇博客,通过notion搭建博客也是今天学会的,特此记录。
加锁文章 - 密码123456原生安卓电视盒子设置