我将我的 Gatsby 博客开源了：功能演示

我最近开源了我的博客，它是用Gatsby搭建的！这篇文章会讲解我选择 Gatsby 的原因、我使用的 Gatsby 插件，以及我博客中添加的一些功能。

为什么要使用 Gatsby？

Gatsby 最大的优势之一是其生态系统。它拥有海量插件，可以添加你所需的功能，同时还提供丰富的模板，助你快速上手。

另一个重要优势是性能。开箱即用，您将获得一个速度飞快的网站，这反过来会提升您的 SEO。作为参考，我的网站使用 Gatsby获得了近乎完美的Lighthouse评分：

Gatsby 博客是使用 React 和 GraphQL 构建的，所以如果你恰好是一名 React 开发人员（像我一样），那么能够使用你熟悉的技术来构建你的网站也是一个很大的优势。

将 Markdown 与 Gatsby 结合使用

我爱 Markdown，Gatsby 让我可以用它来写所有博客文章。Gatsby 的官方博客模板是入门的好选择。

如果你正在寻找比 Markdown 更强大的功能，Gatsby 还提供了对MDX的支持。使用 MDX，你可以用 Markdown 撰写文章，然后在任何你喜欢的地方添加 JSX 组件。

虽然我的网站目前只使用 Markdown，但我的网站是基于这个mdx-blog-starter构建的，这样我就可以灵活地将 JSX 添加到我的帖子中（如果我选择的话）。

Gatsby 插件

如果您正在寻找网站功能，那么很可能有插件可以帮您实现。以下是一些值得一提的插件：

• gatsby-plugin-google-analytics如果你想在你的网站上添加 Google Analytics
• gatsby-remark-external-links确保 Markdown 中的外部链接将在新选项卡中打开
• gatsby-plugin-feed用于 RSS 提要（当您想要交叉发布到 DEV 时，它非常有用！）
• gatsby-remark-autolink-headers将添加链接到页面副标题的功能（如果将鼠标悬停在此帖子的某个标题上，就可以看到它）

Gatsby 的社交卡

社交卡片是你在 Twitter 或 Facebook 等网站上分享博客链接时看到的图片。这篇文章的社交卡片如下：

有一些插件可以帮你生成社交卡片，但它们的设计和功能略有限制。我选择修改 Max Poutord 编写的脚本，这样我就可以为我的社交卡片创建一个 React 组件，并对其进行截图。

时事通讯注册提示

大家都建议你应该订阅新闻简报，所以我在每篇博文底部添加了一个组件，方便读者订阅。我决定使用buttondown.email ，因为与一些竞争对手相比，它是我能找到的最便宜的选择。我还没有发布我的第一份新闻简报，但我正在考虑将其做成每月一次的总结，汇总我的文章和近期动态。如果你感兴趣，欢迎订阅！

使用 Gatsby 实现 Web 货币化

几个月前，在 DEV 的网络货币化黑客马拉松上，我写了一篇关于如何使用 Gatsby 实现网络货币化的文章。本质上，网络货币化意味着，如果人们访问我的网站，并且订阅了像Coil这样的服务，我就会根据他们访问我网站的时间长短，获得一小笔钱（几分钱）。设置起来非常简单。到目前为止，我只赚了 5 美元，但我觉得背后的想法很酷。

每篇文章都链接到其 Markdown 文件

现在我的博客开源了，读者们有机会为我的网站做出贡献。每篇文章的顶部，我都会提供一个指向其 Github 上的 Markdown 文件的链接。如果您在阅读我的文章时发现拼写错误，欢迎在 Github 上提交 Pull 请求来修复！

在 Netlify 上托管 Gatsby

我使用Netlify进行托管。它非常用户友好，而且免费！每次我推送到博客的代码库时，它都会自动触发新的部署，我的网站几分钟内就能准备好。

下一步是什么？

更新我的博客有点让人上瘾，我还计划添加一些功能：

• 更好的代码片段
• 使用其 API 与 DEV 集成

我觉得这次博客大改版重新激发了我写博的兴趣，所以我很期待接下来几个月的更新。敬请期待！