1 详细操作
基于 (二) 的内容
1.1 完成 Vercel 配置
1.1.1 注册 Vercel
有了前面注册的 Github 账户,我们可以快速注册 Vercel。
请 点击此处 前往官网注册。
选择
Hobby
后点击 Continue
。选择
Continue with Github
。登录 Github 账户后,点击
Authorize Vercel
以确认授权。这样你的帐户就创建好啦!
1.1.2 仓库授权
接着会跳转到这个页面,用于授权 Vercel 读取你的 Github 仓库以拉取代码,请点击
Install
。接着选择仓库授权方式并点击
Install
。跟着就会提示你授权完成了!
1.1.3 开始部署
接下来就是正式开始将代码部署到 Vercel 中了,点击
Import
。选择前面步骤创建的代码仓库,并选择
Import
。如果你对
Project Name
没有其他要求的话,直接点击 Deploy
即可。1.1.4 成果验收
接着 Vercel 就会开始构建,我们要做的就是等待构建结束。
构建结束后,就会提示已经部署完成。
点击
Continue to Dashboard
后,就可以看到你费尽心思部署好的博客了。点击
Domains
中 Vercel 分配的免费域名,去查看你新鲜出炉的博客吧!1.2 域名设置
1.2.1 配置自己的域名(可选)
如果你有自己的专属域名,那么可以按照下图的内容添加你自己的域名,添加后 Vercel 会提示你如何配置 dns 解析,按照指引配置即可。
1.2.2 将域名配置到 site.config.ts
配置好域名后,请回到
site.config.ts
文件,配置前面步骤还没确定的 domain
字段。确认无误后,保存文件并在终端输入下方命令重新提交代码。
git add . git commit -m "domain" git push
提交后,不用做任何事情,Vercel 会自动拉取代码重新部署,太方便啦!
1.3 后续更多
部署及域名设置完成后,整体功能就已经就绪了。
后续要做的就是更新你的 Notion 内容啦~欢迎成为我的 朋友们 哦!
2 One More Thing
可能有些朋友会疑惑:为什么部署完成后,页面和我的博客呈现不一致?
这是因为部署完成后,我还基于我自己的需求,扩展了不少内容,如下所示。
优化整体页面
类似于整体宽度、quote、copyright 这些地方的展示逻辑,我根据自己的审美进行了调整。
支持移动端目录
PC 端是有目录的,不过如果是移动端就看不到了。
对于高频使用移动端的用户来说,无法全局概览页面,无法快速关注指定内容,还是有点难受的,于是考虑到用户体验,我进行了补充。
支持多语言切换
考虑到我后续发的文章可能海外 DIY 用户会更感兴趣,所以我决定支持多语言。
不过毕竟母语是中文,所以仍旧保留了中文版本,也便于中文用户查看。
支持标签文章查看
参考了作者个人分支代码 transitive-bullshit/nextjs-notion-starter-kit at transitive-bullshit 后,进行了补充。
支持相关文章查看
一下子要输出完一篇大作的所有内容,对作者实在是太不友好了。
根据我自己的习惯,感觉还是要支持系列文章输出,这样写作任务轻松一些,你们看的时候也可以减少负担。
支持打赏模块
嗯… 实在是太穷了 (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 提供的资源,简化了我们自部署博客的成本。