如何使用Notion+Vercel免费搭建自己的博客(三)
🥳

如何使用Notion+Vercel免费搭建自己的博客(三)

最后更新时间
2024-11-18 04:08

1 详细操作

基于 (二) 的内容

1.1 完成 Vercel 配置

1.1.1 注册 Vercel

有了前面注册的 Github 账户,我们可以快速注册 Vercel。
点击此处 前往官网注册。
选择 Hobby 后点击 Continue
notion image
选择 Continue with Github
notion image
登录 Github 账户后,点击 Authorize Vercel 以确认授权。
notion image
这样你的帐户就创建好啦!

1.1.2 仓库授权

接着会跳转到这个页面,用于授权 Vercel 读取你的 Github 仓库以拉取代码,请点击 Install
notion image
接着选择仓库授权方式并点击 Install
notion image
跟着就会提示你授权完成了!
notion image

1.1.3 开始部署

接下来就是正式开始将代码部署到 Vercel 中了,点击 Import
notion image
选择前面步骤创建的代码仓库,并选择 Import
notion image
如果你对 Project Name 没有其他要求的话,直接点击 Deploy 即可。
notion image

1.1.4 成果验收

接着 Vercel 就会开始构建,我们要做的就是等待构建结束。
notion image
构建结束后,就会提示已经部署完成。
notion image
点击 Continue to Dashboard 后,就可以看到你费尽心思部署好的博客了。
notion image
点击 Domains 中 Vercel 分配的免费域名,去查看你新鲜出炉的博客吧!

1.2 域名设置

1.2.1 配置自己的域名(可选)

如果你有自己的专属域名,那么可以按照下图的内容添加你自己的域名,添加后 Vercel 会提示你如何配置 dns 解析,按照指引配置即可。
notion image

1.2.2 将域名配置到 site.config.ts

配置好域名后,请回到 site.config.ts 文件,配置前面步骤还没确定的 domain 字段。
notion image
确认无误后,保存文件并在终端输入下方命令重新提交代码。
git add . git commit -m "domain" git push
提交后,不用做任何事情,Vercel 会自动拉取代码重新部署,太方便啦!

1.3 后续更多

部署及域名设置完成后,整体功能就已经就绪了。
后续要做的就是更新你的 Notion 内容啦~欢迎成为我的 朋友们 哦!

2 One More Thing

可能有些朋友会疑惑:为什么部署完成后,页面和我的博客呈现不一致?
这是因为部署完成后,我还基于我自己的需求,扩展了不少内容,如下所示。

优化整体页面

类似于整体宽度、quote、copyright 这些地方的展示逻辑,我根据自己的审美进行了调整。
notion image

支持移动端目录

PC 端是有目录的,不过如果是移动端就看不到了。
对于高频使用移动端的用户来说,无法全局概览页面,无法快速关注指定内容,还是有点难受的,于是考虑到用户体验,我进行了补充。
notion image

支持多语言切换

考虑到我后续发的文章可能海外 DIY 用户会更感兴趣,所以我决定支持多语言。
不过毕竟母语是中文,所以仍旧保留了中文版本,也便于中文用户查看。
notion image

支持标签文章查看

参考了作者个人分支代码 transitive-bullshit/nextjs-notion-starter-kit at transitive-bullshit 后,进行了补充。
notion image

支持相关文章查看

一下子要输出完一篇大作的所有内容,对作者实在是太不友好了。
根据我自己的习惯,感觉还是要支持系列文章输出,这样写作任务轻松一些,你们看的时候也可以减少负担。
notion image

支持打赏模块

嗯… 实在是太穷了 (ToT)/~~~

支持评论模块

对文章有疑问或者有建议的用户,直接联系我沟通的成本可能比较高,我借助 giscus/giscus: A comment system powered by GitHub Discussions. :speech_balloon: :gem: 这个很棒的项目,使用 github discussion 作为了评论数据源,接入了博客中。

补充公众号、小红书链接支持

欢迎大家也来这里找我~定位和博客还是不太一样哦!
 

除了上述这些,还有一些小改动点,比如说 RSS 优化、Sitemap 优化、引入 Vercel 相关分析工具等。
其实我也是第一次接触 React 和 NextJS… 所以代码写得很烂… 不过也说明了上述改造还是比较简单的,大家可以自行动手尝试。
如果你对我改造的东西感兴趣,欢迎留言告知,我会再补充文章进行介绍。
最后,感谢代码作者 @transitive-bullshit 的优秀作品,感谢 Github、Notion、Vercel 提供的资源,简化了我们自部署博客的成本。
 
 

📌 相关文章

📃

如何使用notion+vercel免费搭建自己的博客共 3 篇文章
去查看

当前文章已是最新文章

欢迎点击此处订阅最新内容
打赏@R同学救救孩子吧
去打赏