隆重推出我的新博客作品集

如果你看到了这条信息，那就说明我全新改版的博客网站已经上线啦！我非常激动你能来到这里，体验我过去三个月利用业余时间精心打造的新网站。这真是一项充满爱的工程，我终于按下发布键，感觉无比兴奋！

快来看看我的新博客作品集吧！

我的新网站焕然一新，在很多方面都比之前的版本有所改进，并且添加了一些我非常兴奋的新功能！

不过，在深入探讨这个问题之前，我想先简要谈谈我为什么决定重建我的博客作品集。

我为什么重建了我的博客作品集

我写博客已经一年多了。2020年10月，我决定将我的知识和学习过程公开记录下来，作为一项投资。

最初，我的博客托管在 Hashnode 上。Hashnode 设置只需两分钟，支持自定义域名映射，而且社区活跃，这些都极具吸引力。它非常适合我！然而，没过多久，我就渴望深入探索，搭建属于自己的博客平台。我想要真正拥有所有内容，打造个人品牌，随心所欲地设计博客主题，并根据需要添加各种功能。

我选择了 Gatsby 作为框架，并使用 MDX 作为内容管理系统。我努力进行设计，学习 Gatsby，最终在 2021 年初发布了我自己的网站。

📣 您仍然可以点击这里访问我的旧作品集！

自那以后，我发表了34篇文章，撰写了6篇赞助文章，在线触达了超过10万人。真是硕果累累的一年！

那为什么要重建呢？

技术方面有一些原因，但我的决定很大程度上源于我不断学习新事物的渴望。我把我的领域视为一个实验环境，一个激发创造力的场所。我的代码库一直在不断发展变化。有些东西会保留下来，而有些东西我则意识到最好不要公开发布。无论最终结果如何，我总能从中有所收获。

🤔 你可能觉得搭建博客并不复杂。但我不同意。以下是我认为每个开发者都应该搭建自己博客的原因。

我还有几个更合理的理由：

• Gatsby 运行速度越来越慢，构建时间也很长，而且由于我的博客搭建方式，添加新功能也变得越来越困难。
• 我遇到了一个非常奇怪的bug，无法提交更改——完全不知道为什么。我尝试了很多方法来解决这个问题，甚至删除了项目并重新克隆。有时候可以提交，有时候又不行。我还尝试了不同的电脑。但所有方法都无效。🤷
• 我所有的博客内容都来自 MDX。虽然能够将 React 组件注入 Markdown 实现一些很棒的交互效果，但每次都要打开 IDE，手动创建新文章，暂存更改，然后再重新部署博客，实在太麻烦了。这让我开始寻找内容管理系统 (CMS)。我知道，我知道：这都是些小烦恼。
• 我之前在公司内部项目里用过 Next.js，感觉很不错。它支持在构建时（SSG）、请求时（SSR）或增量时（ISR）预渲染页面，这带来了很多可能性，也解决了我的一些痛点（比如上面提到的问题）。关于 Next.js 和我的技术栈，本文稍后会详细介绍……

我的博客作品集有什么新内容？

现在到了最精彩的部分！我为这个网站添加了许多新功能，并进行了一些改进！

概念作为一种内容管理系统 (CMS)

我的所有生活都离不开 Notion：工作项目、笔记、联系人、正在阅读的书籍、每日日记、每周日程、家庭事务、财务、博客文章——应有尽有！当我看到 Notion API 发布时，利用 API 将 Notion 用作内容管理系统就成了顺理成章的事情。

现在，当我想要发布新文章时，无需打开 VS Code 手动创建新文件、推送更改并重新部署应用——现在我只需在博客数据库中创建一个新条目，像往常一样撰写文章，新文章就会自动显示在我的网站上。简直太神奇了！✨ 

文章反响

我的博客作品集更新后，将推出文章评论这一新功能！

我非常喜欢社区互动，而让其他人快速了解文章是否有用的方法之一就是快速浏览一下评论区的反应。该功能基于 Supabase 和 Next.js API 路由构建，访客可以使用以下表情符号对文章进行反应：👍、❤️、👏 和 🎉！

我计划在反应激活时添加一些微交互，敬请期待！

自动开放图形图像

我很高兴地宣布另一个新功能：自动化 Open Graph 图片！

我以前会为每篇文章手工制作社交媒体横幅。虽然这样比较灵活，但非常耗时。

借助强大的 Cloudinary API，我的作品集可以抓取文章的横幅和标题，并生成动态的 Open Graph 图片。我为这项功能感到非常自豪，它不仅能节省我大量时间，而且看起来也超级炫酷！

统计页面

我几乎直接从SLD那里偷来了统计页面，并把它添加到我的网站上！

访客可以从这里看到我网站的活跃访客数量、页面总浏览量、已发表的文章数量、文章反响的详细情况等等！

这是通过各种 API 实现的，统计数据每 60 秒更新一次。

文章“阅读”功能

我希望增加的一项提升用户体验的功能是，让访客能够快速浏览并识别他们已经阅读过的文章。

有时候很难记住已经看过的内容，尤其是随着时间的推移，访客们会再次访问我的博客。这个小工具非常实用——甚至在我搭建网站的时候也帮了我很大的忙！

智能文章推荐和文章标签

我将它们归为一类，因为它们彼此相关，但实际上它们应该被视为独立的功能。

当访客阅读完一篇文章后，我的博客会智能地推荐三篇相关文章，帮助他们找到更多有用的内容。这是通过每篇文章的标签来实现的。

而且，由于文章现在都有了标签，因此现在可以在博客列表页面上通过标签发现文章。

复制代码到剪贴板

用户经常要求添加的一项较小功能是能够将一段代码复制到剪贴板。

现在，使用台式机或中型设备阅读文章的访客只需单击一下即可复制代码！

将文章分享到社交媒体

与我之前的博客版本相比，我改进的一个方面是社交分享选项的位置。

之前，这些选项位于页面顶部，隐藏在一个三点菜单下。不太容易找到；我当时并没有真正考虑用户体验，只是想实现一个下拉菜单，因为它看起来很酷！

第二次尝试更加优雅，我在用户体验方面也投入了更多精力。如果访客正在平板电脑或电脑上阅读文章，右侧的固定侧边栏包含易于识别的社交图标，方便他们随时访问。

如果使用移动设备，社交图标已移至文章末尾，方便访客在觉得文章有用时分享文章。

在社交图标旁边，新增了一个复制到剪贴板图标，方便用户直接获取网址。

文章最后编辑日期

我博客上的文章就像一份活文档；随着时间的推移，我会获得关于内容的反馈，扩展我对该主题的知识，或者由于变化或过时而更新文章，文章也会变得更好。

从读者的角度来看，知道他们正在阅读的文章是最新的会很有帮助，因此我在发布日期下方添加了更新日期。

动画和页面过渡

我不太喜欢网站上那些分散注意力的动画，尤其是在阅读文章的时候。

毋庸置疑，动画在设计和用户体验中可以发挥作用。

我的新博客作品集里加入了微妙的页面过渡效果，甚至在“项目”页面上还加入了视差滚动效果。

专用项目页面

在此基础上，我改版后的博客作品集包含了一个专门的“项目”页面。

我之前的版本在首页展示了项目。虽然美观，但却没有留下太多空间展示其他信息，而且访客需要向下滚动很长一段距离才能找到项目。

我希望新的“项目”专页能让大家更容易访问我的一些精选作品。

移动导航菜单

本网站新增的另一项功能是新的移动导航菜单。

现在，访客可以点击设备右上角的汉堡菜单，访问导航菜单，轻松浏览我的网站，并随时更改主题。

更新日志的新面貌

虽然本次版本更新并没有新增变更日志页面，但我更新了页面外观，并从 Notion 获取了内容。

我喜欢记录我对这个网站所做的更改。这可以让访客了解有哪些新内容，也可以让我清楚地看到我发布了哪些值得关注的内容。

轻松访问简历

最后，我添加了一个功能，可以直接从页面底部快速访问我最新更新的简历。这对于未来的潜在雇主或任何想了解我工作经历的人来说都很有帮助。

技术栈

我相信你们中的一些人很想知道我使用了哪些技术来构建我的 JAMstack 博客作品集。我在工具箱页面上列出了这些信息，但在这里让我更深入地探讨一下。

Next.js 版本 12

我选择使用Next.js作为重建框架。具体来说，是最新发布的 12 版本，它新增了许多功能！通过中间件，我可以轻松地将流量重定向到特定文章的更新后的 URL。

我网站上的所有页面要么在构建时静态生成，要么通过增量方式重新生成以获取新数据。这意味着我的博客页面速度极快。

概念

如前所述，我使用Notion作为我的内容管理系统 (CMS)。当我想发布新文章时，我会在博客数据库中创建一个新条目，更新相应的属性，然后 Next 的 ISG 会处理用户分发事宜。

我的工具箱和更新日志页面也使用了 Notion。

TailwindCSS 版本 3

我再次使用Tailwind来设计我的博客作品集，但这次使用的是最新发布的 3.0 版本！✨

这次改版后，我更多地依赖排版插件来处理大部分内容样式。与之前的博客相比，这意味着我的标记代码简洁得多。标记中使用的所有实用类都是为了特定的样式需求。

苏帕巴

几个月前，我为了做一个副业项目试用了Supabase ，结果立刻就爱上了它。

我使用 Supabase 来追踪文章的点击量和互动情况。它易于使用，再加上 Next 的 API 路由，使用体验非常流畅。

云端

Notion 允许我直接在文章中嵌入图片，但我决定不让 Notion 提供图片服务，而是改用Cloudinary。

我还在使用 Cloudinary 强大的图像转换 API 来创建动态 Open Graph 横幅。它超级棒，我肯定很快就会写一篇教程！

标志性

用户界面 (UI) 提升精致度的关键之一在于一致性，而图标在其中扮演着重要角色。市面上有无数的图标库，但我选择了高级的Iconic图标库。每个图标都经过精心设计，力求完美——希望您和我一样喜欢它们！

评论

当宣布 Revue 提供的电子报刊可以嵌入到你的 Twitter 个人资料中时，我迅速从 Buttondown 切换到了 Revue。

Revue 还拥有强大的 API，使我能够在我博客作品集中执行各种操作。

致谢

虽然是我在编写代码，但这次冒险绝非我一个人的功劳。

我要感谢以下几位人士：

• 感谢Jon Meyers提供的关于使用 Notion API 的 Egghead 课程，该课程非常有帮助。
• Drew Bredvick——感谢他帮助我调试了一些非常奇怪的SEO渲染问题。
• James——感谢他设计的精美图标。
• 感谢Jason Lengstorf撰写了这篇关于使用 Cloudinary 添加文本叠加层的实用文章。

结论

改版这个网站的过程非常有趣，我也学到了很多东西！

感谢您的关注，也感谢您读到这里！

敬请关注后续更新——我有很多计划！