我如何使用 Gatsby 创建我的博客

这篇文章最初发表在我的博客上

作为一名软件开发者，博客是推广自己的最佳媒介之一。我坚信，每位关心自己职业生涯的软件开发者都应该投资创建一个博客。

这些话出自我正在读的一本书：《软技能：软件开发者的人生手册》。如果你想知道如何在开发者的职业生涯中取得成功，我强烈推荐你读这本书。

这本书深入探讨了博客及其重要性。尤其当你像我一样是自由职业者或顾问时，你会发现成功的博客可以为你带来许多客户，而不必独自去寻找。

撰写文章还可以帮助您成为更好的开发人员和沟通者，因为博客文章背后有大量的研究、编码和学习工作。

还有另一份好工作给了我很大的启发：Nader Dabit的《繁荣的软件顾问》，他讨论了如何通过在博客上制作内容来“搭建桥梁”：

这也回到了“搭建桥梁”的问题，当你学到新东西时，把这些知识分享出去，它既能帮助社区，也能帮助你！

你一定也应该读一下这篇文章。

短短三四个月坚持写作，我已经看到了很多不错的成果。最近，我关于世博会网页版的文章在世博会官方博客上发表了，我非常高兴。

我开始在 Medium 上写作，它真的很棒，而且写作很容易。你可以做很多很酷的事情，比如导入文章、统计信息等等。但它似乎并不是一个真正适合开发者的平台。

我还尝试了dev.to，这是一个非常适合开发者的平台，因为 99% 的开发者都是程序员或正在学习编程的人。顺便说一下，你可以在那里关注我：https://dev.to/mouhamedaly

最终我决定创建自己的个人博客。拥有自己的平台会给我带来很多好处：

• 我不依赖任何其他平台
• 我可以通过博客赚钱：也许展示广告
• 我可以按照自己的意愿定制它。
• 我仍然可以在 medium 或 dev.to 上发布文章并将读者重定向到我的个人博客。
• ETC

在开始开发我的博客之前，我拖延了好一阵子。

我不太想用经典的 HTML、CSS 或 WordPress 之类的 CMS 来做我的网站（我其实不太喜欢）。

但有一天，我在做研究的时候发现了 Gatsby，并深深地爱上了它。我意识到 Gatsby 是创建个人或商业网站的完美工具。所以我决定学习它。对我来说，最好的学习方法就是实践。

盖茨比

什么是盖茨比？

Gatsby 是一个基于 React 的免费开源框架，可帮助开发人员构建速度极快的网站和应用程序。

Gatsby 通常被定义为一个强大的静态站点生成器，但与 jeykill、hugo 等其他 SSG 有很大不同。Gatsby 的特殊之处在于它允许您创建极快的静态、渐进式和高性能的 Web 应用程序。

它是如何工作的？

Gatsby 在构建时完成所有数据获取。无论你的数据来自哪里，你都可以用相同的方式访问它。Gatsby 会将你的数据规范化为 graphql api，以便你轻松读取和显示它们。

最后，gatsby 会将所有这些编译成静态资产，然后允许您非常快速地将您的应用程序部署到您选择的 CDN 而不是传统服务器。

下图对此进行了总结：

入门

Gatsby 命令行界面

npm install -g gatsby-cli

上述命令在您的机器上全局安装 Gatsby CLI，以便您可以使用所有这些命令。

创建新项目

gatsby new gatsby-site

启动项目

gatsby develop

构建项目

gatsby build

Gatsby Starter

Gatsby CLI 工具允许您安装启动器，它们是由社区维护的样板 Gatsby 站点，旨在快速启动开发。

例如，如果你想创建一个博客，你可以使用博客启动器，而不必从头开始编写代码。所有 Gatsby 启动器都可以在这里找到。

我发现了一个非常好的入门博客，我用它来快速启动和运行。

通过这个启动器，我可以使用很多功能，比如我们将在下一节中看到的 netlify CMS，这就是 gatsby 启动器的酷之处。

我通过运行以下命令用这个启动器初始化了一个新项目：

gatsby new blog [https://github.com/W3Layouts/gatsby-starter-delog](https://github.com/W3Layouts/gatsby-starter-delog)

此命令通过运行 npm install 下载文件并初始化站点。

之后我可以运行我的应用程序：

cd blog 

gatsby develop

Gatsby 将启动一个默认可通过http://localhost:8000访问的热重载开发环境。

定制：

默认情况下，启动器如下所示：

经过一些自定义后，它现在看起来像这样。我更改了颜色、添加了头像、更改了字体等等：

您可以根据需要自定义您的应用程序，它只是 html、css 和 react。

顺便说一句，如果您想启动Expo /Gatsby 项目，我创建了自己的启动器。

Gatsby 插件

基本上，Gatsby 插件只是 Node 包，因此您可以使用 NPM 像安装 Node 中的其他包一样安装它们。

你需要谷歌分析吗？这里有一个插件。

npm install — save gatsby-plugin-google-analytics

你需要离线支持吗？这里有一个插件可以实现。

npm install — save gatsby-plugin-offline

简而言之，您想做的每件事都有一个插件。

Netlify 和 Netlify CMS

Netlify

定义：Netlify 是一个可用于自动构建、部署、服务和管理前端站点和 Web 应用程序的平台。

在 Gatsby 网站中使用 Netlify 确实有很多优势。

• 持续集成：每次我将代码推送到 GitHub 时，Netlify 都会构建一个新版本的应用并进行部署。我什么都不用做，这太酷了。
• 表单：我的网站上有一个联系表单，方便用户给我写信。Netlify 自带了内置的表单处理功能。我只需在标签中添加 netlify 属性或 data-netlify="true" ，就可以在 Netlify 网站管理面板中接收消息了。
• 域名设置：我直接从 Netlify 管理面板添加了自定义域名mouhamedaly.dev。几分钟后，我的域名就可用了。

Netlify 内容管理系统

定义：Netlify CMS 是一个开源的无头内容管理系统，可与任何静态站点生成器配合使用，构建更快、更灵活的 Web 应用程序。Netlify CMS 完全可扩展、平台无关、易于安装，并为用户提供友好的用户界面。

CMS 很有用，因为您可以从网站上的仪表板添加博客文章等内容，而不必使用 Markdown 手动添加帖子。

此启动器已预装 Netlify CMS，无需任何配置。启动应用后，我可以通过http://localhost:8000/admin访问我的 Netlify CMS 仪表板并添加新帖子。

由于 Netlify CMS 基于 Git，每次我添加新帖子时，内容都会存储在我的代码库中，并在 GitHub 上进行版本控制。此外，得益于Netlify 的持续部署功能，每次我添加或编辑帖子时都会部署一个新版本。这太棒了。

搜索引擎优化

您对博客的SEO优化越好，您的网站在搜索引擎结果页面上的排名就越高，从而会有更多人找到您的网站。

使用 Gatsby 可以让您的网站快速高效地被搜索引擎爬虫索引您的页面。

Gatsby 擅长 SEO，因为 Gatsby 页面是服务器端渲染的，并且所有页面内容都可供搜索引擎爬虫使用

右键点击->查看页面源代码

我用来提高 SEO 的一些技巧

React 头盔

元标签对于 SEO 至关重要。它们会告诉搜索引擎关于您网页的重要信息，例如应该如何在搜索结果中显示您的网页。

React Helmet 是我用来向网页添加元数据的插件。

使用此插件，您添加到组件的属性，例如标题、元属性等，将添加到 Gatsby 构建的静态 HTML 页面中。

网站地图

站点地图是一个 XML 文件，其中列出了您网站的所有页面，确保 Google 可以找到并抓取所有页面，同时帮助其了解您的网站结构。

gatsby-plugin-sitemap插件允许您使用 Gatsby 自动生成站点地图，然后机器人可以发现您的所有页面。

瞧瞧：

渐进式网页应用

我非常喜欢渐进式 Web 应用。对我来说，为我的个人博客开发一个渐进式 Web 应用非常重要，这样用户就可以像原生应用一样下载它。

我使用的启动器已经支持离线，所以我不需要配置任何东西。Gatsby 通常最好定义为 pwa 生成器而不是静态站点生成器。

它们为您提供构建真正的 PWA所需的一切：

• gatsby-plugin-manifes t：这使得用户可以将您的应用添加到他们的主屏幕。

• gatsby-plugin-offline **：**即使在离线模式下，用户仍然可以导航到我的应用程序并阅读我的博客文章。

自适应加载

自适应加载是一种 Web 性能模式，其中网站不仅根据屏幕尺寸做出响应，还根据实际设备硬件进行调整。

要成为一名优秀的开发者，你还应该关注方方面面，而不仅仅是最终用户看到的那些。你必须关注应用的性能，无论用户是谁、在哪个设备上加载，或者等待应用准备就绪的时间有多长。

在阅读了许多关于自适应加载的文章后，我决定将其添加到我的网站中，但这种模式与 Gatsby 无关。你可以将其添加到任何 React 应用中。

有一个名为react-adaptive-hooks的库，它提供了一套 React Hooks，用于根据用户的网络、数据保存偏好、设备内存和逻辑 CPU 核心进行自适应加载。

我可以在我的 gatsby 项目中使用这个 React 库，因为 gatsby 是一个 React 框架。

所以我可以检查用户的互联网连接类型，并据此决定向他们显示什么。

安装：

yarn add react-adaptive-hooks

进口 ：

import { useNetworkStatus } _from_ “react-adaptive-hooks/network”;

钩 ：

const { effectiveConnectionType } = useNetworkStatus();

用法：如果用户的连接速度较慢，我会显示 SVG 头像图像而不是显示我的 PNG 头像。

使用这些钩子和实用程序可以帮助您为用户提供最适合其设备和网络限制的出色体验。

图像优化

大型且未优化的图像会严重降低您的网站速度。

如果您想优化您的图像，那么gatsby-image可以满足您的需求。

Gatsby 图像通过提供此解决方案解决了这个问题。

我可以延迟加载我的图像并获得很好的模糊效果：

有关如何安装和使用 gatsby-image 插件的更多信息：请访问此页面。

这篇文章中还有很多很酷的功能我没提到，但你可以进一步探索 Gatsby。他们的文档写得非常出色，社区也非常友好。

为什么你应该使用 gatsby？

如果您想快速构建速度极快的网站和应用程序，Gatsby 是一个非常好的框架。

Gatsby 让一切变得简单

开始现代 Web 开发很复杂，您必须关心很多事情，例如 webpack、postcss、应用程序性能、部署等。

• 有了 gatsby 一切都变得简单，你不需要担心所有那些样板文件。
• 有大量免费的启动器可供您使用，以便快速入门。
• 您想要做的每件事都有一个插件。
• SEO友好
• 渐进式 Web 应用生成器

盖茨比很有趣

Gatsby 基于 React 和 Graphql 等热门技术构建，因此您无需从头学习新的技术栈。如果您喜欢使用 React 和 Graphql 创建网站，那么您一定会爱上 Gatsby。

Gatsby 可让您从任何您想要的地方提取数据：API、markdown 文件、数据库、Wordpress 等 CMS，并通过 graphql API 提供数据，这非常酷。

Gatsby 性能卓越

无需再担心 Web 应用的性能，Gatsby 会帮您搞定。Gatsby 网站速度非常快。

以下是 Gatsby 网站性能卓越的原因：

• Gatsby 遵循 Google 的PRPL架构模式：Push、Precash、Prerender、Lazyload 。以及其他性能最佳实践
• 仅生成静态资产：无需服务器
• 规范化第三方数据
• 它支持代码分割，从而实现内容的渐进式渲染。

Gatsby 为我们做了很多开箱即用的优化。

作为一名开发者，我使用 Gatsby 的体验非常棒。我非常享受用 Gatsby 搭建网站的过程❤️。你也应该尝试一下，你不会失望的。

您可能还想看看我的其他文章： https://mouhamedaly.dev

谢谢阅读。

参考：