我使用 Dev.to 作为 CMS 彻底重写了我的个人网站

与往年相比，2021年1月的最后一个周末平静无波——英国因新冠病毒疫情全面封锁。然而，这却是一个彻底重写我的个人网站的绝佳机会。

为什么？

我决定重新设计和重写我的网站，原因如下：

• 我想从 JavaScript 转到 TypeScript。
• 该网站的样式是用styled-jsx设计的，维护起来很麻烦，而且在我看来也有点乱。目前我正在使用 Tailwind CSS，到目前为止，我很喜欢它以及它实用的风格；我希望我的个人网站也能体现这一点。
• 我不再喜欢这个设计，希望它更简洁、更干净。
• 我希望我的博客和作品集能够从 CMS 动态加载，而不必为每个条目复制粘贴一个新页面 - 请参阅Originally published at wallis.dev本文顶部。

使用的技术

• TypeScript——自从在工作中接触到 TypeScript 以来，我开始了解它相对于纯 JavaScript 的优势。
• Next.js - 我并不试图掩盖我对 Next.js 的喜爱，它使用起来非常简单，而且到目前为止，我的大多数文章都以某种方式包含Next.js。
• Tailwind CSS - 最近我一直在大量使用 Tailwind CSS。引用他们主页上的话，它让我能够“快速构建现代网站，而无需离开我的 React 组件”。Tailwind CSS 还让我能够非常轻松地添加暗黑模式。此外， Tailwind Typography也同样如此。
• Dev.to API动态构建博客和作品集页面⬅️我最喜欢的功能。

使用 Dev.to 作为 CMS

我网站上最喜欢的部分是使用 Dev.to 作为博客和作品集页面的内容管理系统。我之前见过有人使用 Dev.to API 在他们的网站上显示用户的文章，但据我所知，他们使用的方式和我这次的不太一样。

使用 Dev.to 作为 CMS 的好处是：

1. Dev.to 存储文章以及任何上传和使用的图像。
2. 我可以使用 Dev.to 的编辑器以及起草文章并稍后发布的能力。
3. 具有内置 RSS 提要，我可以使用它来将我的文章分享到其他网站，例如CodeNewbie和 Medium。
4. 尽管 Dev.to 首先拥有该文章，但使用规范 URL 可确保 Google 和其他网站将我的个人网站视为文章的来源网站。
5. 帮我将文章转换成 HTML。我最终自己从文章 markdown 中渲染了 HTML，因为它需要对 Dev.to API 发出更少的请求。

免责声明

在继续之前，我想强调一下，我打算纯粹将 Dev.to 用于我的博客和作品集（过去的项目showdev）。我不会用 Dev.to 创建非文章页面，因为如果其他人也这么做，Dev.to 就会变得杂乱无章，充斥着垃圾信息。例如，主页上的“关于”部分是硬编码到网站中的，如果我创建了一个关于我的教育经历的页面，我会将其纯粹用于网站，而不会发布到 Dev.to——我可能会用 Markdown 来写这些。

工作原理

在 GitHub 上查看代码

该网站使用 Next.js 构建，使用两个动态路由函数（getStaticPaths和getStaticProps）来生成博客和作品集页面。

一篇文章在我的网站上显示之前，必须满足以下两个要求：

1. 必须发布（显然）
2. 必须有一个指向我网站的规范 URL。这样我就可以自行选择显示哪些文章，以及文章在网站上的路径（而不是文章 ID）。此外，如果文章指向规范 URL，则该文章https://wallis.dev/blog/...将作为我博客的一部分构建；如果文章指向规范 URL，则https://wallis.dev/portfolio/...该文章将作为作品集的一部分构建。

对于每篇满足要求的文章，都会遵循后续的构建流程：

1. 在构建时，Next.js 调用getStaticPaths以下函数：

   1. 使用 Dev.to API ( ) 获取我已发布文章的列表/api/articles/me。
   2. 将文章的 markdown 转换为 HTML。
   3. 将文章保存到缓存文件以供下一步使用。
   4. 在 Next.js 上下文中为每篇文章创建一个动态页面 - 该页面slug将成为规范的 URL 路径。

2. 对于每个页面，Next.js 都会调用getStaticProps从缓存中获取页面文章的内容。文章包含名称、描述和 HTML。

   • 我还尝试向 Dev.to API ( /api/articles/{id}) 发出另一个 API 请求来获取页面文章，以便使用 Dev.to 渲染的 HTML。然而，由于我一次发出了太多 API 请求，这导致了构建失败——所以现在我使用 来渲染 Markdown remark-html。

3. 最后，页面渲染完毕。我使用自定义元素来显示文章name，然后使用显示之前渲染的descriptionHTML 。样式方面，我使用了Tailwind Typography 插件。getStaticPathsremark-html

为了确保网站始终与我在 Dev.to 上的文章同步，我使用了Vercel Deploy 钩子，每次我使用Dev.to webhook创建或更新文章时都会触发该钩子。我使用 Deploy Hook 而不是增量静态再生，这样博客仅在内容发生变化时重建，而不是随机重建。

注意：我使用 Dev.to API 需要授权，因为它们的请求限制似乎比公共路由更高。当我使用公共 API 并通过文章 API 获取每篇文章时，我发现构建失败，并出现429错误，提示 Dev.to 限制了请求速率。既然我现在使用缓存读取文章，或许可以切换到使用公共 API。

我目前正在撰写一篇详细的文章，更详细地描述我的网站如何利用 Dev.to 作为 CMS，敬请关注（并关注 Dev.to 以便在我发布时收到通知）！

外观

访问 wallis.dev

动图

未来的改进

1. 像 Dev.to 一样向代码块添加语法高亮显示。使用highlight.js和remark-highlight.js完成。
2. 使用 EmailJS添加联系表单。
3. 仅当文章内容发生变化或创建文章内容时才重建网站 - 减少网站不必要的重新部署。

概括

在本文中，我讨论了使用 Dev.to 作为博客和作品集页面的内容管理系统从头开始重写我的个人网站。

喜欢用 Dev.to 作为你博客的 CMS 吗？React！你发现了我可以改进的地方，或者你觉得有什么地方可以改进？请在评论区留言告诉我。

想使用 Dev.to API 来支持你的网站或博客吗？阅读我的操作指南。

感谢阅读！

顺便说一句，您可以在我的网站上实时查看这篇文章。