适用于编程博客的 5 个最佳 Gatsby 插件

在我的博客上可以找到更多文章，或者在 Github 上免费阅读 JavaScript 电子书，其中涵盖了从 ES6 到 2019 的所有新功能。
如果您想找到一个很棒的交互式教程场所，我推荐Educative（免责声明：该链接是附属的），我目前正在那里完成我的 JavaScript 课程。

什么是 GatsbyJS？

GastbyJS 是一个静态站点生成器，您可以使用它来构建超快的博客和网站。

与 Hugo 和 Jekyll 一起最受欢迎的是它，并且由于它使用 React，它目前是我最喜欢的。

开始使用 GatsbyJS 非常简单，如果您下载他们的入门模板之一，您可以在五分钟内启动并运行您的博客，只需将您的代码推送到 Github 并部署到 Netlify 即可。

如果您想要两个使用 GatsbyJS 构建的博客示例，您可以查看我的个人博客inspiredwebdev.com和我女朋友的越南语学习网站elingos.com。

我喜欢 GatsbyJS 的一点是它拥有丰富的插件生态系统，你可以用它来扩展它的功能，让你的工作更轻松。它
基于 React 构建，这意味着你喜欢的所有 React 插件都可以在 GatsbyJS 上运行。但在本文中，我将专门介绍我最喜欢的 GatsbyJS 插件。

这些都是我目前在上述两个网站上使用的插件。

如果您正在构建像我这样的编程博客，那么您很可能需要为您的代码块添加语法高亮。

该插件可以让您轻松地将 PrismJS 添加到您的网站，让您可以在不同的语法高亮选项中进行选择，并可以在PrismJS 网站上预览。

这个插件可以让你轻松地将你的 GatsbyJS 网站连接到 Google Analytics，这样你就可以清楚地了解你有多少用户以及他们的行为。

我喜欢这个插件的一点是它有一个OutboundLink组件可以追踪出站链接的点击量。我用它来追踪有多少人点击了我的亚马逊链接来查看我的书。

渐进式 Web 应用程序非常棒，我喜欢它们，将您的网站变成 PWA 是明智之举。

这款插件可以帮助您轻松设置网站清单，以便用户将其添加到主屏幕。
您可以编辑启动页面的颜色和背景，并且该插件还可以帮助您自动生成图标。

将您的网站变成 PWA 可以增强关注者的体验，并使他们更容易从手机主屏幕返回您的网站。

当您在 GatsbyJS 上撰写博客文章时，您将主要使用 Markdown，为此您将需要插件，gatsby-transformer-remark但有时您可能需要配置文件，并且您可能会将它们存储为 JSON 文件。

就我而言，我有一个称为产品的 JSON 文件，其中存储了有关不同文章的信息，例如标题、描述、价格和图像。

然后，我会用这个插件把这些信息拉到页面中，并动态生成卡片来展示我的产品。想了解我的意思，你可以看看我其中一个网站的这个页面。

我将使用 JSON 文件的其他示例包括：团队成员列表或推荐列表。

该插件增加了对 React Helmet 的支持，该组件可让您使用其 React 组件控制文档头。

这包括传递元数据，例如页面标题、描述和在社交媒体上分享页面时使用的不同图像。

它绝对是一个有用的插件，可以让你的生活（和你的 SEO）变得更好。

以上就是我最喜欢的 5 个 GatsbyJS 插件列表。如果您知道其他有用或您个人喜欢的插件，请留言并与大家分享。

非常感谢你的阅读。更多详情，请关注我的DevTo账号或博客inspiredwebdev 。

在Amazon和Leanpub上获取我的电子书